Chromeのオリジナル拡張機能を開発しよう（ソースコードあり）

王

2015.06.04

Content-Script と Background-Page

Content-Script

Webページの中に挿入するCSSとJavaScriptのことを「Content Scripts」と呼びます。
セキュリティ上の理由で、この手のJavaScriptは独自の実行環境（isolated world）を持ち、挿入先のWebページのDOMにはアクセスできるんですが、そのページで定義した変数や関数にアクセスすることはできません。

例えば、Webページ側ではjQuery1系を利用していて、Content-Scripts側ではjQuery2系を利用しても衝突することはありません。なぜならこの2種類のスクリプトはそれぞれ「別ワールド」に住んでいるので、お互いに干渉することがないからです。

数多くある「Chrome.* API」の中で、Content-Scriptsは下記の一部のAPIしか利用できない制限があります。
ただし、「backgroundページ」とメッセージのやり取りをすることで「間接的に」利用することは可能です（後述）。

Background-Page

目には見えませんが、常にバックグラウンドで動いてるページです。拡張機能を一元管理する目的で使います。Webページに挿入しないため、「Content Scripts」のようなAPI利用制限はないです。

Event-Page について

Background-Pageの設定で、"persistent": falseにすることで、いわゆる「Event Pages」にすることができます。
Background-Pageとの違いは、「常に動いているわけではない」ところです。必要になったら動き、不必要になったら遊休状態になり、メモリが開放されます。Background-Pageよりエコってことですね！　積極的に使うべし！

{
  "name": "My extension",
  ...
  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },
  ...
}

Content-Script と Background-Page の相互通信

別ワールドにあるContent-ScriptとBackground-Pageですが、メッセージのやり取りで互いにコミュニケーションを取ることができます。

以下、chrome.runtime.sendMessageとchrome.runtime.onMessageAPIを使ったメッセージ送信のサンプルコードです。

// イベントハンドラーをセットする  
chrome.runtime.onMessage.addListener(function (message) {
  console.log(message);
});

// メッセージ送信する
chrome.runtime.sendMessage('YO!');

これで、Content-Script側では使えないAPIをBackground-Pageに委託して、間接的に色んなAPIが使えるようになりますね！