CODEWITHSUNDEEP
javascriptfirefox-addon
Leslie Wu
Leslie Wu

Reputation: 770

How can I transfer data to firefox extension from web page

I am developing a Firefox extension.
And I have injected some js into web page in extension. These js will execute and transfer data to extension.

For example, I inject

function example(srcElement, action) {
   var event = document.createEvent('Events'); 
   event.initEvent('example', true, true);
   var o = {};
   o.actionName = action;
   srcElement.setUserData('exampleData', o, null);
   srcElement.dispatchEvent(event); 
}

Meanwhile I add a listener of extension side to the document.
Then if function example executes, extension listener will be called and get data and the srcElement.

Question is : Now setUserData is deprecated and there is no method to transfer data and element.
The replacement of setUserData is

Element.dataset

This API can only transfer string.

Then I tried

window.postMessage

This API can transfer array and object but not element.

So how can I transfer element and data both?

Upvotes: 1

Views: 263

Answers (1)

nmaier
nmaier

Reputation: 33192

You could use a CustomEvent, which can carry custom data in the .detail member.

E.g. in the extension you'd:

someWindowOrElement.addEventListener("custom-event-id", function(e) {
  console.log("got event for ", e.originalTarget, "with data", e.detail);
});

And in a website:

var event = new CustomEvent("custom-event-id", {
  "bubbles": true,
  "detail": {
    "some": "data",
    "number": 1
  }
});
elem.dispatchEvent(event);

Or (to be backwards compatible with FX < 11)

var event = document.createEvent(
  "custom-event-id",
  true, // bubbles
  false, // cancelable
  {
    "some": "data",
    "number": 1
  } // detail
});
elem.dispatchEvent(event);

For example, PDF.js uses this to communicate between the unprivileged viewer (website) and privileged extension part.

Upvotes: 2

Related Questions