Extensionsのドキュメント

Chromium（Chrome）はChromium Developer Documentationに豊富なドキュメントが存在します。中でも，Design Documents (Chromium Developer Documentation) には技術者向けの設計仕様があり，その中にExtensionsのドキュメントがまとめられています。

2009年9月前半の時点で，Extensionのドキュメントは全面的な改定が行われており，最新のドキュメントは Google Chrome Extensions: Developer Documentation に存在します。このドキュメントはさらに充実しており，常に最新の情報が載っています。Extensionを作り始めて，わからないことがあった場合はまずこちらのドキュメントに当たってみるのが近道といえます。

本稿では公式のドキュメントを参照できるように，ドキュメントで使われている名称はそのまま使用します。

Extensions API

それでは，ExtensionsのAPI仕様を見ていきます。

Content Scripts

Content Scriptsは 対象ページを表示する際に，そのページのコンテキスト上でJavaScriptを実行するAPIです。FirefoxのAdd-onのGreasemonkeyと同じような挙動で，DOMContentLoadedのタイミングで実行，ページ側のwindowオブジェクトに直接触れることはできないといった特徴があります。ただし，このContent Scriptsから直接クロスドメイン通信などを行うことはできません。Content Scriptsは後述のToolstripsやBackground Pagesとメッセージのやり取りをすることができますので，それを介してクロスドメイン通信などを行うことになります。

対象ページと実行するスクリプトの組み合わせは，manifest.jsonファイルで定義します。

www.google.com用のContent Scripts定義サンプル

  "content_scripts": [
    {
      "css": [ "google.css" ],
      "js": [ "google.js" ],
      "run_at": "document_start",
      "matches": [ "http://www.google.com/*" ]
    }
  ]

"run_at": "document_start" はScriptの実行タイミングをdocumentの読み込みを開始したタイミングにするための指定です。より速くスクリプトを実行したい場合に指定します。デフォルト値は"document_end"で，通常は省略します。

Toolstrips

ToolstripsはExtensions用のツールバー領域です。中身はHTML（とCSS,JavaScript）で記述します。ボタンを設置したり，簡単なメッセージを表示することができます。現在はステータスバーのような領域に表示されますが，将来的にはブックマークバーと統合される予定となっています。

Background Pages

Background PagesはChromeの起動中，バックグラウンドでJavaScriptを実行させておくことができるAPIです。manifest.jsonにバックグランドで読み込むHTMLを指定します。

Page Actions

Page Actionsはアドレスバーの中にボタンを表示するAPIで，「⁠今見ているページについて～～する」といった機能を提供することができます。manifest.jsonでアクションを定義し，Background Pagesなどで対応するアクションを実装します。

Page Actions定義サンプル

  "page_actions": [
    {
      "id": "bookmark",
      "name": "このページをブックマークする",
      "icons": ["favicon.png"]
    }
  ]

Cross-Origin XHR

クロスオリジン通信（クロスドメイン通信）を行うAPIです。manifest.jsonで通信を許可するドメインを指定します。

Chrome 3ではこの指定は機能していないため，permissionsを指定してもしなくても Extensionsのhtmlからはクロスドメイン通信を行うことが可能となっています。セキュリティの問題に注意が必要です。

permissions定義のサンプル

  "permissions": [ "http://www.google.com/" ],

Tabs

Chromeのタブを操作するAPIです。Chrome 4 ではpermissionsでtabsと記述されていないと，このAPIを使用することができません。なお，Chrome 3ではtabsを指定することができません。そのため，Chrome 3とChrome 4の両方で動くExtensionを作る場合には注意が必要です。

permissions定義のサンプル

  "permissions": [ "tabs" ],

Windows

Chromeのウィンドウを操作するAPIです。Tabsと同じく，permissionsでtabsと記述されていないとこのAPIを使用することができません。permissions 定義はTabsと共有しています。

Bookmarks

Chromeのブックマークを操作するAPIです。やはり，Chrome 4 ではpermissionsで "bookmarks" と記述する必要があります。

これら以外にも，履歴や，ダウンロードなどにアクセスするAPIも仕様策定が進められています。

Google Chrome の開発ツール

ここで，ChromeのFirebugといえる，Web Inspectorについて解説します。Web InspectorはWebKitに実装されているデバッグツールで，Droseraというツールの後継にあたります。

このWeb Inspectorは高機能で，HTML・CSSの確認と通信状況の確認等のツール，JavaScriptのコンソール，プロファイルにデバッガ，さらにデータベースのViewer機能などが搭載されています。

ChromeのWeb Inspectorもほぼ同等の機能を実現できていますが，2009年8月末時点では，データベース関連の機能，デバッグウィンドウをメインウィンドウに統合する機能などが未実装になっています。

Web Inspectorを使用する方法はいくつかあり，右クリックメニューの「要素の検証」から起動する方法，ウィンドウ右上のページメニューから「開発/管理⁠」⁠→「⁠JavaScriptコンソール（Chrome 4ではDeveloper Tools⁠）⁠」から起動する方法，ショートカットキーのCtrl+Shift+jから起動する方法があります。Ctrl+Shift+jはほかの方法が無効になっていても使用できることがあるので，こちらを覚えておくと便利です。

画面左下のShow ConsoleをクリックするとJavaScriptのコンソールが表示され，スクリプトのデバッグが行えます。Firebugのようにオブジェクトを中身をクリックで追っていくことができるので，開発時は大変重宝します。

また，ExtensionのToolstrip，Background Pagesに指定しているHTMLについては，chrome://extensions/ のページにあるInspectボタンでWeb Inspectorを開くことができます。Toolstripについては，Toolstrip上で右クリックをするだけで起動することもできます（これは開発者向けの機能なので，将来的に異なる動作になる可能性も高いと思われます⁠）⁠。