扩展内容脚本（JS/或 CSS）不适用答案

【问题标题】：Extension content script (JS/or CSS) is not applying扩展内容脚本（JS/或 CSS）不适用
【发布时间】：2021-12-22 10:24:43
【问题描述】：

我想要一个带有我自己的 CSS 代码的 Google Chrome 扩展程序，用于网站编程。我试图在 content_scripts 中包含我自己的 CSS 脚本，但它没有用。 我不能像 JavaScript 那样插入 css。这是我的代码：

manifest.json

{
"name": "XXX",
"version": "0.0.1",
"manifest_version": 2,
"permissions": [
    "tabs",
    "http://*/*",
    "https://*/*",
    "file:///*/*"
],
"content_scripts": [
    {
        "matches": [
            "*://www.google.com/*",
            "*://google.com/*"
        ],
        "css": [
            "style.css"
        ],
        "js": [
             "index.js"
        ],
        "all_frames": true
    }
],
"web_accessible_resources": [
    "style.css"
]
}

style.css

body{
    background-color: #303030;
}

index.js

prompt('code injected');

【问题讨论】：

标签： css google-chrome-extension

【解决方案1】：

Chrome 通过隐藏www 来谎报真实网址。
正确的匹配模式是

https://www.google.com/*

或

*://www.google.com/*

同时匹配http 和https。

您可以通过在地址栏中右键单击使 Chrome 显示完整的 URL：

【讨论】：

如果您使用 Opera，它会在其选项中默认阻止搜索引擎。对于 Chrome，打开 chrome://policy 并单击 show more 以获取 ExtensionSettings（如果存在），然后查找 runtime_blocked_hosts
感谢您的想法，但不幸的是它并没有改变任何东西。我不再需要关注我使用的是HTTP还是HTTPS，但是我无法插入css UNLIKE JAVASCRIPT。（我改变了问题）
不同的站点使用不同的 CSS，因此仅覆盖 body 可能不起作用。
这是我的 chrome（抱歉，我是德国人）：docs.google.com/presentation/d/…
没有 ExtensionSettings，所以政策不是问题。问题是您的 CSS 被站点覆盖，正如您在 devtools 中看到的那样。增加特异性的方法有很多，最简单的可能是添加!important，例如background-color: #303030 !important;