如何从 Firefox 扩展中注入的 HTML 按钮触发事件？答案

【问题标题】：How to trigger an event from injected HTML button in firefox extension?如何从 Firefox 扩展中注入的 HTML 按钮触发事件？
【发布时间】：2011-07-07 22:29:32
【问题描述】：

我的最终目标是创建一个 firefox 扩展，将 HTML 按钮插入网站并让它触发在我的扩展的自定义代码模块中定义的函数。

我试图实现 Nickolay 对此question 的回答。当我单击我创建的按钮时，虽然我在 Firebug 中收到以下错误：

“未捕获的异常：[Exception...”组件返回失败代码：0x80070057（NS_ERROR_ILLEGAL_VALUE）[nsIDOMEventTarget.dispatchEvent]”nsresult：“0x80070057（NS_ERROR_ILLEGAL_VALUE）”位置：“JS frame ::”

我的代码：

onPageLoad: function(aEvent) {
    Components.utils.import("chrome://my_ext/content/writeFile.jsm", my_ext);
    //alert(foo());  - foo() is an function in the above code module I import


    var doc = aEvent.originalTarget; // doc is document that triggered "onload" event

    var event = doc.createEvent("Events");
    event.initEvent("my-custom-event", true, true);

    var fblike = doc.getElementById("LikePluginPagelet");
    var button = doc.createElement("input");
    button.setAttribute("type", "button");
    button.setAttribute("value", "My Button");
    button.setAttribute('onclick', 'dispatchEvent(event)');

    fblike.appendChild(button, fblike);

    var docx = event.originalTarget;
    if(docx && docx.addEventListener)
        docx.addEventListener("my-custom-event", function() {alert(foo()); }, false);
},

我的 writeFile.jsm：

var EXPORTED_SYMBOLS = ["foo"];

function foo() {
    return "foo test";
}

知道如何解决这个问题吗？我还应该提到，我对开发浏览器扩展完全陌生。

【问题讨论】：

标签： javascript firefox firefox-addon mozilla

【解决方案1】：

button.setAttribute('onclick', 'dispatchEvent(event)') 不会做你认为它会做的事情——当按钮被点击时，它会接受click 事件并尝试调度它。但是，不允许第二次调度事件。你似乎想要的是这样的：

button.addEventListener("click", function() {
  button.dispatchEvent(event);
}, false);

这将创建一个函数闭包，它可以访问周围代码的变量——包括button 和event。关于闭包的进一步阅读：http://www.javascriptkit.com/javatutors/closures.shtml

【讨论】：

嗯，当我尝试实现这个时，我得到一个非常模糊的错误：“未捕获的异常：[异常...”组件不可用”nsresult：“0x80040111（NS_ERROR_NOT_AVAILABLE）”位置：“JS 框架:: chrome://mezz/content/overlay.js :: :: line 43" data: no]" Line 43 指的是你建议的代码（“button.onclick = function() ...”） .谷歌搜索此错误将我带到提示 Firefox 不兼容但不确定的页面。
@user773953：哦，您正在将该按钮注入内容页面。是的，onclick 将不可用，您应该改用addEventListener（这通常是个好主意）。我编辑了我的答案以反映这一点。
我想我错过了一些东西。我现在没有错误，但按钮不起作用。当我单击它时，没有任何反应。澄清一下，我原始代码的最后三行仍然没问题，对吧？从“var docx = event.original...”开始。
更新：玩了一些，现在我终于收到了事件......请参阅帖子末尾的剩余问题。更改：1）将 var 'event' 更改为 'mEvent'（可能与 var 有冲突） 2）将“my-custom-event”更改为“mClick”（'-' 可能导致问题）3）摆脱声明紧随其后的新 var 'docx' 和 'if' 语句。最后一个 addEventListener 使用 'doc' 而不是 'docx'。剩下的问题：alert(foo()) 语句仍然不起作用。出于测试目的，更改为 alert("test") 并且有效，但我又回到了原点，因为以前有效。
@user773953：老实说，一次回答几个不相关的问题并不有趣——尤其是在大多数问题都没有明确说明的情况下。你问你的事件调度有什么问题，我回答了这个问题。

【解决方案2】：

终于搞定了。我不需要添加第二个监听器，它只需要一行： button.addEventListener("click", foo, false);

我之前尝试过 foo() 而不是 foo，但失败了，但现在工作正常。

【讨论】：