javascript - 为什么没有在内容脚本中应用某些 CSS?

标签 javascript jquery css google-chrome-extension

我正在使用内容脚本将代码注入(inject)网站。问题是,虽然大多数 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();
});

list .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 行的注释损坏...

关于javascript - 为什么没有在内容脚本中应用某些 CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21659901/

相关文章:

Javascript变量语句作为键值对

javascript - 根据条件使用 jquery 进行样式设置

html - 为什么 flex 元素不包装?

javascript - 功能在 Firefox 上不起作用

javascript - 如果在 div 中找到两个类,我想删除类,使用我尝试过但不起作用的 jQuery 函数

javascript - 我如何访问函数外的数组元素

html - 包装 div 旁边的空白

Javascript IE 事件,这个

javascript - 如何防止加载查询的 css 应用于整个页面?

javascript - Laravel Vuejs 自定义 Css 和 Js 文件