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.

Preparation

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

Orlov

Thank you for the answer. I tried it with Scratchpad then successfully the dialog was shown, but when I wrote the code in contentScript, it seems not working. (Dialog not shown.) Your example is correctly worked. – Preparation

Look for JS errors, there may be some indication why your code isn't working. For example, the element you're trying to bind the click event for may not exist right after page loaded because it might have been created by JavaScript. – Orlov

Oops... I didn't find error console until you pointed it out... Anyway, as you said, the composition page seems loaded by JavaScript.. Error console shows following error: TypeError: document.querySelector("#send_top") is null The addon seems not loading mail composition page but index page. Composition page has #_pg=compose anchor in URL. When I delete this anchor, it shows index page and of course there is no element which has #send_top ID there. – Preparation

I created new question because this is a different problem. #10174034 – Preparation

Answer 2

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>

Jagannath