Question

我为chrome编写了一个扩展程序，为网站“reddit”添加了某些功能。它使用以下jQuery为网站上的每个帖子添加了一个额外的按钮：

...    
$(this).append('<li><span class="grab_button">grab</span></li>');
...

班级grab_button是新的。它在reddit样式表中不存在，但是应该加载的扩展样式表chrome中的CSS未应用：

html body span.grab_button {
        color: #888 !important;
        font-weight: bold !important;
        padding: 0 1px !important;
}

我添加了!important规则，以确保覆盖任何适用的CSS。我已经使定义非常具体（我可能会使它更具体，但我不应该）。为什么它不适用？如果我使用webkit开发人员工具检查添加的按钮，它会列出适用于它的所有样式，甚至是那些被覆盖的样式，但它不会显示我的自定义样式。

以下是清单的相关部分：

"content_scripts": [
        {
            "matches": ["http://www.reddit.com/*"],
            "js": ["jquery-2.0.3.min.js", "script.js"],
        "css": ["style.css"]
        }
],

"web_accessible_resources": [
        "style.css",
    "script.js",
    "jquery-2.0.3.min.js"
]

有谁可以解释为什么这不起作用？

Answer 1

您的选择器不正确。您的标记创建了一个类名为grab_button的span，但您的CSS代码匹配的是一个跨越CONTAINS后代与该类名称的跨度。您的CSS选择器代码应为：

html body span.grab_button {

或者更好，只是：

.grab_button {

不需要它之前的所有东西，只是让它变慢。

Chrome扩展样式未注入

1 个答案: