ChromeExtensionの作り方第5回は、event pageというものを扱ってみましょう。
ちなみに以前はbackground scriptと呼んでいましたが、バックグラウンド常駐はリソースを消費するのでEvent Pageという名前になりました。
background scriptsとは、常にChromeのバックグラウンドで動くスクリプトです。
タイマーの監視とかに使われます。
今までと同じようにmanifestにbackgroundというフィールドを書き加えます。
Background PageからEvent Pageに変わった今は、persistentパラメータをfalseにするのが普通のようです。
Event Pages
下記例は新しいタブを開くスクリプトです。
[javascript]
{
"manifest_version": 2,
"name": "test",
"description": "新しいタブを開く",
"version": "1.0",
"permissions": ["tabs"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_icon": "icon.png"
}
}
[/javascript]
background.jsはこんな感じで。
今回もタブを扱うのでchrome.tabs APIを使います。
[javascript]
chrome.runtime.onInstalled.addListener(function(details) {
chrome.browserAction.onClicked.addListener(function(tab) {
newurl = 'https://yahoo.co.jp';
chrome.tabs.query({active:true}, function(tab) {
tabno = tab[0].index+1;
chrome.tabs.create({permalink:newurl, index:tabno},function(){});
});
});
});
[/javascript]
一行目でExtensionをインストール時に呼ばれる処理です。
二行目はブラウザアクションのボタンを押した時に呼ばれるリスナーを設定する処理です。
その先は現在アクティブになっているタブの右側に新しいタブを設定する、という処理になっています。
こんな風に見ているページに影響せず、Chromeそのものに拡張させるプログラムがEvent Pageなのです。
なお、デバッグは拡張画面のビューを検証のところをクリックすればウィンドウが開くので、そこでデバッグできます。