JavaScriptのメッセージングをカプセル化する

WebExtensionはバックグラウンドスクリプト、コンテンツスクリプト、複数の拡張機能ページなどから構成され、それぞれのスクリプトで寿命や行える処理の内容が異なる。

ページに表示されたUIからバックグラウンドスクリプトでの処理を制御したい場合は、ページのスクリプトのスコープとバックグラウンドスクリプトのスコープとの間でメッセージのやり取りを行うことになる。

メインスレッドで重い処理を行うと、その間はメインスレッドがブロックされてページが反応しなくなる。

解決策として、イベントおよびWeb Workerを用いたマルチスレッド化が考えられる。

1. 重い処理を行うための関数をWeb Worker上で定義する。

code:ts

// メインスレッド

const worker = new Worker('/path/to/worker.js');

worker.postMessage({

type: 'sum',

});

worker.addEventListener('message', (message) => {

console.log(message);

});

code:ts

// ワーカースレッド

// isNumberArray は引数が number[] であるかを調べる関数であるとする。

const globalScope = self as DedicatedWorkerGlobalScope;

globalScope.addEventListener('message', (message) => {

if (message.type === 'sum' && isNumberArray(message.numbers)) {

globalScope.postMessage(message.numbers.reduce((prev, next) => prev + next));

}

});

メインスレッドからは、非同期関数を呼び出すだけで、ワーカースレッド内での処理結果を得られるようにする。

ワーカースレッドからは、何らかのクラスや関数に実際の処理を行うための関数を渡すだけで、メインスレッドからの呼び出しを受けられるようにする。

概念

ClientTerminal

メインスレッド上で初期化する。

ServerTerminal

ワーカースレッド上で初期化する。

code:ts

// メインスレッド

import { ClientTerminal } from '@mgn901/asyncify-events';

const worker = new Worker('/path/to/worker.js');

const { request: sum, terminate } = new ClientTerminal<number[], number>({

channel: 'sum',

// ClientTerminal has an internal listener to respond to message events.

// In the initialization, ClientTerminal passes the following function the listener so that ClientTerminal can respond to message events.

messageListenerAdder: (onMessage) => { worker.addEventListener('message', (e) => { onMessage(e.data); }); },

messageListenerRemover: (onMessage) => { worker.removeEventListener('message', (e) => { onMessage(e.data); }); },

// Pass a function to send messages to the worker thread.

sendMessageFunction: worker.postMessage.bind(worker),

});

(async () => {

const result = await sum(1, 2);

console.log(result); // => 3

})();

code:ts

// ワーカースレッド

import { ServerTerminal } from '@mgn901/asyncify-events';

const globalScope = self as DedicatedWorkerGlobalScope;

const sum = (...numbers: number[]): number => numbers.reduce((prev, next) => prev + next);

const { terminate } = new ServerTerminal<number[], number>({

channel: 'sum',

paramsProcessor: sum,

messageListenerAdder: (onMessage) => { globalScope.addEventLister('message', (e) => { onMessage(e.data); }); },

messageListenerRemover: (onMessage) => { globalScope.removeEventListener('message', (e) => { onMessage(e.data); }); },

sendMessageFunction: globalScope.postMessage.bind(globalScope),

});

既存の関数の処理を別のスコープに移したりWeb Workerに対応させたりするのが簡単になる。

仕組み

SendTerminal

code:ts

// 初期化時のオプション

export interface ISendTerminalOptions<TParams extends any[]> {

channel: string;

sendMessageFunction: (message: IMessage<TParams>) => void;

}

ReceiveTerminal

code:ts

// 初期化時のオプション

export interface IReceiveTerminalOptions<TParams extends any[], TReturns extends any = void> {

channel: string;

paramsProcessor?: (...params: TParams) => TReturns;

messageProcessor?: (message: IMessage<TParams>) => TReturns;

messageListenerAdder: (onMessage: (message: IMessage<TParams>) => void) => void;

messageListenerRemover: (onMessage: (message: IMessage<TParams>) => void) => void;

}

ClientTerminal

ServerTerminal

例えば「ビューから制御されないワーカースレッドの処理の状況をメインスレッドに伝える」などが考えられる。

既存の似たアプローチ

Chrome拡張機能におけるスコープ間通信に対応させる方法もある。