Javascript 使用Firefox扩展的属性触发自定义事件

我有一个Firefox扩展，可以修改用户正在查看的页面内容。作为该过程的一部分，扩展需要触发一个自定义事件，该事件由扩展本身添加到页面源中。我在向该自定义事件传递参数时遇到困难。我做错了什么

脚本块插入到页面的

头部

：

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

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

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

扩展名中的代码：

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

事件成功触发，但

e.index

未定义

我在页面上创建了一个元素，然后让事件处理程序找到该元素并读取其属性，从而使它能够正常工作，但它感觉不到优雅。我想在没有元素的情况下完成它

编辑：

我还尝试使用

CustomEvent

触发事件，但它在处理程序中引发异常：

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

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

访问属性“详细信息”的权限被拒绝

您无法跨安全边界访问“expandos”（在本机原型对象上定义的附加属性）。本例中的安全边界位于完全特权的chrome（附加）代码和非特权的网站代码之间

因此，您需要使用“标准”传递数据。

CustomEvent

可以，但是您的代码是错误的。您必须正确调用构造函数或

initCustomEvent（）

：

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

---

另一种选择是。

OP使用

postMessage

解决了他们的问题。对于我们这些确实需要使用

CustomEvent

解决此问题的人（能够指定消息类型非常有用），以下是答案：

Firefox不允许页面脚本访问内容脚本通过

CustomEvent

发送的细节对象中的任何内容，除非您首先使用Firefox特有的

cloneInto（）函数将事件细节克隆到文档中

下面的操作可以将对象从扩展发送到页面：

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

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

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

有关克隆人的详细信息，请参见
cloneInto
 谢谢你的信息。MDN没有提到很多这些警告。我尝试触发CustomEvent，但处理程序引发此异常：访问属性“details”的权限被拒绝。有什么办法吗？我将使用
postMessage
，设法让它正常工作
content.window.postMessage（…）
以及
window.addEventListener（“message”，…）
我以前使用的CustomEvent代码由于这个问题而停止工作。在内容脚本方面，我使用
newcustomevent（'my-event'，{detail:{id:1}}}）
正确初始化。在页面脚本端，ff错误与权限被拒绝错误“id”一起输出：不允许我访问event.detail.id。有什么想法吗？用cloneInto解决了CustomEvent问题，并用该信息做出了新的回答。@CharlBotha for FireFox您不能将对象放入
详细信息中。但是，您可以将对象字符串化。