我正在尝试为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
指令不起作用,并且在加载页面后执行了我的脚本。虽然我不知道为什么会这样。 最佳答案
我在文档开始时尝试了您的代码,但按预期没有得到任何工作表。正如文档所说,这是预期的,因为它们不是DOM构造的(因此不会有任何链接)。可以看到一些样式表,但是由于跨域CSS或类似的东西,内容脚本无法访问它们。您可以通过注入一些代码来获得它们,但无法从该页面上的另一个域(Reading documents CSS in Chrome Extension)获得CSS文件。
还有另一种方法可以使用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);
将其放在内容脚本中并在文档开始时运行。