Create Custom Event and capture event in content script

Add-ons Development
1

Hi All,

I have developed an extension that works across all browser with common javascript (Chrome, Firefox, Edge, Safari, and IE). My problem relates to the Edge browser. I have a web page that creates a custom event. In the extension “content” script, I have an event handler that captures the event. So the web page creates the custom event and dispatches the event, and the event handler is in the content script. Code example…

// Web page
var event = new Event(‘myCoolCustomEvent’);
document.dispatchEvent(event);

// Extension Content script
document.addEventListener(‘myCoolCustomEvent’,
function(e) {
alert(“whoa”)
}, false);

All browsers (primarily FF, Chrome) capture the custom event without issue. Does edge support a custom event from web page to content script? Is there a special premission I have to set within the manifest.

I have tested this in the context of the web page, and the event is captured on the web page. But I want to signal the extension in the content script and it appears that the event is not getting to the content script within Edge.

Is there a permission that I am missing in the manifest?

Thanks,

Tom

2

As Firefox and Chrome confirm, it should work that way. I happened to find this:

This sample will only work on a webpage that uses custom events to communicate with the extension’s content script. The sample folder includes a .html file to test the extension with.

in Edeges documentation, suggesting that MS intends this to work as well.

But your code is straight forward enough (I assume you have ensured that both snippets actually run; Edges error reporting was a joke when I last tried to work with it).

An alternative to communicate with the extension could be a special hidded host element which your page adds child elements to. The extension can detect those changes with a mutation observer (or at least, should be able to).

3

Yes, I could not find anything that says the custom event won’t work. I am starting to believe it could be something in the manifest permissions.

I have run into other litte issues with Edge before, so I expect it may be something simple.

Thanks for your reply

4

After researching, Microsoft provided a solution that appears to work.

let event = new Event(“hello”, {bubbles: true});

Added the “bubbles” parameter appears to work.

5

Huh. That should not make any difference, since you are listening and dispatching on the same element. (Please correct me if I am wrong.)