如何声明地基于主机注入CSS内容脚本? [英] How do I declaratively inject a css content script based on host?

问题描述

我已经检查了在该主题上可以找到的所有其他线程，但是没有看到像我这样的问题.我有一个Chrome扩展程序manifest.json(版本3)，在其中我声明要基于主机匹配模式注入js文件和css文件:

I've checked all the other threads I could find on this topic, but I haven't seen an issue like mine. I have a chrome extension manifest.json (version 3) where I declare that I want a js file and a css file injected based on a host match pattern:

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

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

I know the host pattern is valid because the js file is injected and runs. However, the CSS file refuses to inject.

我错过了什么吗?

推荐答案

docs.google.com是历史记录API ，并重写页面的DOM来模仿真实的导航.

docs.google.com is a SPA (Single-Page Application) so it preserves the same initially constructed page and just changes the visible URL via History API and rewrites the DOM of the page to imitate real navigation.

与您当前的manifest.json的 matches 匹配，如果您在其主界面上使用docs docs.google.com/或 docs.google.com/document/u/0/，然后导航到文档.

With your current manifest.json's matches it won't match if you opened the tab with docs on its home UI like docs.google.com/ or docs.google.com/document/u/0/ and then navigated to a document.

解决方案是匹配整个网站: https://docs.google.com/* 并可能修复其中的一些CSS规则，以便它们仅与以下内容匹配您想要的页面以及与其他页面上不匹配的页面.

The solution is to match the entire site: https://docs.google.com/* and maybe fix some CSS rules inside so they only match things on pages you want and don't match things on other pages.

另请参见检测历史记录导航的方法.

这篇关于如何声明地基于主机注入CSS内容脚本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！