javascript - 如何在呈现页面之前在用户脚本中切换 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 或类似的东西，内容脚本无法访问它们。您可以通过注入(inject)一些代码来获取它们，但是无法从该页面上的另一个域获取 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);

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