Injection with Chrome extension

I am building a Chrome extension that injects a small overlay in to all websites using a content script. At this point all the injected elements do is sit in the bottom left corner. It has two buttons the top one produces another element and the button one doesn't do anything. The extra element has a button that closes itself, and a text box.

This is my first major JavaScript/Chrome extension project, so my main concerns are:

-
Don't violate chrome extension rules that will caused deprecated code or the like

-
Given that I am inserting new code into a website I want to make sure that this is as efficient as possible as to minimize strain on Chrome.

Basic Injection



Injection after '+' pressed



Manifest.json

{
    "name": "injection",
    "description": "samples at code injection",
    "version": "1",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [ ""],
            "css":["style.css"],
            "js":["jquery-2.1.0.min.js", "index.js"]
        }
    ],
    "permissions": [ "", "storage" ]
}

index.js

```
$(function(){
//$(".add_button").click(add_timeline_element);

function add_timeline_element(){
var text_input = $('', {
type: "text",
class: "t_text_area"
});
var button = $('', {
text: '-',
class: "t_intect_button",
click: function() {$(this).parent().remove();}
});
var timeline_element = $('', {
class: "timeline_element"
});
timeline_element.append(button);
timeline_element.append(text_input);
$(".t_inject_row").append(timeline_element);
}

function minimize_t_inject_container(){
$(".add_button").toggle();
}

function create_twitter_bar(){
var table_container = $("", {
class: "t_inject_container"
});
var row = $("", {
class: "t_inject_row"
}

Some notes on your CSS:

-
You can apply the box-sizing declaration to all the elements in your container:

.t_inject_container,
.t_inject_container * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

-
Ommit the units if you have zero values like 0px: bottom: 0;, left: 0;, …

• In your rule declaration for .t_inject_button you use the border-radius property two times. I guess you were overlooking it and this is not on purpose?

-
You repeat your border-radius declaration a few times. Let's make this a bit DRY'er and make an abstraction:

.t_rounded {
    border-radius: 5px;
}

Now apply this class to every element you want to have rounded borders on.

Feel free to ask, if you have questions. That's it for now.

Update (based on the added HTML)

-
There is no doctype in your code. If there really isn't one, you should really add this before the html tag:

-
If you use the HTML5 doctype (see above), you can switch to a newer, short charset declaration:

-
You're using a table to wrap your buttons. Tables are for tabular data. Since you this for layout purposes, use div's like so:

    
        
            +
        
        
            m
        
    

I also used an unordered list to mark up your navigation. Use the following CSS to normalize the typical list styles:

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu > li {
    display: inline-block;
}

StackExchange Code Review Q#41305, answer score: 10