さくらのレンタルサーバ15周年!ロゴデザインコンテスト
さくらのレンタルサーバ15周年!ロゴデザインコンテスト
2015.06.04

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

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.sendMessagechrome.runtime.onMessageAPIを使ったメッセージ送信のサンプルコードです。

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

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

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

Chrome.* API

拡張機能に提供されているスペシャルなAPI群のことを「Chrome.* API」と呼ばれています。
例えば以下のようなものがあります。

  • chrome.extension.*
  • chrome.browserAction.*
  • chrome.pageAction.*
  • chrome.windows.*
  • chrome.tabs.*
  • chrome.bookmarks.*

APIの一覧は Chrome.* API をご参照ください。