在 Chrome 扩展程序中创建自定义事件的最惯用方式

Most idiomatic way of creating custom events in Chrome extensions

本文关键字：方式 事件 自定义 扩展 Chrome 程序 创建      更新时间：2023-09-26

创建与DOM无关的自定义事件（使用经典chrome.Event界面）并手动存储并触发它的最惯用方法是什么？

我的程序中有一个对象obj，我想在其上创建一些事件对象，例如 obj.event1 和 obj.event2，以便：

obj.event1.addListener(callback);
obj.event2.removeListener(callback);
...

是有效的调用。

我知道自己实现它相当容易，但我想知道是否有更好的方法。谢谢。

个人研究：

  • DOM 事件：为 document 对象创建或从对象创建
  • chrome.events：显示界面而不说明如何创建自定义事件
  • Chrome 事件：它确实显示了如何向现有事件添加规则，但没有介绍如何创建自己的自定义事件。

chrome.Event不能用于自定义事件。

要触发没有库的自定义事件，可以按如下方式使用标准 DOM 事件：

var listener = function(evt) {
    console.log(evt.detail);
};
var target = document.createElement('a'); // Anything that implements EventTarget
target.addEventListener('myEvent', listener);
target.dispatchEvent(new CustomEvent('myEvent', {
    detail: 'test',
}));

如您所见，无需在document上注册所有事件，很可能使用任何实现EventTarget接口的对象。

您可以使用消息传递。即使您尝试从扩展的一部分（例如弹出窗口）触发事件以在另一部分（例如背景页面）中处理，这也将起作用：

无论要接收消息的哪个位置，都要注册一个事件处理程序：

chrome.runtime.onMessage.addListener(message => {
  if (!(event in message)) {
    return;
  }
  if (message.event == "sayHello") {
    console.log("Hello!");
  }
});

然后，可以从扩展的任何其他部分触发处理程序：

chrome.runtime.sendMessage({event: "sayHello"});
相关文章：