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页面上运行，如果有任何相关的内容，请注意...

- Jan Hančič

Answer 1

显然，Chrome 存在一个错误。如果您的 matches 表达式中有一个 ?，则 CSS 文件将无法加载。我已经提交了一个带有更多详细信息的错误报告 这里。

- Jan Hančič

Answer 2

你的 JavaScript 是否被注入（匹配规则正确）？尝试在 CSS 规则中添加 !important：

color: red !important;

- serg

---

规则是正确的。在同一规则下的JS文件正在执行。!important没有帮助。 - Jan Hančič

@Jan，你尝试打开调试控制台并检查元素以查看应用了哪些样式表吗？扩展程序的CSS应该显示在“用户样式表”部分中。 - serg

不应用任何样式（除了页面定义的样式），也没有“用户样式表”部分：\ - Jan Hančič

Answer 3

请看下面的修改

为了使您的content_script样式生效，您需要在页面中至少包含一个样式表文件：

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

如果您没有包含任何样式表，请添加一个空的link标签，就像上面的示例一样。

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

编辑

两件事情适用于我的场景：

1.错误仅在文件协议上发生 2.文件不是.html（在我的情况下是.md）

问：为什么我需要在.md文件上使用样式表？

答：content_script匹配.md文件，并插入一个将markdown编译为html的js文件。 样式用于生成的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. 刷新页面 - 样式不再被应用

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

- simo

---

这听起来非常不可能。如果真的发生了，请在http://crbug.com/new上创建一个报告。 - Rob W

感谢@RobW的建议，但我并不完全确定这是否是一个实际的错误，尽管在我的情况下看起来像一个错误。请参见上面的编辑。 - simo