Firefox内容脚本中EventTarget失效，Chrome正常，如何合理解决？

问题现象 #

以下代码在Chrome扩展内容脚本中可正常运行：

const myTarget = new EventTarget()
myTarget.addEventListener('test', () => console.log('test1'))
myTarget.dispatchEvent(new Event('test'))

但在Firefox扩展（清单v2，版本128）内容脚本中完全失效。核心原因是：

• Firefox内容脚本中this === globalThis而非window
• globalThis.EventTarget等标准Web API构造函数无法正常工作，但window.EventTarget可正常使用

示例验证代码 #

const { log } = console

log(EventTarget === EventTarget)
log(EventTarget === window['EventTarget'])
log(EventTarget === globalThis['EventTarget'])
log(EventTarget === self['EventTarget'])

const test1 = new EventTarget()
const test2 = new window['EventTarget']()
const test3 = new globalThis['EventTarget']()

test1.addEventListener('test', () => log('test1'))
test2.addEventListener('test', () => log('test2'))
test3.addEventListener('test', () => log('test3'))

test1.dispatchEvent(new Event('test'))
test2.dispatchEvent(new Event('test'))
test3.dispatchEvent(new Event('test'))

Firefox输出

true
false
true
false
test2

Chrome输出

true
true
true
true
test1
test2
test3

兼容解决方案 #

方案1：直接从window调用Web API构造函数 #

直接使用window.EventTarget、window.Event等写法，这种方式在Chrome和Firefox中均可正常运行，无需额外判断：

const myTarget = new window.EventTarget();
myTarget.addEventListener('test', () => console.log('test1'));
myTarget.dispatchEvent(new window.Event('test'));

优势：写法直观，无兼容性风险，无需额外逻辑。

方案2：封装工具函数统一获取有效API #

如果需要使用多个Web API，可封装工具函数优先从window获取，确保拿到的是可用的构造函数：

function getValidWebAPI(apiName) {
  // 优先使用window上的API，避免globalThis上的无效实例
  return window[apiName] ?? globalThis[apiName];
}

// 按需获取API
const EventTarget = getValidWebAPI('EventTarget');
const Event = getValidWebAPI('Event');

// 正常使用
const myTarget = new EventTarget();
myTarget.addEventListener('test', () => console.log('test1'));
myTarget.dispatchEvent(new Event('test'));

优势：扩展性强，适合需要批量使用Web API的场景，代码更整洁。

不推荐的方案 #

• 不要使用delete globalThis['EventTarget']强制回退到window的API：这种操作会修改全局上下文，可能与其他脚本产生冲突，引发未知问题。

内容的提问来源于stack exchange，提问作者shadryck