Google Chrome Extensions 開発を試してみる

Extensionsを試してみる。
環境：
VMware(R) Player 3.1.3 build-324285
ubuntu 9.10
Google Chrome 8.0.552.224

参考（というよりそのまま）：http://code.google.com/chrome/extensions/getstarted.html
まぁそのまましたにあるようにやってみよう。

In this section, you'll write an extension that adds a browser action to the toolbar of Google Chrome.
（このセクションであなたは拡張機能を記述し、Google Chromeのツールバーに追加するでしょう）



１．Create a folder somewhere on your computer to contain your extension's code.

（適当に拡張機能開発用のディレクトリを作成しよう。）

$ mkdir -p ~/chrome/helloworld

２．Inside your extension's folder, create a text file called manifest.json, and put this in it:

（１．で作成したディレクトリ内で、manifest.jsonという名のファイルを作成しよう。）

$ cd ~/chrome/helloworld

$ touch manifest.json

$ vim manifest.json

{
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}

３．Copy this icon to the same folder:

（アイコンを１．で作成したディレクトリに保存しよう。右クリックとかで保存できるぞ。）

Download icon.png

http://code.google.com/chrome/extensions/examples/tutorials/getstarted/icon.png

４．Load the extension.

（さあ、拡張機能をロードしてみよう）

a）Bring up the extensions management page by clicking the wrench icon  and choosing Tools > Extensions. (On Mac, use Window > Extensions.)

（拡張機能マネージメントページへ移動しよう。右上にあるアイコンをクリックし、ツール（L）＞拡張機能（E）を選択しよう。）

ｂ）If Developer mode has a + by it, click the + to add developer information to the page. The + changes to a -, and more buttons and information appear.

（開発者モードになる必要がある。拡張機能タブの右上に「＋ディベロッパーモード」とあるから、「＋」をクリックしよう。３つほどボタンが現れるはずだ。表示させよう。このとき、「＋ディベロッパーモード」は「ーディベロッパーモード」になっているぞ。）

ｃ）Click the Load unpacked extension button. A file dialog appears.

（「拡張化されていないパッケージを読み込みます」ボタンをクリックし、ファイルダイアログを表示させよう。）

ｄ）In the file dialog, navigate to your extension's folder and click OK.

（ダイアログ内で、１．で作成したディレクトリへ移動し、「開く」ボタンをクリックしよう。）

５．If your extension is valid, its icon appears next to the address bar, and information about the extension appears in the extensions page, as the following screenshot shows.

（もし成功すれば、アドレスバーにダウンロードしたアイコンが追加され、拡張機能タブ内にアイコンや拡張機能の情報が現れるはずだ。ただ、スクリーンショットはないぞ。）

Add Code to the Extension.

（拡張機能にコードを記述してみよう）

In this step, you'll make your extension do something besides just look good.

（このステップでは、なにか動作する機能を作ろう。）

１．Edit manifest.json to add the following line:

（manifest.jsonに下記のコードを追加しよう。）

$ vim manifest.json

...
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  },
  ...

Inside your extension's folder, create a text file called popup.html, and add the following code to it:

（いつものディレクトリでpopup.htmlファイルを作成し、下記のURI内のコードをコピペしよう）

$ touch popup.html

$ vim popup.html

http://goo.gl/FzuiV

２．Return to the extensions management page, and click the Reload button to load the new version of the extension.

（拡張機能タブへ戻って、「再読み込み」ボタンを押下しよう。）

３．Click the extension's icon. A popup should appear that displays the contents of popup.html.

（「HELLO」の拡張機能アイコンをクリックしよう。popup.htmlのコンテンツがディスプレイに現れるはずだ。）

If you don't see the popup, try the instructions again, following them exactly. Don't try loading an HTML file that isn't in the extension's folder — it won't work!

（もし、popupが現れなかったら・・・もう一度試してみよう。正確にね。１．で作ったディレクトリ以外のHTMLファイルをロードしようとしてはダメだ。動かないぜ！）

どうでしょうか？できましたか？

ブログ著者はできました。

頑張って開発していきましょう。