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

我正在尝试为Chrome编写一个用户脚本，为特定网站交换特定的CSS文件。如何在页面呈现之前切换用户脚本中的CSS文件？

关于将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指令不起作用，我的脚本在页面加载后执行。虽然我不明白为什么会出现这种情况。

来源

2012-03-27 Mad Scientist

这可能是因为它需要另一次异步往返才能下载css，这留下了循环窗口来呈现文档。为什么不尝试使用dataUri作为潜在的同步选项来呈现新的CSS内容？（这你必须事先下载并缓存） – 2012-03-27 18:06:37

这在我的情况下似乎不是问题，我已经用更多的细节更新了我的问题。看来我的脚本没有在正确的时间执行，出于某种原因'@run_at document_start'在我的情况下不起作用。 – 2012-03-27 18:46:11

我在文档开始时尝试了你的代码，并且如预期的那样没有得到任何表单。这是预料之中的，因为文档说他们没有构建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);

假如把它放在一个内容脚本，并在文件开始运行。

来源

2012-03-27 19:35:45 PAEz

谢谢，这个工程。虽然我还必须创建扩展而不是使用用户脚本，但在页面之前加载用户脚本似乎不起作用。 – 2012-03-27 20:10:18

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

回答

相关问题