EventTarget не работает в сценарии содержимого Firefox, работает в Chrome

В сценариях содержимого расширений Chrome можно:

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

но в Firefox это не работает, потому что в Firefox this !== window. Вместо этого в Firefox есть this === globalThis, где по какой-то причине некоторые стандартные веб-API, такие как EventTarget в globalThis['EventTarget'], не работают, а window['EventTarget'] работает.

В результате это будет означать возможность использовать различные стандартные веб-API, такие как EventTarget. Мне нужно будет вызывать их через Window как window['EventTarget'], хотя в Chrome они и так отлично работают. В качестве альтернативы удаление EventTarget с помощью delete globalThis['EventTarget'] также приводит к возврату к window['EvenTarget']. Я не думаю, что оба решения приемлемы.

Как мне с этим справиться в здравом уме?

Пример:

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

Версия Firefox: 128 (Последняя)
Версия манифеста Firefox: v2
Версия манифеста Chrome: v3

Это ошибка в Firefox, поэтому любая попытка использовать уязвимый API будет хакерской. Вы можете написать свой собственный генератор событий или использовать существующий, самый простой из них — 10 строк кода.

woxxom 18.07.2024 09:13
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
58
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вывод, как упомянул @woxxom, заключается в том, что это еще одна ошибка десятилетней давности в Firefox, которая так и не была исправлена. Вместо того, чтобы изобретать для этого стандартные веб-API, кодируя их самостоятельно, достаточно:

globalThis['EventTarget'] = window['EventTarget']

или

delete globalThis['EventTarget']

только для Firefox, каким бы неприглядным он ни был.

Другие вопросы по теме