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. 刷新页面 - 未应用样式

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