Chrome 扩展的 CSS 未加载

Question

我正在开发一个“内容脚本”Chrome 扩展程序。我正在尝试使用 CSS 文件为页面上的一些现有元素设置样式，并为我使用 JavaScript 动态创建的元素设置样式。

我在 manifest.json 文件中指定了我的 CSS 文件：

{
    ...
    "content_scripts": [
        {
            "matches": [ ... ],
            "js": [ ... ],
            "css": [ "style.css" ]
        }
    ]
    ...
}

然后，如果我将以下内容放入我的 style.css 中，则不会发生任何事情：

body {
    background-color: red;
}

我还以如下形式提出了一些规则：

#MyInsertedEl {
    color: red;
}

然后插入（使用 jQuery）id 为 MyInsertedEl（锚链接）的元素到页面中，但它的颜色不是红色（该元素已插入并在页面中可见）。

那是什么？我究竟做错了什么？根据文档，我已经得到了我应该得到的一切，谷歌没有返回任何有用的东西。

编辑：如果以任何方式相关，此代码将在 facebook 的页面上运行...

Answer 1

嗯，显然，Chrome 中存在错误。如果您的matches 表达式中有?，则不会加载CSS 文件。我已经提交了一份包含更多详细信息的错误报告here。

Answer 2

您的 javascript 是否被注入（匹配规则正确）？尝试将 !important 添加到您的 CSS 规则中：

color: red !important;

Answer 3

见下方编辑

您需要在页面中至少包含一个样式表文件才能应用您的content_script 样式：

<link rel="stylesheet" type="text/css" href="#" />

因此，如果您没有包含任何样式表，只需添加一个空白的 link 标记，就像上面一样。

我知道这听起来很有趣，但它确实对我有用。

编辑

两件事是我的场景所特有的

1. 该错误仅出现在file 协议上
2. 这些文件不是.html（在我的情况下是.md）

问：为什么我需要.md 文件的样式表？

答：content_script 匹配.md 文件并插入一个js 文件，该文件将markdown 编译为html。样式用于生成的 html。

manifest.json

{
    "manifest_version": 2,
    "name"            : "bug",
    "version"         : "1.0",
    "description"     : "bug",

    "content_scripts": [
        {
            "matches": [
                "*://*/*.*",
                "file:///*/*.*"
            ],
            "css": ["style.css"],
            "js": ["script.js"],
            "run_at": "document_start",
            "all_frames": true
        }
    ]
}

script.js

window.addEventListener('load', function (e) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = '#';
    document.head.appendChild(link);
}, false);

style.css

body { background: gray; }

步骤

1. 打开一些file:///1.md 文件
2. 注释掉script.js里面的代码
3. 重新加载扩展
4. 返回之前打开的.md 文件 - 最初加载样式
5. 刷新页面 - 未应用样式

我知道这是一个极端情况，但我的扩展可能会出现这种情况，我只是想指出我的解决方案。