Chrome拡張でツールバーからのHTMLページ表示 #JavaScript

Chrome拡張では、しばしばポップアップを用いて情報表示が行われます。これはこれで便利な機能ではありますが、別のウィンドウにフォーカスを合わせてしまうとポップアップが消えてしまったりして、場合によっては少々使い勝手が悪くなってしまう場合があることは否めません。なので、ここではChrome拡張で通常ポップアップを表示する処理を少し変更して、新しいタブを生成して普通にHTMLページを表示させるようにしてみます。この時、WWW上にあるHTMLページを表示させてもよいのですが、Chrome拡張に同梱したHTMLページを表示させるようにしてみます。

まず、Chrome拡張の中にHTMLファイルを同梱しておけば、Chromeにてそのページを表示することができます。
以下のURLをアドレスバーに入力すれば、同梱したHTMLファイルを表示させることができます。

chrome-extension://<Chrome拡張のID>/<HTMLファイル名>

もちろんHTMLだけではなくCSSや画像ファイルなどを入れておくことも可能です。ライセンスがクリアならば、jQueryなどのライブラリを同梱しておくことも出来るでしょう。

とはいえ、このURLを毎回入力するのもなかなか大変です。Chrome拡張のインストール時に、ブックマークに登録するようにしておくのもいいかもしれません。冒頭に述べた通り、今回は通常ポップアップを表示するのに用いられる事の多い、ツールバー上のアイコンを利用することにします。ツールバー上にアイコンを表示させる方法は、Chrome拡張のBrowser Actionのページに詳しく書かれています。manifest.jsonに以下のように書くことにより、ツールバーにアイコンが表示されるようになります。

manifest.json

"browser_action": {
  "default_icon": {
    "19": "icon_small.png", 
    "38": "icon_big.png"
  }
}

このアイコンを押した際にポップアップメニューが表示されるようにするだけならば、manifest.jsonに"default_popup": "popup.html" と書くだけで済みます。しかし、今回はポップアップを表示したいのではなく、新しいタブでChrome拡張中のHTMLファイルを表示させることが目的です。この為には、アイコンをクリックした際に新しいタブでHTMLファイルを表示するようにイベントを登録する必要があります。

イベントの登録には、Event Pagesを利用します。Event Pagesは、Chrome拡張がロードされている間に実行したいスクリプトを書いておくことができます。Event Pagesを利用する為に、manifest.jsonに次のように書き加えます。

manifest.json

"background": {
  "scripts": [ "icon_clicked.js" ], 
  "persistent": false
}

続いて、アイコンをクリックした時にHTMLページを表示させるイベントを登録します。icon_clicked.jsというJavascriptのファイルを作成し、以下のように書きます。

icon_clicked.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.create({"url": "newtab.html" });
});

これで、アイコンをクリックした際に新しいタブを開き、Chrome拡張の中に一緒に入れておいたnewtab.htmlという名前のHTMLファイルを表示させることができるようになりました。