jquery - 未注入(inject) Chrome 扩展样式

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 开发人员工具检查添加的按钮，它会列出所有适用于它的样式，甚至是被覆盖的样式，但它不会显示我的自定义样式。

这是 list 的相关部分:

"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 的跨度，但您的 CSS 代码正在匹配一个包含具有该类名的后代的跨度。您的 CSS 选择器代码应该是:

html body span.grab_button {

或者更好的是，只是:

.grab_button {

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