Google chrome extension chrome扩展在文档中修改CSS\u开始

这里的文件说：

然而，我在评论中看到：

我现在意识到了。该“”不指和 但仅指由清单注入的CSS

我对此感到困惑。。

---

在文档开始时修改我插入的页面的CSS可以吗？

注释正确，在文档开始时修改你插入的页面的CSS不可以

当脚本被注入run_at=document_start时，它只能修改它自己注入的CSS。直到稍后（可能在创建头部之后），它才能访问DOM（包括CSS）

但是，您可以在显示页面之前，通过使用如下观察者修改页面的CSS：

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 });

---

此外，您可能希望“所有帧”：在您的清单中为true。

您的意思是什么？document_start在加载页面DOM之前运行脚本。“这些文件在css中的任何文件之后被注入。”。。是页面的css，在这种情况下可以修改它们。。。或者是注入脚本的css？你担心的是一个人似乎并不真正知道如何去做他们想做的事情（问题中的多个语句清楚地表明他们并不真正理解），而这些问题在他们重新安装Chrome后就消失了？你为什么担心？按照文档进行操作。编写代码。如果有问题，请提出新问题。manifest.json中包含的

content\u scripts

对象中

CSS

项中的CSS文件。manifest.json

content\u脚本

js

和

css

在页面的任何内容（包括HTML）之前被注入，当它们被引导在

文档开始时

。这就是为什么

document.head

和

document.body

在那个时候都是

null

（这就是为什么你必须附加到

document.documentElement

，如果你想在DOM中添加一些东西的话）。是的，如果你使用JavaScript向DOM中添加

元素，其中包含CSS文件的URL（包括扩展名中的文件），该文件可能会在加载页面中的其他资源后加载。由于您开始遇到不确定的异步延迟，因此不能保证先加载该文件。但是，manifest.json

content\u脚本

css

条目中的文件保证先加载。

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 });

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