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

【问题标题】：Communication between firefox extension and page javascriptfirefox扩展和页面javascript之间的通信
【发布时间】：2009-08-20 10:06:55
【问题描述】：

我正在开发一个基于 web 的 javascript/html 应用程序和一个姊妹 firefox 扩展。

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

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

【问题讨论】：

标签： javascript firefox firefox-addon

【解决方案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 有第四个参数，表示它将接受来自不受信任代码的事件。但是，您可以有选择地添加此事件侦听器，以便只有您网站中受信任的页面才能将值传递给扩展程序。

【讨论】：

...确实是一个非常有趣的答案。我对自定义事件和侦听器技术非常感兴趣。您是否认为这将是 page-javascript 能够“调用”扩展程序中的函数的最佳方式。例如实现跨站点 XHR on-click（在我自己受信任的应用程序和域中）。
不确定这是否是最好的方式，但它似乎是高效且相当安全的。我刚刚尝试将一个对外部站点的 XHR 请求包装到侦听器中，并且效果很好！
这是推荐的技术，是的：developer.mozilla.org/en/Code_snippets/…>.

【解决方案2】：

您可以从您的扩展中挂钩 XMLHttpRequest 对象并监控请求，similar to what this GreaseMonkey script does (description)。将包装器添加到 onreadystatechange 中，就像他添加包装器以打开一样，它会在完成时通知扩展。可能还需要一些代码来确保您仅在访问自己的页面时才这样做。

Firebug 为它的 Net 面板做了类似的事情，不过代码库有点吓人:) 我也看过Firebug Lite watchXHR function，但如果你能工作，那代码对我来说有点太狡猾了出来告诉我。

【讨论】：