Question

我正在尝试在Chrome中加载外部CSS文件。要做到这一点，我似乎必须编辑现有的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" ]
}

Answer 1

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

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

Answer 2

您的content_scripts键有问题，应将matches，css和js包装在content_scripts键下，如下所示：< / p>

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

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

将CSS文件添加到Chrome扩展程序清单无效

2 个答案: