Firefox Addon SDK: Cannot raise click event on document element
I am writing a Firefox addon using the SDK and I am having issues with trigger click events on page elements.
I am using the SDK module page module as well as jQuery. Eliminating this problem, I have the following:
/* main.js */
var self = require("sdk/self");
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "http://example.com/*",
contentScriptWhen: "ready",
contentScriptFile: [
self.data.url("jquery.js"),
self.data.url("myScript.js"),
]
});
/* myScript.js */
$(document).on('click', '#target', function() {
var buttons = $('button'); // get all buttons on the page
if(buttons.length) {
buttons.each(function() {
$(this).trigger('click');
});
}
});
The problem is that when I click on an element #trigger
on the page, JS does a fine until it hits the following line:
$(this).trigger('click');
Then the following error is thrown:
Permission denied to access property 'length'
jquery-2.1.1.js:4330
So it looks like the addon is unable to send a click event from itself to the page. Any ideas how to solve this?
Edit: For reference, here's a small block of relevant code in the jQuery source:
// Native handler
handle = ontype && cur[ ontype ];
if ( handle && handle.apply && jQuery.acceptData( cur ) ) {
event.result = handle.apply( cur, data ); // line 4330
if ( event.result === false ) {
event.preventDefault();
}
}
source to share
The best solution is always to replace jQuery with pure JavaScript (which is also faster), here's how you can rewrite it myScript.js
for that:
document.getElementById("target").addEventListener('click', function() {
var buttons = document.getElementsByTagName("button"); // get all buttons on the page
if(buttons.length) {
for (var i = buttons.length - 1; i >= 0; i--) {
buttons[i].click();
}
}
});
source to share