javascriptfirefox-addonfirefox-addon-sdk

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

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.

Solution

  • 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: