Как я могу перенести данные в расширение Firefox с веб-страницы

Question

Я разрабатываю расширение Firefox.
И я вставил несколько JS в веб-страницу в качестве расширения. Эти файлы будут выполняться и передавать данные в расширение.

Например, я делаю инъекцию

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); 
}

Тем временем я добавляю слушателя стороны расширения к документу.
Затем, если выполняется пример функции, будет вызван слушатель расширения, который получит данные и srcElement.

Вопрос в том, что setUserData устарела, и нет метода для передачи данных и элементов.
Замена setUserData является

Element.dataset

Этот API может только передавать строку.

Потом я попробовал

window.postMessage

Этот API может передавать массив и объект, но не элемент.

Итак, как я могу передать элемент и данные как?

Answer 1

Вы могли бы использовать CustomEvent, которые могут нести пользовательские данные в .detail член.

Например, в расширении вы бы:

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

И на сайте:

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

Или (для обратной совместимости с FX < 11)

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

Например, PDF.js использует это для связи между непривилегированным средством просмотра (веб-сайтом) и привилегированной частью расширения.