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.

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.

• javascript
• firefox-addon
• firefox-addon-sdk

2 Answers 2

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

Using querySelectorAll then loop through elements:

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