将CSS文件添加到Chrome扩展程序清单不起作用 [英] Adding CSS file to Chrome extension manifest not working

问题描述

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

I'm attempting to get an external CSS file to load in Chrome. To do this, it would seem I have to edit an existing Chrome extension's manifest.json file and minimally add the following to the content_scripts node:

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

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

From what I understand, this will add the Theme.css file (which is in the same root directory as the manifest.json file) to all pages accessed in Chrome. I saw that I could additionally qualify the json block by including a matches key-value pair, but I've omitted that here.

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

This doesn't appear to be working because I'm not seeing the styles. To start, my Theme.css file contains this:

span {
    color: green !important;
}

此外，我已经确认，我将其添加到(AngularJS Batarang FWIW)的扩展程序被Chrome识别为启用".

Additionally, I've confirmed that the extension I added it to (AngularJS Batarang FWIW) is recognized as "Enabled" by Chrome.

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

I also tried the solution explained here where you load the CSS as an accessible resource via a JS file, but that doesn't work either.

我想念什么?还是有更简单的方法来做到这一点?

What am I missing? Or is there an easier way to do this?

FWIW:以下是整个清单:

FWIW: here is the entire manifiest:

{
   "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" ]
}

推荐答案

您的 content_scripts 键有问题，您应该包装 matches ， css和 js 一起放在 content_scripts 键下，如下所示:

You have a problem with your content_scripts key, you should wrap your matches, css and js together under content_scripts key, like this:

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

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

Also, don't forget to write ./ before your CSS/JS File to point to your root directory!

这篇关于将CSS文件添加到Chrome扩展程序清单不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！