Add onclick event to specific button with page-mod (Firefox Addon)

Question

I'm trying to develop firefox addon with addon builder.

I want to modify mail editor of a web-based mailer. (In following code, I'm trying with Yahoo! Japan's mail service.)

I want to execute specific code when the user press Send button.

The addon code is:

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\")');"
});

The button in email editor page:

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

When the user "Submit" button, I want to show dialog.

Answer 1

It looks like you're not adding the onclick handler properly in your content script. You might instead use code like this:

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

Here's a working example of this in the add-on builder:

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

One downside to using the contentScript property to add your content script code is that it is difficult to debug. A couple of pointers to make this easier:

• always use 'contentScriptFile', and write your code in a separate js file that is located in your add-on's data folder.

• test your code using Firefox's 'Scratchpad' developer tool, which you can open by going to Tools -> Developer -> ScratchPad. To do this:

  • open the page you're modifying
  • open Scratchpad
  • paste your JS code into Scratchpad
  • go to Execute -> Run to run your code