我正在尝试创建一个 Firefox 插件(使用插件 SDK)来修改页面的显示方式，主要作为培训/学习练习。
对于某些任务(例如使用新功能扩充页面)使用 pageMod完全没问题。页面加载，我运行一些 JS 来显示/隐藏/添加元素。
我的问题是:我可以在页面开始显示之前对 DOM(即服务器返回的 HTML 文档)进行修改吗？
例如:从服务器返回的页面是:
<html>
<body>
<table>
<tr>
<td>Item 1.1</td>
<td>Item 1.2</td>
<td>Item 1.3</td>
</tr>
<tr>
<td>Item 2.1</td>
<td>Item 2.2</td>
<td>Item 2.3</td>
</tr>
</table>
</body>
</html>
但我希望 FF 渲染:
<html>
<body>
<ul>
<li>Item 1.1, Item 1.2, Item 1.3</li>
<li>Item 2.1, Item 2.2, Item 2.3</li>
</ul>
</body>
</html>
在页面加载后执行此操作将首先显示表格，然后它会快速“闪烁”到列表中。它可能足够快，但如果我要更改 <img>标记为 <a> ，例如防止(不需要的)图像加载，这是不够的。
我正在考虑使用 contentScriptWhen: "start"在 pageMod 中并尝试附加监听器，但我只是看不出如何“即时”修改 DOM(或者事件阻止在所有页面加载之前显示任何类型的页面)。
我检查过 cloud-to-butt扩展，因为它确实会即时修改页面，但我什至无法让它工作:当作为 pageMod 附加到 start 上时代码失败于:
document.getElementById('appcontent').addEventListener('DOMContentLoaded', function(e)
因为document.getElementById('appcontent')正在返回 null。
我将非常感谢一些指点:是否可能，如何附加脚本，如何拦截 HTML 并在进行一些修改后将其发送回原路。
编辑: 好的，所以我认为我能够拦截数据:
let { Ci,Cr,CC } = require('chrome');
let { on } = require('sdk/system/events');
let { newURI } = require('sdk/url/utils');
let ScriptableInputStream = CC("@mozilla.org/scriptableinputstream;1", "nsIScriptableInputStream", "init");
on('http-on-examine-response', function (event) {
var httpChannel = event.subject.QueryInterface(Ci.nsIHttpChannel);
var traceChannel = event.subject.QueryInterface(Ci.nsITraceableChannel);
if (/example.com/.test(event.subject.URI.spec)) {
traceChannel.setNewListener(new MyListener());
}
}, true);
function MyListener(downloader) {
this.data = "";
}
MyListener.prototype = {
onStartRequest: function(request, ctx) {
this.data = [];
},
onDataAvailable : function(request, context, inputStream, offset, count) {
var scriptStream = new ScriptableInputStream(inputStream);
this.data.push(scriptStream.read(count));
scriptStream.close();
},
onStopRequest: function(request, ctx, status) {
console.log(this.data.join(''));
}
}
现在 onStopRequest我想对数据做一些事情并将其输出回原来的位置...
请注意，这适用于字符串而不是 DOM，因此它并不完美，但它是一个开始的地方 :)
编辑2:
嗯，我让它工作了，虽然我觉得我真的不应该那样做:
onStopRequest: function(request, ctx, status) {
//var newPage = this.data.join('');
var newPage = "<html><body><h1>TEST!</h1></body></html>";
var stream = converter.convertToInputStream(newPage);
var count = {};
converter.convertToByteArray(newPage, count);
this.originalListener.onDataAvailable(request, ctx,
stream, 0, count.value);
this.originalListener.onStopRequest(request, ctx, status);
},
最佳答案
My problem is: can I perform modification on DOM (so: the HTML document that is returned by server) before the page even starts displaying?
是的，javascript 执行在页面第一次呈现之前就开始了。 DOM 解析器确实通知 mutation observers ，因此您可以在解析器添加元素后立即删除它们。
即使在加载了 contentScriptWhen: "start" 的内容脚本中，您也可以注册突变观察器所以他们应该在渲染之前通知所有元素被添加到树中，因为观察者通知是在微任务队列中执行的，而渲染发生在宏任务队列上。
but I wasn't even able to get it to work: when attached as a pageMod on start the code failed on:
document.getElementById('appcontent').addEventListener('DOMContentLoaded', function(e)
当然。你不应该假设任何元素特别 - 甚至不是 <body>标签 - 在页面加载的早期就已经可用。您将不得不等待它们可用。
还有 DOMContentLoaded事件可以简单地在 document 上注册目的。我不知道你为什么要在某个元素上注册它。
(or event prevent any kind of page display before all page was loaded).
您真的不希望这样做，因为它会增加页面加载时间，从而降低网站的响应速度。
关于javascript - 在页面显示给用户之前拦截和修改 DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28573225/