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

Question

我正在尝试使用插件生成器开发 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">

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

Answer 1

您似乎没有在内容脚本中正确添加 onclick 处理程序。您可以使用这样的代码：

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

这是附加构建器中的一个工作示例：

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

使用 contentScript 属性添加内容脚本代码的一个缺点是难以调试。一些提示可以让这变得更容易：

• 始终使用“contentScriptFile”，并将代码写入位于附加组件数据文件夹中的单独 js 文件中。

• 使用 Firefox 的“Scratchpad”开发工具测试您的代码，您可以通过转到“工具”->“开发人员”->“ScratchPad”打开该工具。为此：

  • 打开您正在修改的页面
  • 打开便签本
  • 将 JS 代码粘贴到 Scratchpad 中
  • 转到“执行”->“运行”来运行代码

Answer 2

使用 querySelectorAll 然后循环遍历元素：

<script>
const linkElements = document.querySelectorAll(".link-elements");
for(var i = 0; i < linkElements.length; i++) {
    var elem = linkElements[i];
    elem.onclick = function() {
        alert("clicked");
    }
}
<script>