簡體   English   中英

為什么在內容腳本中沒有應用某些CSS?

[英]Why isn't some CSS being applied in the content script?

我正在使用內容腳本將代碼注入網站。 問題是雖然大多數css和js都正常工作,但是沒有應用一批css。 容器的css將使整個東西粘在屏幕的底部根本沒有應用。 我知道css是正確的,因為我可以在實時網站上的開發人員工具中添加它並且它可以工作。 為什么擴展名沒有應用它? 我只是想重新計算它只是t_inject_container沒有被應用,其他一切都在工作。

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" ]
}

也許css因為第3行的評論不合理而無法工作......

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM