如何以声明方式注入基于主机的 css 内容脚本？答案

【问题标题】：How do I declaratively inject a css content script based on host?如何以声明方式注入基于主机的 css 内容脚本？
【发布时间】：2021-06-12 09:50:38
【问题描述】：

我已经检查了我能找到的关于这个主题的所有其他主题，但我还没有看到像我这样的问题。我有一个 chrome 扩展 manifest.json（版本 3），我声明我想要一个基于主机匹配模式注入的 js 文件和 css 文件：

"content_scripts": [
    {
        "matches": ["https://docs.google.com/presentation/d/*"],
        "js": ["/Assets/JS/PageScript.js"],
        "css": ["/Assets/CSS/PageCSS.css"]
    }
]

我知道主机模式是有效的，因为 js 文件被注入并运行。但是，CSS 文件拒绝注入。

我错过了什么吗？

【问题讨论】：

文件名是否完全匹配？一样的情况？确保它存在，即它是可读的并且它是有效的。尝试重新创建 CSS 文件夹和文件。
我一直在使用chrome.scripting.insertCSS() 以编程方式从服务人员端注入相同的文件，并且它可以工作。我正在尝试转向静态声明，因为网上商店要求提供使用脚本 API 的理由，他们可能会拒绝我并告诉我使用静态声明。

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

【解决方案1】：

docs.google.com 是一个 SPA（单页应用程序），因此它保留了最初构建的相同页面，只是通过 History API 更改可见 URL 并重写页面的 DOM 以模仿真实的导航。

使用您当前 manifest.json 的 matches，如果您在其主页 UI 上打开带有文档的标签页，例如 docs.google.com/ 或 docs.google.com/document/u/0/，然后导航到文档，它将不匹配。

解决方案是匹配整个网站： https://docs.google.com/* 并可能在内部修复一些 CSS 规则，使其仅匹配您想要的页面上的内容，而不匹配其他页面上的内容。 p>

另见methods of detecting history navigation。

【讨论】：

感谢您的提示，您说得对，我没有考虑到这一点。不过，我目前的第一个问题是我知道 url 是匹配的，因为相同模式下的 javascript 已成功注入，但我的 css 没有注入。
听起来像一个错误。可能是this one。