将 CSS 文件添加到 Chrome 扩展清单不起作用答案

【问题标题】：Adding CSS file to Chrome extension manifest not working将 CSS 文件添加到 Chrome 扩展清单不起作用
【发布时间】：2016-06-18 16:27:15
【问题描述】：

我正在尝试获取外部 CSS 文件以在 Chrome 中加载。为此，我似乎必须编辑现有 Chrome 扩展的 manifest.json 文件，并将以下内容至少添加到 content_scripts 节点：

{
  "css": [ "Theme.css" ]
}

据我了解，这会将 Theme.css 文件（与 manifest.json 文件位于同一根目录中）添加到 Chrome 中访问的所有页面。我看到我可以通过包含 matches 键值对来额外限定 json 块，但我在这里省略了。

这似乎不起作用，因为我没有看到样式。首先，我的 Theme.css 文件包含以下内容：

span {
    color: green !important;
}

此外，我已确认我添加到的扩展程序 (AngularJS Batarang FWIW) 被 Chrome 识别为“已启用”。

我还尝试了here 解释的解决方案，您可以通过 JS 文件将 CSS 作为可访问资源加载，但这也不起作用。

我错过了什么？或者有更简单的方法吗？

FWIW：这是整个清单：

{
   "background": {
      "scripts": [ "background.js" ]
   },
   "content_scripts": [ {
      "js": [ "inject.js" ],
      "matches": [ "<all_urls>" ],
      "run_at": "document_start"
   }, {
      "matches": [ "http://*/*", "https://*/*"],
      "css": [ "Theme.css" ]
   } ],
   "description": "Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications.",
   "devtools_page": "devtoolsBackground.html",
   "icons": {
      "128": "img/webstore-icon.png",
      "16": "img/webstore-icon.png",
      "48": "img/webstore-icon.png"
   },
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hsXx3+F75DyGto3mkm0FB2sycQzyMqXQAySn2Qj67vIHFMSrVZ0ItPzGnWJwoRoaDI7cQF9c/WLDpLJQwGe5CV5z84MueOME3e45JJEwN+YsW5ufEavmp+pk1c9h/Wyi8bMoSWJGIrOG72wCTFOdnyN6nocA0dm4w7UWsxLLEQIDAQAB",
   "manifest_version": 2,
   "minimum_chrome_version": "21.0.1180.57",
   "name": "AngularJS Batarang",
   "page_action": {
      "default_icon": {
         "19": "img/icon19.png",
         "38": "img/icon38.png"
      },
      "default_title": "AngularJS Super-Powered"
   },
   "permissions": [ "tabs", "<all_urls>" ],
   "update_url": "https://clients2.google.com/service/update2/crx",
   "version": "0.10.6",
   "web_accessible_resources": [ "dist/hint.js" ]
}

【问题讨论】：

如果你能列出你的manifest.json会有所帮助
你在哪些页面上测试这个？
@HibaraAi 更新了问题。
@Xan 我访问的任何网页都应该可以工作，因为我的 match 键值对包含所有内容。
任何网页都可以，但你能提供一个测试用例吗？

标签： css google-chrome google-chrome-extension

【解决方案1】：

您没有注册任何要应用 CSS 文件的页面。 matches section is required。

如果要将其应用于所有页面，请使用"matches": ["<all_urls>"]

【讨论】：

我刚试过{ "matches": ["<all_urls>"], "css": [ "Theme.css" ] }，但还是不行。如果通过更改您要我填写<all_urls>，我之前尝试过也无济于事："matches": [ "http://*/*", "https://*/*"]。
@im1dermike 这是您发布的清单部分中唯一缺少的内容。如果您仍然遇到问题，那么您有责任发布您的 minimal reproducible example 的整个清单。

【解决方案2】：

您的content_scripts 密钥有问题，您应该将matches、css 和js 一起包装在content_scripts 密钥下，如下所示：

"content_scripts": [
    {
        "matches": ["http://*/*"],
        "css": ["./Theme.css"],
        "js": ["./inject.js"]
    }
],

另外，不要忘记在你的 CSS/JS 文件之前写 ./ 以指向你的根目录！

【讨论】：