message-exchange-extention

• 別ドメインの親ウインドウからウインドウと双方向メッセージングをするための Chrome 拡張機能
• 以下のような要件を実装しようとした時、アプリの window.opener などでは限界があったため、試しに作成してみた

要件

• 親ウインドウは複数タブを開くことができる
• 親ウインドウ毎に子ウインドウが開いてしまうと混乱を与えるため、子ウインドウは 1 つのみ開くことができる
• 親ウインドウと子ウインドウはデータのやり取りをすることができる
• 親ウインドウまたは子ウインドウをリロードしたとしても、親子関係は途切れないこと

使い方

1. manifest.json と js/const.js に、親と子のアプリの URL を設定する

• ここに設定したアプリにのみそれぞれのスクリプトが読み込まれる

2. Chrome で chrome://extensions/ にアクセスする
3. 「Load unpacked」ボタンから、ファイル群をアップロードする

できること

子ウインドウを開く

• 右クリックメニューまたはブラウザ右上の拡張機能アイコンから Sub ウインドウを開くことができる
  • もし Sub ウインドウが既に開いている場合は、該当タブがアクティブになる

親ウインドウまたは子ウインドウからメッセージ送信

window.postMessage(message, '*'));

親ウインドウまたは子ウインドウでメッセージ受信

window.addEventListener('message', (event) => {
    console.log(event.data);
});