使用page-mod(Firefox Addon)将onclick事件添加到特定按钮

时间:2012-04-11 12:36:25

标签: javascript firefox-addon firefox-addon-sdk

我正在尝试使用插件构建器开发firefox插件。

我想修改基于网络邮件的邮件编辑器。 (在下面的代码中,我正在尝试使用Yahoo! Japan的邮件服务。)

我想在用户按发送按钮时执行特定代码。

插件代码为:

main.js

var self = require("self");
var pageMod = require("page-mod");


pageMod.PageMod({
    include: "*.mail.yahoo.co.jp",
    contentScriptWhen: 'end',
    contentScript: "document.getElementById('send_top').setAttribute('onclick', 'alert(\"blabla\")');"
});

电子邮件编辑器页面中的按钮:

<input id="send_top" class="inputbutton" type="submit" title="Submit an email"
       value="Submit" name="action_msg_send" accesskey="9">

当用户“提交”按钮时,我想显示对话框。

1 个答案:

答案 0 :(得分:6)

看起来您没有在内容脚本中正确添加onclick处理程序。您可以改为使用以下代码:

document.querySelector('#send_top').onclick = function() { 
    alert('bla bla'); 
}

以下是加载项构建器中的一个工作示例:

https://builder.addons.mozilla.org/addon/1048430/latest/

使用contentScript属性添加内容脚本代码的一个缺点是难以调试。有几个指针可以让这更容易:

  • 始终使用'contentScriptFile',并将您的代码写在位于附加组件数据文件夹中的单独js文件中。

  • 使用Firefox的“Scratchpad”开发者工具测试您的代码,您可以通过转到工具 - &gt;打开它。开发者 - &gt;便笺。要做到这一点:

    • 打开您正在修改的页面
    • 打开Scratchpad
    • 将您的JS代码粘贴到Scratchpad
    • 转到执行 - &gt;运行以运行代码