如何在呈现页面之前在用户脚本中切换 CSS 文件？

Question

我正在尝试为 Chrome 编写一个用户脚本，用于切换特定网站的特定 CSS 文件。

关于将 CSS 文件切换到另一个文件的部分工作正常，问题是我无法在页面呈现之前发生这种情况。这会导致网站在最初呈现原始布局然后很快被我插入的新布局替换时出现非常难看的闪烁。

我使用@run_at document_start 让我的用户脚本在页面呈现之前运行，但这似乎无法正常工作。从我可以看到from the official Chrome documentation 这应该是支持的。

作为参考，这是我的完整脚本：

// ==UserScript==
// @name           name
// @namespace      namespace
// @version        0.1a
// @description    description
// @include        http://example.com/*
// @run_at document_start
// ==/UserScript==


var sheets = document.getElementsByTagName("link");

for (var i=0; i<sheets.length; ++i) {
    if (sheets[i].href.indexOf('all.css') != -1) {
        sheets[i].href = 'http://replacement.com/all.css';
    }
}

我进一步调查并设法在我的脚本中设置了一个断点（由于某种原因，该脚本最初没有出现在开发人员工具中）。当在我的脚本开头的断点处停止时，该站点已经完全加载了原始主题。所以似乎@run_at document_start 指令不起作用，我的脚本在页面加载后执行。虽然我不知道为什么会这样。

Answer 1

我在文档开始时尝试了您的代码，但正如预期的那样，没有得到任何工作表。这是意料之中的，因为文档说他们没有构造 DOM（所以不会有任何链接）。有一些样式表可以看到，但由于跨域 css 或类似的原因，内容脚本无法访问它们。您可以通过注入一些代码来获取它们，但无法从该页面上的另一个域获取 css 文件（Reading documents CSS in Chrome Extension）。

还有另一种方法可以交换 css 文件，那就是使用 onBeforeLoad 事件....

function doBeforeLoad(event){
    if ((event.srcElement.type=="text/css") && (event.srcElement.href.indexOf('all.css') != -1) && ( event.srcElement.href != 'http://replacement.com/all.css')) {
        event.srcElement.href = 'http://replacement.com/all.css';
    }
}

document.addEventListener('beforeload', doBeforeLoad , true);

将其放入内容脚本并在文档开始时运行。