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 ?
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.
cssentry in thecontent_scriptsObject contained in the manifest.json. The manifest.jsoncontent_scriptsjsandcssare injected prior to anything from the page, including the HTML, when they are directed to be injected atdocument_start. That's whydocument.headanddocument.bodyare bothnullat that time (which is why you have to append todocument.documentElement, if you want to add something to the DOM at that point).<link>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.jsoncontent_scriptscssentry are guaranteed to load first.