Extensionsのドキュメント
Chromium
2009年9月前半の時点で,
本稿では公式のドキュメントを参照できるように,
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" と記述する必要があります。
これら以外にも,
Google Chrome の開発ツール
ここで,
このWeb Inspectorは高機能で,
ChromeのWeb Inspectorもほぼ同等の機能を実現できていますが,
Web Inspectorを使用する方法はいくつかあり,
画面左下のShow ConsoleをクリックするとJavaScriptのコンソールが表示され,
また,