Question

我正在开发一个基于网络的javascript / html应用程序，其中包含一个姊妹firefox-extension。

应用程序的page-javascript在页面加载后立即执行一些XHR调用，以便引入并显示页面所需的所有内容。

有没有办法在没有轮询DOM的情况下，我的扩展程序可以知道页面的初始化过程已经完成了？

Answer 1

确实有趣的问题..

我刚刚在MozillaZine的论坛上通过this post找到了一个简单的方法来实现这一目标。该技术基本上包括在网页中定义自定义DOM元素，用一些任意属性填充它，然后将其用作自定义事件的目标。可以捕获事件并将其用于将值从网页传递到扩展名。

网页（假设jquery可用）

<script type="text/javascript">
    $(document).ready(function(){

    $.get("http://mywebsite.net/ajax.php",function(data){
         //[...]process data

        //define a custom element and append it to the document

         var element = document.createElement("MyExtensionDataElement");
         element.setAttribute("application_state", "ready");
         document.documentElement.appendChild(element);

         //create a custom event and dispatch it 
         // using the custom element as its target

         var ev = document.createEvent("Events");
         ev.initEvent("MyExtensionEvent", true, false);
         element.dispatchEvent(ev);
    });             
  });
</script>

Chrome代码：

function myListener(e) {
   alert("data:" + e.target.getAttribute("application_state"));
}

function on_specialpage_load(event) {
  if (event.originalTarget instanceof HTMLDocument && 
      event.originalTarget.location.href == "http://mywebsite.net/myspecialpage.html") {

    var doc=event.originalTarget;
    doc.addEventListener("MyExtensionEvent", myListener, false, true);
  }
}
gBrowser.addEventListener("DOMContentLoaded",on_specialpage_load,false);

请注意，doc.addEventListener有第四个参数，表示它将接受来自不受信任代码的事件。但是，您可以有选择地添加此事件侦听器，以便只有您站点中的受信任页面才能将值传递给扩展。

Answer 2

您可以从扩展程序挂钩XMLHttpRequest对象并监控请求similar to what this GreaseMonkey script does（description）。添加一个包装器到onreadystatechange，就像他添加一个打开的包装器一样，在完成时通知扩展。可能还需要一些代码，以确保您在访问自己的页面时只执行此操作。

Firebug为它的Net面板做了类似的事情，虽然它的代码库有点吓人:)我也看了Firebug Lite watchXHR function，但是对我来说这个代码有点过于狡猾，如果你可以解决它让我知道。

firefox扩展和页面javascript之间的通信

2 个答案: