株式会社LIG (リグ) - 台東区上野にあるWeb制作会社

「何が出るかな、何が出るかな・・・」そう言いながら刑罰が書かれたサイコロを振る裁判官。

LIGブログ
Web制作
ウェブサービス
google
Chromeのオリジナル拡張機能を開発し...

2015.06.04 Web制作

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

こんにちは、王です。
今日は、Chromeの拡張機能の作り方をご紹介します。

▼目次

Chromeの拡張機能とは？

Chromeの拡張機能は実質的にはただの圧縮したフォルダです。そして、そのフォルダの中身もただのHTMLやCSS、JSファイルです。
つまり、拡張機能の作り方はWebページのそれとは大差ないということですね。

拡張機能にしか提供されていない豊富なChromeのネイティブのAPI群（Chrome.* API）を利用できるところが拡張の魅力です！
一般公開目的ではなく、普段の業務効率化目的でも十分な利用価値があると思うので、まだの方はぜひ一度触ってみてください。

拡張機能の種類

拡張機能の種類は大きく分けて3つあります。

1つずつ見ていきましょう。

Browser actions

browserAction

ツールバーの右側に小さなアイコンを表示させるタイプの拡張機能です。一番頻繁に見かけるのがこのタイプですよね。

Page actions

pageAction

アドレスバーの中にアイコンを表示させるタイプの拡張機能です。「ページ」によっては表示したりしなかったりするため、「ページアクション」というわけです。RSS系はほぼこのタイプに当たります。

Override Pages

overridePages

このタイプの拡張機能は結構面白くて、Chromeの内部のページを代替することができます。

拡張機能は以下のページを置き換えることができます。

Bookmark Manager
History
New Tab

ただし、拡張1個につき、1つのページしか置き換えられないのです。例えばNew TabとHistoryの両方を1つの拡張で置き換えようとしても、ダメです。

簡単な拡張機能を作ってみよう

今回は一般的によく利用されている「Browser actions」タイプの拡張機能の作り方をご紹介します。

作る拡張機能の概要

ページ内のaタグをチェックして、リンクが設定されていないaタグをハイライト表示し、その数をバッジに出す、というものを作ってみようと思います。

demo

ソースコードはこちらから。

とりあえず、拡張機能をロードしてみる

load_extension

拡張ページで「デベロッパーモード」をチェックして、ソースコードが入っているフォルダを選ぶと、ちゃんと拡張一覧に出てきます。

manifest.json

ソースフォルダの中にはたくさんのファイルがありますが、その中で1つだけ必要不可欠なファイルがあります。それが「manifest.json」というファイルです。

「マニフェスト」は読んで字の如し、拡張機能を定義するためのjsonファイルです。

例えば、拡張機能の作者や名前、アイコン、権限などのメタ情報を定義します。

`manifest.json`のごく簡単な例

{
  "manifest_version": 2,
  "name": "拡張名",
  "description": "拡張の説明文",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["js/jquery.js","js/background.js"]
  }
}

manifest_versionが2になっていることに注目してください。
これはマニフェストファイルのバージョンを示しているメタデータです。執筆時の最新版は2となっています。特別な理由がない限り、常に最新版を利用しましょう。

今回のサンプル拡張でいうと、以下のようになっています。

{
  "manifest_version": 2,
  "name": "Link Checker",
  "description": "This extension detect broken link and blank link.",
  "version": "1.0",
  "icons": {
    "16": "images/icon/icon_16.png",
    "48": "images/icon/icon_48.png",
    "128": "images/icon/icon_128.png"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": false
  },
  "browser_action": {
    "default_icon": {
      "19": "images/icon/icon_19.png",
      "38": "images/icon/icon_38.png"
    },
    "default_title": "Link Checker",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "css": ["css/contents_style.css"],
      "js": ["js/content_scripts/common.js"]
    }
  ],
  "permissions": [
    "tabs",
    "https://*/*",
    "http://*/*",
    "storage"
  ]
}

ちょっと説明しますね！

icons

https://developer.chrome.com/extensions/manifest/icons

Chrome Web Store や chrome://extensions で使われるアプリ（拡張機能）のアイコンです。

background

バックグラウンドで使うJS（後述）です。

browser_action

extension_page

https://developer.chrome.com/extensions/browserAction

今回 browser_actionタイプの拡張機能を作るので、関連設定はここで記述します。

default_icon : ツールバーのアイコン、Retina対応に、38ピクセルのアイコンも用意しておきましょう。
default_title : ツールバーのアイコンにカーソルをかざしてるときのツールチップ。
default_popup : ツールバーのアイコンをクリックしたときに出てくるポップアップ、HTMLファイルです。

Content Scripts

Webページの中に挿入されるJavaScriptやCSS（後述）。
「matches」では、“Content Scripts”が挿入されるページのパターンを指定します（今回の場合は全てのページに挿入するように指定してあります）。

permissions

特定のAPIを使うためにはその権限をユーザからもらう必要があるので、どんな権限がほしいのかをここで記述します。
どんな権限が必要になるかは、各APIのドキュメントを見ればわかります。

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が使えるようになりますね！