Triggering a custom event with attributes from a Firefox extension

Question

I have a Firefox extension that modifies the content of the page that the user is looking at. As part of that process the extension needs to trigger a custom event that the extension itself adds to the page source. I am having difficulties passing parameters to that custom event. What am I doing wrong?

Script block inserted into the head of the page:

document.addEventListener("show-my-overlay", EX_ShowOverlay, false, false, true);

function EX_ShowOverlay(e) {
    alert('Parameter: ' + e.index);
    // ...
}

Code in the extension:

var event = content.document.createEvent("Events");
event.initEvent("show-my-overlay", true, true);
event['index'] = 123;
content.document.dispatchEvent(event);

The event gets triggered successfully, but e.index is undefined.

I managed to get it working by creating an element on the page and then having the event handler find the element and read its attributes, but it didn't feel elegant. I want to do it without the element.

EDIT:

I also tried triggering the event with CustomEvent, but it throws an exception in the handler:

var event = new CustomEvent('show-my-overlay', { detail: { index: 123 } });
content.document.dispatchEvent(event);

function EX_ShowOverlay(e) {
    alert('Parameter: ' + e.detail.index);
    // ...
}

Permission denied to access property 'detail'

Answer 1

You cannot access "expandos" (additional properties defined on a native prototype object) across security boundaries. The security boundary in this case being between the fully privileged chrome (add-on) code and the non-privileged website code.

So you need to pass data using something "standard". The CustomEvent stuff would do, however your code is wrong. You have to call the constructor or initCustomEvent() correctly:

var event = new CustomEvent('show-my-overlay', { detail: { index: 123 } });
content.document.dispatchEvent(event);

Another alternative is the postMessage API.