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

我已经检查了我能找到的关于这个主题的所有其他线程，但我还没有看到像我这样的问题。我有一个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 文件拒绝注入。

我错过了什么？

docs.google.com 是SPA https://en.wikipedia.org/wiki/Single-page_application（单页应用程序）因此它保留了最初构建的相同页面，只是通过更改可见 URL历史API https://developer.mozilla.org/en-US/docs/Web/API/History并重写页面的 DOM 以模仿真实的导航。

使用您当前的manifest.jsonmatches如果您在其主用户界面上打开带有文档的选项卡，它将不匹配，例如docs.google.com/ or docs.google.com/document/u/0/然后导航到文档。

解决方案是匹配整个站点： https://docs.google.com/*也许可以修复其中的一些 CSS 规则，以便它们只匹配您想要的页面上的内容，而不匹配其他页面上的内容。

也可以看看检测历史导航的方法 https://stackoverflow.com/a/39508954.