Chrome Extensionの作り方講座その5・Event Page(Background Script)を使う

Author:
event_pages

ChromeExtensionの作り方第5回は、event pageというものを扱ってみましょう。
ちなみに以前はbackground scriptと呼んでいましたが、バックグラウンド常駐はリソースを消費するのでEvent Pageという名前になりました。

Chrome Extensionの作り方講座その1・用語とか
Chrome Extensionの作り方講座その2・BrowserActionを使ってみる
Chrome Extensionの作り方講座その3・ContentScriptを使ってみる
Chrome Extensionの作り方講座その4・popupとContent Scriptを連携させてみる
Chrome Extensionの作り方講座その6・omniboxを使う
Chrome Extensionの作り方講座その7・bookmark APIを使う

background scriptsとは、常にChromeのバックグラウンドで動くスクリプトです。
タイマーの監視とかに使われます。

今までと同じようにmanifestにbackgroundというフィールドを書き加えます。
Background PageからEvent Pageに変わった今は、persistentパラメータをfalseにするのが普通のようです。

Event Pages

下記例は新しいタブを開くスクリプトです。

{
  "manifest_version": 2,

  "name": "test",
  "description": "新しいタブを開く",
  "version": "1.0",

  "permissions": ["tabs"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_icon": "icon.png"
  }
}

background.jsはこんな感じで。
今回もタブを扱うのでchrome.tabs APIを使います。

chrome.runtime.onInstalled.addListener(function(details) {
    chrome.browserAction.onClicked.addListener(function(tab) {
        newurl = 'http://yahoo.co.jp';
        chrome.tabs.query({active:true}, function(tab) {
            tabno = tab[0].index+1;
            chrome.tabs.create({url:newurl, index:tabno},function(){});
        });
    });
});

一行目でExtensionをインストール時に呼ばれる処理です。
二行目はブラウザアクションのボタンを押した時に呼ばれるリスナーを設定する処理です。
その先は現在アクティブになっているタブの右側に新しいタブを設定する、という処理になっています。

こんな風に見ているページに影響せず、Chromeそのものに拡張させるプログラムがEvent Pageなのです。

なお、デバッグは拡張画面のビューを検証のところをクリックすればウィンドウが開くので、そこでデバッグできます。
back

Chrome Extensionの作り方講座その1・用語とか
Chrome Extensionの作り方講座その2・BrowserActionを使ってみる
Chrome Extensionの作り方講座その3・ContentScriptを使ってみる
Chrome Extensionの作り方講座その4・popupとContent Scriptを連携させてみる
Chrome Extensionの作り方講座その6・omniboxを使う
developer.chrome.com/extensions

Share on Facebook
Pocket