Question

此处的文档http://archive.is/m7For#selection-5667.63-5669.3说：

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.

然而，在评论here中，我看到了：

我现在意识到了。那＆＃34; CSS＆＃34;不是指＆lt; style＆gt;和＆lt; link rel＆gt; 但仅指清单
注入的CSS

我对此感到困惑。可以修改我在document_start中注入的页面的CSS吗？

Answer 1

评论是正确的，并且不行来修改您在document_start中注入的页面的CSS。

当脚本注入run_at = document_start时，它可以修改仅它自己注入的CSS。直到某个时间点（可能在创建头部之后），它无法访问包括CSS在内的DOM。

但是，您可以使用以下观察者修改页面的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 });

如果您在加载页面后不需要修改新元素上的CSS，请添加：

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

你也可能想要“all_frames”：你的清单中是真的。

chrome扩展修改document_start中的CSS

1 个答案: