Firefox アドオン開発 (2) Content ScriptとAddon Scriptの通信

Addon-SDKを利用したアドオン開発の要点は、Addon ScriptとContent Scriptである。
参考:Add-on SDK で始めるアドオン開発(Content Script 編)
Content Scripts - MDN

アドオンのエントリーポイントとなってFirefoxのウィンドウにボタンやメニューを追加したり、追加した要素にアクションを割り当てたりするのがAddon Script。
このAddon ScriptはSDKのAPIにアクセス可能で、要するにFirefox本体と関わる(ローカルから設定ファイルを読み込む、等)もの。
一方で一切個々の開いているWEBページに関わることができない。

逆にContent ScriptはWEBページに埋め込まれるスクリプトと同じ。ページ内の要素を変更したり、ページ内の要素を読んだりはこっちの担当になる。当然自分の割り当てられたページ内だけが守備範囲になる。

  

 

前回から仕様変更があり、指定URLのコピペ機能はパネル(Hello!ってなってるボタンからせり出ているメニュー)からではなくコンテクストメニューから呼び出すようにしたくなった。
なのでパネルにはハイライト機能だけを持たせるわけだが、ボタンを押したらハイライト機能が動くのではなくページの読み込み時に勝手に動くように。また、チェックボックスでどのキーワードが含まれているURLをハイライトさせるかを設定できるようにしたい。

というわけで?、まずはパネルから作っていくことにした。

パネルはHTMLで記述された一つのWEBページになっている。
ということは、パネル内の要素を動的に生成したりチェックボックスからのイベントに応じて何かをするのはContent Scriptの役割。この場合チェックボックスの状態管理はパネルのContent Scriptの仕事。

パネルのContent Scriptはパネル内でしか働けない。チェックボックスの状態に応じてページを書き換えたりする仕事はページのContent Scriptに移譲しなくてはならない。
しかし、Content Script同士は直接通信する仕組みを持っていない。このため、Addon Scriptを経由して通信しなくてはならないのだ。

Addon Script内からその他のコンポーネントに通信するには、

こういう感じにする。直接Addon Scriptからpanelの関数を呼び出すことはできず、Panelにメッセージとオブジェクトを渡すとPanelがメッセージに応じた関数を渡されたオブジェクトを引数として実行するという仕組み。

だから前述したようなパネルとページContent Script同士の通信を行うには、Addon Scriptのpanel.port.onで呼び出される関数内でpage.port.emitをすればよい。

最初に、設定したキーワード群(将来的にはローカルファイルに保存可能、その場で編集も可能にするが最初はスクリプト内に直書き)を読み込み、パネル内にセレクタを動的に生成するところからはじめる。