如何从网页将数据传输到Firefox扩展

debugcn 发表于 Dev

吴国荣

我正在开发Firefox扩展。
并且我已经将一些js注入扩展中的网页中。这些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可以传输数组和对象，但不能传输元素。

那么我该如何传输元素和数据呢？

nmaier

您可以使用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使用它在非特权查看器（网站）和特权扩展部分之间进行通信。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。