添加CSS文件到Chrome扩展清单不工作

我试图获得一个外部CSS文件加载到Chrome中。要做到这一点，似乎我不得不修改现有的Chrome扩展的manifest.json档案和最低限度地添加以下到content_scripts节点：添加CSS文件到Chrome扩展清单不工作

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

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

这似乎没有工作，因为我没有看到样式。首先，我Theme.css文件包含此：

span { 
    color: green !important; 
}

此外，我已经确认为“已启用”，由镀铬我把它添加到（AngularJS Batarang FWIW）的扩展是公认的。

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

我错过了什么？还是有更简单的方法来做到这一点？

FWIW：这里是整个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" ] 
}

来源

2016-03-04 im1dermike

这将帮助，如果你可以列出你'manifest.json' –

哪些网页你测试此？ – Xan

@HaibaraAi更新了问题。 – im1dermike

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

如果你想将它应用到所有页面，使用"matches": ["<all_urls>"]

来源

2016-03-04 20:28:51

我刚刚尝试过'{“matches”：[“”]，“css”：[“Theme.css”]}'，但仍然不起作用。如果通过改变你想让我填写''，我以前也尝试过这样做：'“matches”：[“http：// */*”，“https：// */*”]''。 – im1dermike

@ im1dermike这是您发布的部分清单中唯一缺少的东西。如果你仍然遇到麻烦，那么你有责任发布你的[mcve]的整个清单。 – Teepeemm

添加CSS文件到Chrome扩展清单不工作

回答

相关问题