为什么事件不能在 WebExtension 内部使用

Question

先决条件：

• 火狐（最新）
• WebExtension V2 / V3（版本无关）

---

我在 WebExtension 中有几个内容脚本，全部组织在类中。假设我有两个通过事件连接的类

executed

。

FooBar.js

class FooBar extends EventTarget
{
    execute()
    {
        this.dispatchEvent(
            new Event( 'executed' )
        );
    }
}

BarFoo.js

class BarFoo
{
    #message = 'fooBar executed';

    execute()
    {
        const fooBar = new FooBar();
        fooBar.addEventListener( 'executed', this.#fooBar_executed );
        fooBar.execute();
    }

    #fooBar_executed = ( event ) =>
    {
        console.log( this.#message );
    }
}

main.js

( new BarFoo() )
    .execute();

manifest.json

{
    ...,
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [
                "https://example.com/*"
            ],
            "js": [
                "FooBar.js",
                "BarFoo.js",
                "main.js"
            ]
        }
    }
}

事件将按预期发送。但事件处理程序不会被执行。没有异常，没有错误，没有任何事情。但为什么呢？

Answer 1

事情进展缓慢，但他们正在 BugZillas 的……https://bugzilla.mozilla.org/show_bug.cgi?id=1894258

这是我在现实世界基类中当前的解决方法。

'use strict';

class BaseClass
{
    #eventHandlers = {};

    addEventListener( eventType, eventHandler )
    {
        if ( undefined === this.#eventHandlers[ eventType ] )
        {
            this.#eventHandlers[ eventType ] = [
                eventHandler
            ];

            return;
        }

        this.#eventHandlers[ eventType ]
            .push( eventHandler );
    }

    async dispatchEvent( event )
    {
        if ( undefined !== this.#eventHandlers[ event.type ] )
        {
            this.#eventHandlers[ event.type ]
                .forEach(
                    async ( eventHandler ) =>
                    {
                        eventHandler( event );
                    }
                );
        }
    }
}

因此，将来可以轻松删除这些事件处理实现并从

EventTarget

派生基类，而无需更改任何依赖类。