先取り! Google Chrome Extensions

第2回 Chrome Extensionsの作り方#1

この記事を読むのに必要な時間:およそ 8 分

この記事で取り上げているAPIは現在と使い方が異なっていたり,使用できなくなったものを含んでいます。

特にToolstrips APIは最新のChromeでは使用できなくなっています。詳しくは続・先取り! Google Chrome Extensionsをご覧ください。

前回はChromeのバージョンの違いとExtensionsの導入と概要について説明しました。今回はExtensionsの作り方からドキュメント,開発ツールについて紹介します。なお,今回の解説はChrome 3系をベースとします。4系で変更された部分や機能追加があった部分は適宜補足を入れています。

【2009/9/17追記】本稿の執筆時点ではChrome 3でExtensionsを試すことができましたが,9月16日のChrome 3の正式リリース以降,Chrome 3系統ではExtensionsを有効にすることができないように仕様変更されています。ご了承ください。

最初のExtension

まず始めにHello worldをExtensionで実装してみます。Extensionの最小構成は manifest.json というExtensionの定義ファイルとhtmlファイル1つです。

manifest.json

{
   "name": "Hello World",
   "version": "1.0",
   "toolstrips": ["toolstrip.html"]
}

manifest.json の必須プロパティはnameとversionの2つです。nameは任意の名前を付けることができます。versionは . で区切った数値(1.1.2.12 のように . を3つまで使えるので,数値とは少し違います)である必要があります。

続いて,toolstrips はステータスバーのようなExtensions用の表示領域です。このtoolstripの中身となるHTMLファイルを用意します。

toolstrip.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="toolstrip-button">
    <span>Hello, World!</span>
</div>
</body>
</html>

toolstripには専用のCSSが自動的に挿入されるので,今回はそのスタイルを利用しています。スタイルを変えたい場合は通常のHTMLと同じくCSSで指定できます。

なお,toolstrip はブックマークバーと統合することが検討されていますChromium-extensionsグループでのAaron Boodman氏の発言より)。また,今見ているページに対して何かしらのアクションをするための機能として,PageActionというAPIも存在します(詳細は後述します)。この辺りはまだまだ仕様も実装も固まりきっていないので,今後大きな変更がある可能性もあります。なお,バージョン 4.0.206.1からは,Ctrl+Alt+bでToolstripの表示・非表示の切り替えができるようになっています。

さて,上記の2つのファイルを適当な(ここではCドライブ直下のHelloWorld)というフォルダの中に保存します。

HelloWorld

C:\HelloWorld
   manifest.json
   toolstrip.html

あとはChromeにload-extensionオプションを付けて起動します。

chrome.exe --load-extension=C:\HelloWorld

起動に成功していれば,chrome://extensions/ に読み込まれたExtensionが表示され,ウィンドウの下にToolstripが表示されます。

図1 chrome://extensions/ ページと Hello World Extension

図1 chrome://extensions/ ページと Hello World Extension

なお,dev版の4.0.206.1からは,chrome://extensions/ の Load unpacked extension ボタンからExtensionを読み込むことができるようになっています。

Packaging

Extensionsの作成(Packaging)には,Google Chrome本体を使用します。Chrome 3では本体の起動中にはPackagingができない点に注意が必要です。

Packagingには pack-extension という起動オプションを使用します。さきほどのHelloWorldをパッケージするコマンドは下記の通りです。

chrome.exe --pack-extension=C:\HelloWorld

これでHelloWorld.crxというファイルと,HelloWorld.pemというファイルが出来上がります。なお,crxファイルのファイル名を決めるのはフォルダ名であって,manifest.jsonのnameなどではありません。このcrxファイルが拡張本体で,こちらを配布することになります。pemファイルはプライベートキーファイルで,拡張を更新する際に使用して,同じ拡張のアップデートであることを保証します。なりすましを防ぎ,安全に自動更新(Chrome 4で有効になる予定です)を行うための仕組みですので,pemファイルの扱いには注意が必要です。

pemファイルは下記のようにpack-extension-keyオプションとして指定します。

chrome.exe --pack-extension=C:\HelloWorld --pack-extension-key=HelloWorld.pem

やはり,dev版の4.0.206.1からは,chrome://extensions/ の Pack ExtensionボタンでGUIによるパッケージングを行えます。

最後に --enable-extensions を付けて起動した状態のChromeにcrxファイルをドラッグ&ドロップすればインストールダイアログが出て,Installボタンを押せばextensionがインストールできます。なお,4.0.206.1以降のdev版ではデフォルトでExtensionsが有効になるようになっており,--enable-extensionsに代わって,--diable-extensionsというExtensionsを無効にするオプションが追加されています。

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/

コメント

コメントの記入