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

发布于 2024-11-18 21:43:02 字数 1466 浏览 5 评论 0原文

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

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

“未捕获的异常：[异常...”组件返回失败代码：0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMEventTarget.dispatchEvent]”nsresult:“0x80070057 (NS_ERROR_ILLEGAL_VALUE)”位置: "JS框架::"

我的代码：

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";
}

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

原文

My end goal is to create a firefox extension that inserts an HTML button onto a site and have it fire a function defined in a custom code module in my extension.

I tried to implement Nickolay's answer to this question. When I click the button I created though I get the following error in Firebug:

"uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMEventTarget.dispatchEvent]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: "

My code:

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);
},

My writeFile.jsm:

var EXPORTED_SYMBOLS = ["foo"];

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

Any idea on how I can fix this? I should also mention that I am completely new to developing browser extensions.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

允世 2024-11-25 21:43:02

button.setAttribute('onclick', 'dispatchEvent(event)') 不会执行您认为会执行的操作 - 单击按钮时，它会获取 click 事件，并且尝试发送它。但是，不允许第二次调度事件。您似乎想要的是这样的：

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

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

button.setAttribute('onclick', 'dispatchEvent(event)') will not do what you think it will do - when the button is clicked it takes the click event and tries to dispatch it. Dispatching an event a second time isn't allowed however. What you seem to want is this:

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

This creates a function closure that will have access to the variable of the surrounding code - including button and event. Further reading on closures: http://www.javascriptkit.com/javatutors/closures.shtml

回复收藏 0 原文