ブラウザの Ctrl-N ショートカットを変更する

まず、ブラウザでのキー入力処理の基本である KeyboardEvent として通知する方法を試した。

let result = await chrome.scripting.executeScript( {
    target: {
        tabId: activeTab.id
    },
    func: ( event )=>{
       let options = { key: "ArrowDown" };
       let evt = new KeyboardEvent( 'keydown', options );
       document.dispatchEvent( evt );
    }
} );

しかし、これでは KeyboardEvent がクライアントサイドの JavaScript へ通知されなかった。

次に、 options に bubbles: true を追加する。

       let options = { bubbles: true, key: "ArrowDown" };

これによって、クライアントサイドの JavaScript へ keydown イベントが 通知されるようになった(keydown イベントのリスナーがコールされる)が、 KeyboardEvent で通知した所定のキーイベントは textarea などに反映されなかった。

上記の通り KeyboardEvent では意図した動きにならないことが判ったので、 次は web extension 内で全て処理することを考える。

「web extension 内で全て処理する」とはどういうことかというと、 commands リスナ内でフォーカスがある element を調べて、 その element の種類に応じて scroll やカーソルの移動を行なうことを指す。

しかし、これはメンドイし、 標準的な element を使っていないようなケース(例えば monaco エディタなど)は、 対応できない。 何かある度に web extension で対応しなければならないので、現実的ではない。

そこで、web extension では 「commands を検出し、それをクライアントサイドへ通知する」ところまで行ない、 クライアントサイドは、通知された情報をもとに独自の処理を行なう、ことを考える。

ここで、「クライアントサイドへの通知」に postMessage を利用する。

具体的には、 web extension では以下のように処理を行なう。

let result = await chrome.scripting.executeScript( {
    target: {
        tabId: activeTab.id
    },
    func: ( event )=>{
       let options = { type: "exkey", key: "C-n" };
       postMessage( options );
    }
} );

そして、クライアントサイド側で以下のように通知を受けて処理を行なう。

{
  const url = new URL( document.location.href );
  const origin = url.origin;
  addEventListener( "message", (event)=>{
    if ( event.origin == origin && event.data && event.data.type == "exkey" ) {
      let data = event.data;
      if ( data.key == "C-n" ) {
         // C-n の処理
      }
    }
  });
}

こうしておくことで、 web extension 側は変更せずに、 クライアントサイド側で様々なカスタマイズが可能になる。

とはいえ、 web extension がインストールされていることが前提になってしまう。