対象読者
- イベントーページについて知りたい
- バックグランドページとの違いを知りたい
何が書いてある？
- バックグランドページのデメリット
- イベントページについて
常にメモリに常駐するため、重い処理を書き過ぎてしまうとPCに負担がかかってしまいます。
バックグランド処理についてはこちらの記事を参照ください。
【Chrome拡張機能】バックグランドページ
イベントページもバックグランドとやってることは同じです。
バックグランドとの違いは？
一定の時間が経過すると無効になり、メモリを解放します。
必要になった時だけ再起動して有効化。また一定期間が立つとメモリを解放されます。
そのため、バックグランドと違いメモリを常に使い続ける危険はないのがイベントページになります。
イベントページを使うことで、バックグランドページのデメリットである常にメモリを使い続けることを避けることができます。
そのため、一定期間を経つと無効となります。
ブラウザアクションから、バックグランドページ（イベントページ）を呼び出せるようにします。
左下の更新マークを押下時の処理です。
更新時に不要な処理（上のアラート）が動かないように設定しています。
全体的な流れとしては、
- マニフェストファイルに、
バックグランドページ（イベントページ）の宣言と使うファイル（background.js）を指定
ブラウザアクションの宣言と使うファイル（popup.html）を指定 - popup.htmlからブウラザアクションで使うJavaScriptファイル(myscript.js)を指定
- myscript.js側からbackground.jsの処理を呼び出す
manifestファイル
{
"manifest_version":2,
"name":"Chrome ex page action",
"version":"1",
"permissions":["declarativeContent"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": [
"contextMenus",
"tabs"
],
"browser_action": {
"default_popup": "popup.html",
"default_title": "Helloを表示"
}
}background>persistent=false
この部分が、イベントページと宣言している部分になります。
基本的な動きがバックグランドと同じというのはここからも分かるかと思います。
他にもイベントページの特性を理解しやすいようブラウザアクションも挟んでいます。
ブラウザアクションについてはこちら参照。
【Chrome拡張機能】ブラウザアクション
HTMLファイル
<!DOCTYPE html>
<meta charset="UTF-8" />
<html>
<head>
<title></title>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body>
<p id="hello">Hello!</p>
</body>
</html>
JavaScriptファイル（myscript.js）を呼び出しています。
JavaScriptファイル
function hoge () {
alert("バックグラウンドの処理を呼び出しました");
}
chrome.runtime.onInstalled.addListener(piyo);
chrome.runtime.onStartup.addListener(hoge);
function piyo() {
alert("インストール or 更新");
}バックグランドで行う処理を記載しています。
ポイントは2つ。
chrome.runtime.onInstalled.addListener(piyo);
拡張機能がインストールされた時、または更新された時にのみ呼び出される処理です。
更新ボタンをタップするたびに、「インストール or 更新更新」のアラートが上がるようにしてます。
chrome.runtime.onStartup.addListener(hoge);
ブラウザ起動時に呼び出されます。
後述するソースであるmyscript.js側で実行されるタイミングを指定しています。
var bgWindow = chrome.runtime.getBackgroundPage(function( backgroundPage ){
backgroundPage.hoge();
});こちらもポイントは2つ。
chrome.runtime.getBackgroundPage
こちらは、自分で作成したバックグランド処理を取得しています。
今回で言うところの、「background.js」ファイルです。
backgroundPage.hoge();
こちらは、「background.js」ファイル内に記述したメソッドを呼び出しています。
なので、流れとしては以下のようになります。
- 拡張機能がインストールされたタイミングで、バックグランド処理が読み込まれイベントリスナー（ブラウザ起動）を登録する
- 拡張機能として登録したアイコンをタップする（ブラウザアクション処理が動く）
- popup.htmlが読み込まれ、myscript.jsファイルが読み込まれる
- background.jsのhogeメソッドが読み込まれる
今回、chrome.runtimeメソッドが多数出てきましたがなぜこんな回りくどいことをしないといけないのでしょうか？
これは、イベントページが特殊な動きをするためこのように実装するしかないためです。
デメリットと言っていいです。
イベントページを使うにあたって気をつけなければならないポイントにもなります。
バックグランドページ無効化→有効化時の処理
バックグランドページ全体を再読み込みするため、余計な処理が呼ばれないよう注意が必要です。
回避するために、onInstalledメソッドを使い拡張機能がインストールor再読み込みされた時のみ起動するようにしました。
バックグランドページ無効化時の処理
イベントページを使うことで、処理が無効化になることがあります。
そのため、background.jsファイルに記載した内容を、
myscript.jsファイルから呼び出したい時注意が必要です。
無効化されてしまうと、処理が消えてしまうためです。
回避するために、myscript.js側の処理でchrome.runtime.getBackgroundPageメソッドを使うことで
必要に応じてイベントページの関数を読み込むことができるようになります。
ブラウザアクション→バックグランドページへのデータ送受信方法
【Chrome拡張機能】メッセージパッシング（ブラウザアクション→バックグランドページ）
バックグランドページのデメリットであるメモリ問題を解決するのが
イベントページです。
メリットばかりではなく、扱いも難しいためポイントをおさえた上で処理を書かないとバグの元になるので要注意です！
ソースコードはこちら
https://github.com/satoNobu/chrome_ex/tree/event_page
Chrome拡張機能についてはこちらにまとめていますのでよかったら見てください。
【Chromeの拡張機能】開発 まとめ