2014-02-09 5 views
0

Я использую скрипт контента для ввода кода в веб-сайты. Проблема в том, что, хотя большая часть css и js работает правильно, одна партия css не применяется. Css для контейнера, который будет иметь всю вещь, придерживаться нижней части экрана, вообще не применяется. Я знаю, что css является правильным, потому что я могу добавить его в инструменты разработчика на реальном сайте, и он работает. Почему это не распространяется на расширение? Я просто хочу похвалить, это только t_inject_container, который не применяется, все остальное работает.Почему CSS-код не применяется?

CSS:

/*----------------*/ 
/*----Main Page---*/ 
/_---------- -----*/ 
.t_inject_container 
{ 
    position:fixed; 
    width:100%; 
    bottom:0px; 
    left:0px; 
    z-index: 999; 
    background-color:grey; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box; 
} 
.menu { 
    background-color:lightblue; 
    border-radius:5px; 
} 
.t_intect_button { 
    background-color:blue; 
    display:block; 
    height: 50px; 
    width: 50px; 
    margin: 5px; 
    font-size: 20px; 
    color: white; 
    border: 0px; 
    border-radius:7px; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box; 
    border-radius:5px; 
} 

/*-----------------*/ 
/*Timeline Element*/ 
/*----------------*/ 
.timeline_element { 
    background-color:red; 
    border-radius:5px; 

} 
.t_text_area { 
    height: 50px; 
    width: 100px; 
} 

JS:

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

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

    function create_twitter_bar(){ 
     var table_container = $("<table />", { 
      class: "t_inject_container" 
     }); 
      var row = $("<tr />", { 
         class: "t_inject_row" 
         }); 
       var menu = $("<td />", { 
        class: "menu" 
       }); 
        var add_element_button = $("<button />", { 
         text: '+', 
         class: "add_button t_intect_button", 
         click: function() {add_timeline_element();} 
        }); 
        var minimize_button = $("<button />", { 
         text: 'm', 
         class: "minimize_button t_intect_button" 
        }); 
        menu.append(add_element_button); 
        menu.append(minimize_button); 
      row.append(menu); 
     table_container.append(row); 
     $("body").append(table_container); 
    } 

    create_twitter_bar(); 
}); 

manifest.json:

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

ответ

2

Может быть, CSS isnt't рабочих из-за сломанный комментарий в строке 3 ...

+1

О, ну это было немного немым, спасибо. – EasilyBaffled

+0

Ну, это дало мне возможность написать комментарии хотя бы ...;) – Martin

+0

@Martin и OP +2 rep;). –

Смежные вопросы