続・先取り! Google Chrome Extensions

第4回 ベータ版に向けたExtension総復習

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

こんにちは,株式会社ALBERTの太田です。Extensionsが有効になるベータ版のリリースが近づいてきました。そこで今回は,現時点(2009年11月23日)でのExtensionsの作り方をまとめてみます。

Extensionsの開発の下準備

まずは開発環境を整理します。といっても,基本的にHTML/CSS/JavaScriptで作成するので最低限エディタがあればなんとかなります。

ただ,実際に開発/テスト/リリースをする場合には,プロファイルの異なる複数のChromeを起動できると何かと便利です。そういった場合,起動オプションで--user-data-dirを指定することで同時起動ができますUser Data Directory - Custom-Location)⁠

プロファイル ディレクトリの指定

[パス省略]\chrome.exe --user-data-dir="C:\chrome_profile\test1"

このようにして,ディレクトリを分けることで複数のプロファイルで開発・テストが行えます。

また,⁠Chromeではなく)Chromiumの最新のスナップショットも利用すれば異なるバージョンを試すこともできます(今のところ,複数バージョンのChromeを同時にインストールする方法は用意されていないようです)⁠Chromiumのスナップショットにはsnapshots版continuous版があり,continuous版のほうが自動テストを通っていて,最新版のファイルに固定のURLでアクセスできるのでお勧めです。Windowsであれば,mini_installer.exeを実行すればChromiumが最新版に更新されます。バッチでアップデートするようにしておくとよいでしょう。

起動オプションは不要に

Extensionsを開発/利用するのに以前は --enable-extensionというオプションが必要でしたが,現在は不要となっています。そのほかにもデータベース,ストレージ,Cookieの開発ツールを使用するのに以前は --enable-databasesオプションが必要でしたが,⁠2009年11月23日時点のDev版では)デフォルトで有効になっています。

開発関連以外でも,HTML5関連のリモートフォント(--enable-remote-fonts)⁠WebSockets(--enable-web-sockets)⁠WebDatabase(--enable-databases)⁠WebStorage(--enable-local-storage)などは(2009年11月23日時点のdev版では)どれもデフォルトで有効になっており,各オプションを指定する必要はありません(ただし,sessionStorageのみ現在は無効のままとなっています)⁠また,Toolstriptsの廃止に伴い,Extensionsバーを上に表示する --show-extensions-on-topなども廃止予定です。

Extensionsのひな形とmanifest

まず,Extensionsに最低限必要なのはmanifest.jsonというJSONファイルと,HTML/CSS/JavaScriptファイルのどれか1つ以上です。それ以外は,使用するAPIによって必要なファイルが変わり,manifest.jsonの記述内容も同様に変わります。サンプルとしてAPIを一通り使用する場合のmanifest.jsonを見てみます。

全部載せのmanifest.json

{
  "name": "sample",
  "description": "Google Chrome Sample Extension",
  "version": "0.0.0.1",
  "permissions": [
    "http://*/*",
    "https://*/*",
    "tabs"
  ],
  "update_url": "http://example.com/updates.xml",
  "options_page": "options_page.html",
  "background_page": "background.html",
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "icons": {
    "16": "icon16.png",
    "32": "icon32.png",
    "64": "icon64.png",
    "128": "icon128.png"
  },
  "content_scripts": [
    {
      "js": [
        "sample.js"
      ],
      "css": [
        "sample.css"
      ],
      "matches": [
        "http://*/*"
      ]
    }
  ],
  "page_action": {
    "default_icon": "icon16.png",
    "default_title": "Sample",
    "popup": "popup.html"
  }
}

nameとdescriptionはそのままExtensionの名前と説明です。versionはドット区切りの数字で,ドットは3つまでです。数字は左から順に比較され,大きいバージョンと判定されれば新しいバージョンがインストールされます。例えば,1.1.Xは,Xの値がいくつであっても1.2をアップデートすることはできません。またバージョンがまったく同じ場合もアップデートされません。

permissionsは拡張のアクセス権限を決定します。クロスオリジン通信を行う場合はアクセス先のオリジンを,タブ/ウィンドウ関連のAPIを使用する場合にはtabsの指定,動的にContent Scriptsを挿入する場合(executeScriptやinsertCSSなどを使用する場合)には挿入対象となるページのオリジンを指定します。なお,セキュリティ/メンテナンスの問題からchromeで始まるオリジンを指定することはできません(Extensionsギャラリーが公開される予定のchrome.google.comも特別に指定できません。Issue 28228)⁠

update_urlは自動アップデートを行う場合にアップデート情報を書いたXMLのURLを記述します。XMLの中身はUpdate manifestの通りで,appid(拡張のID)とcodebase(crxファイルの場所)にversion(最新のバージョン)を記述します。

options_page,background_page,chrome_url_overridesはそれぞれOptions PageBackground PagesOverride Pagesを使用する場合に記述し,対応するHTMLファイルを用意します。当然ですが,HTMLファイルはCSSやJavaScriptを外部ファイルに分けることができ,jQueryなどのライブラリをそのまま利用できます。

iconsはインストール時や拡張の一覧ページなどで使用されるアイコンを指定できます。サイズは16px,32px,48px,128pxの4つを記述でき(省略も可能です)⁠画像フォーマットはWebKitがサポートするものであれば使用できます。

content_scriptsは読み込まれたページのURLとmatchする条件を指定し,その際に適用するJavaScriptまたはCSSを指定します。条件は複数記述でき,適用するファイルも複数指定可能です。

page_action,browser_actionは,アドレスバー(Omnibox)やその右隣(ツールバー)に表示するアイコンを指定します。page_actionとbrowser_actionはどちらか1つしか指定できません。1つのExtensionは1つのアイコン領域しか持つことができません。そのアイコンには画像を使用しますが,Canvasで描いたImageDataを使用することも可能なので動的に生成することも可能です。popupでアイコンをクリックした際にhtmlを表示することもできます。

manifest.jsonの内容は以上ですが,このほかにもmanifest.jsonに記述しないHTMLファイルをBrowserActionなどから開いて,通常のタブに開いたページと同じように使用することも可能です。popupはすぐに閉じてしまいますので,Twitterクライアントなどはタブで開いたほうがよいかもしれません。

著者プロフィール

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

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

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

コメント

コメントの記入