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）。

使用onBeforeLoad事件有另一种交换css文件的方法....

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

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

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

1 个答案: