chrome extension modify CSS in document_start

Question

The doc here http://archive.is/m7For#selection-5667.63-5669.3 says:

In the case of "document_start", the files are injected after any files from css, but before any other DOM is constructed or any other script is run.

However in a comment here I saw:

I'v realized now. That "CSS" does not refer to <style> and <link rel> but refers only to CSS injected by manifest

I'm confused about this .. Is it OK to modify the CSS of the page I inject into in document_start ?

What do you mean? document_start runs script before the page DOM is loaded. — Daniel Herr, Aug 27 '17 at 02:36
"the files are injected after any files from css" .. is that the css of the page in which case they can be modified ... or the css of the injection script ? — kofifus, Aug 27 '17 at 03:23
You're concerned about one person that appears to not have really known how to do what they were trying to do (multiple statements in the question clearly indicate they don't really understand) *and* those problems went away once they reinstalled Chrome? Why are you concerned? Go with the documentation. Write the code. If you have problems, ask a new question. — Makyen, Aug 27 '17 at 03:23
The CSS files in the `css` entry in the `content_scripts` Object contained in the *manifest.json*. The *manifest.json* `content_scripts` `js` and `css` are injected prior to *anything* from the page, including the HTML, when they are directed to be injected at `document_start`. That's why `document.head` and `document.body` are both `null` at that time (which is why you have to append to `document.documentElement`, if you want to add something to the DOM at that point). — Makyen, Aug 27 '17 at 03:26
Yes, if you use JavaScript to add a `` element to the DOM which contains a URL to a CSS file (including to a file in your extension), that file *may* be loaded after some other resource(s) in the page are loaded. It's not guaranteed to be loaded first, as you start getting into indeterminate asynchronous delays. However, the files in your *manifest.json* `content_scripts` `css` entry are guaranteed to load first. — Makyen, Aug 27 '17 at 03:35
Thx Makyen, So the above person's comment was correct. If you put an answer I'll mark it — kofifus, Aug 27 '17 at 05:12

kofifus · Accepted Answer · 2017-08-29T05:36:52.243

The comment is correct and it is not OK to modify the CSS of the page you inject into in document_start.

When a script is injected with run_at = document_start it can modify only the CSS it itself injected. It does not have access to the DOM including CSS until some point later (probably after the head is created).

However you can modify the CSS of the page before it is shown by using an observer like this:

const convertCSS = () => {
    if (!convertCSS.nSheets) convertCSS.nSheets=0;
    if (convertCSS.nSheets===window.document.styleSheets.length) return;
    convertCSS.nSheets=window.document.styleSheets.length;

    for (const styleSheet of window.document.styleSheets) {
        const classes = styleSheet.rules || styleSheet.cssRules;
        if (!classes) continue;

        for (const cssRule of classes) {
            if (cssRule.type !== 1 || !cssRule.style) continue;
            const selector = cssRule.selectorText, style=cssRule.style;
            if (!selector || !style.cssText) continue;
            for (let i=0; i<style.length; i++) {
                const propertyName=style.item(i), propertyValue=style.getPropertyValue(propertyName);
                // YOUR LOGIC HERE ie:
                // if (propertyName==='background-color') cssRule.style.setProperty(propertyName, 'yellow',  style.getPropertyPriority(propertyName));
            }
        }
    }
}


const observer =new MutationObserver((mutations, observer) => convertCSS());
observer.observe(document, { childList: true, subtree:true });

If you don't need to modify the CSS on new elements once the page is loaded add :

document.addEventListener("DOMContentLoaded", e => observer.disconnect());

Also you probably want "all_frames": true in your manifest.

chrome extension modify CSS in document_start

1 Answers1