How do I declaratively inject a css content script based on host?

user_11421502 0
Viewed 41

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"]
    }
]

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

Did I miss something?

google-chrome-extension google-chrome css json
1 Answers

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.

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.

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.

See also methods of detecting history navigation.

user_39598750
Related