加载前的 Firefox 引导加载项注入答案

【问题标题】：Firefox Bootstrapped Add-On Injecting before load加载前的 Firefox 引导加载项注入
【发布时间】：2014-08-27 17:49:18
【问题描述】：

是否可以在使用 Bootstrapped 插件导航到页面之前为文档添加事件侦听器？我想看看用户想要导航到哪个页面，以及稍后在页面加载后检查 DOM。我需要在 HTML 内容上下文中运行代码。

过去我使用工具栏 XUL 并在其中包含 javascript，它会在 HTML 页面加载之前加载。

【问题讨论】：

您想编辑渲染的源代码/html吗？如果这是真的，那么我必须给出不同的解决方案。但如果你想在DOMContentLoaded 之前访问 dom，请参阅下面的解决方案。

标签： firefox firefox-addon

【解决方案1】：

前段时间我在 DOMContentLoaded 之前查看了一些东西，发现有一个文档插入观察者。

在底部运行研究代码后的事件顺序

readystate 更改为 interactive（我想多次，不确定）
readystate 更改为 complete
DOMContentLoaded 事件触发
load 事件触发 （有时加载不会触发，如果您可能需要更改 addEventListener 并将捕获参数（第三个参数）设置为 false 或 true）

显然在这一切之前应该有readystateloading，但我永远无法抓住它，我不知道为什么。

在暂存器中运行代码后，当然是浏览器环境，然后加载一个新页面并观察错误控制台，它会按以下顺序抛出这些报告：

ready state changed! ("interactive") Scratchpad/4:18
02:28:07.873 ready state changed! ("complete") Scratchpad/4:18
02:28:07.874 DOMContentLoaded event fired! Scratchpad/4:53
02:28:07.938 Load event fired! Scratchpad/4:45

这里是研究代码。它添加了一个监听器和观察者来查看触发了什么。

var {classes: Cc, interfaces: Ci, utils: Cu} = Components;
var os = Cc['@mozilla.org/observer-service;1'].getService(Ci.nsIObserverService);
var LMObserver;

function myObserver() {
  this.register();
}

myObserver.prototype = {
    observe: function (subject, topic, data) {
        //Cu.reportError(subject);
        //Cu.reportError(data);
        //i think subject is window element
        subject.onreadystatechange = function () {
            //loading
            //interactive
            //complete
            Cu.reportError('ready state changed! ("' + subject.readyState + '")');
            //var body = subject.documentElement.querySelector('body')
//you want to change title so you would do that here do something like: if (subject.readystate == 'complete') { subject.title = 'blah blah' }
            //Cu.reportError('has body element: ' + body)
        }

    },
    register: function () {
        os.addObserver(this, 'document-element-inserted', false);
    },
    unregister: function () {
        os.removeObserver(this, 'document-element-inserted', false);
    }
};


//below this is the DOMContentLoaded thing i put this here so we can see what fires in what order
var pageLoad = function(event) {
    var win = event.originalTarget.defaultView;
    if (win && win.frameElement) {
      return;
    }
    Cu.reportError('Load event fired!');
}

var pageDOMContentLoaded = function(event) {
    var win = event.originalTarget.defaultView;
    if (win && win.frameElement) {
      return;
    }
    Cu.reportError('DOMContentLoaded event fired!');
}


LMObserver = new myObserver;
gBrowser.addEventListener("load", pageLoad, true);
gBrowser.addEventListener("DOMContentLoaded", pageDOMContentLoaded, true);
//gBrowser.removeEventListener("load", pageLoad, true);
//gBrowser.removeEventListener("DOMContentLoaded", pageDOMContentLoaded, true);
//LMObserver.unregister();

以下是对使用true 或false 作为捕获参数添加的load 事件的一些更深入的研究：https://github.com/Noitidart/event-listener-experiment-DOMC-and-load/blob/master/bootstrap.js

【讨论】：