Google Chrome Extensions App登録の入り口

下記リンクから、下の画像の赤枠のリンクから入ります。
登録料として500円（＄５.00）くらいかかります。

Google Chrome 拡張機能

Google Chrome テーマをオンライン上で作る

Chromeのテーマに関する記事です。

一般的なものでは物足りない感じでしたので、自分でテーマをつくろうとしました。
しかし、オンライン上で作成できるサイトがあったので、そこを紹介します。

→Google Chrome Themes

ここで作ったものをChromeに読み込ませたものが以下です。

以下に作成手順を示します。

１．Sweden Landｓcape Wallpaper - from YUIで２枚の画像を作成する。

作成（and 保存）した画像は以下。

仮に「YUI」とあるほうをback_ground.jpg、何もないほうをframe.jpgとします。

２．Google Chrome Themesで作成する。

リンクページの「Create Chrome Theme Online」をクリックする。

「Start」タブが表示されるので、「Theme Name」を入力する（何でもいいです）。

「Image」タブをクリックし、画像を選択します。
「(1)frame:」には上で作成した「frame.jpg」を、「(4)ntp_background:」には「background.jpg」を選択する。

「Pack」タブを選択し、「Pack and install theme」ボタンをクリックし、テーマをChromeに適応する。

これでうまくいくと思います。

Google Chrome 拡張機能 拡張機能のページのアイコンを表示する

Chromeの拡張機能ページにおいて、表示するアイコンがあっても「どう表示すれば？」と疑問に思った。

調べた結果、以下をmanifest.json内に挿入する。
(アイコンの名称は自分のものに変更してください。)

"icons":{"48":"icon48.png"}

Google Chrome Extension favicon icoの拡張子はダメ

Google Chrome Extensionは右上にアイコン（ファビコン）が出ます。
これを作成していた。

オンライン上でファビコンが作れるところがあったので、作って、設定したら駄目だった。
icoではだめなのか？

Google Chrome Extensions ポップアップ内でリンクを有効にする

著者は簡単な拡張機能を作ってみた。
カレンダー表示である。ただそれだけである。

しかし、ポップアップ表示されたカレンダー内にあるリンクを押下してもページが表示されない問題にぶち当たった。

答えがここにあった。
ポップアップ内でのリンクを有効にする | Chrome Extensions API リファレンス
http://dev.screw-axis.com/doc/chrome_extensions/tips/popup-anchor/

<a href=・・・ target="_blank"></a>とtargetを入れてやればよいのである。

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ファイルをロードしようとしてはダメだ。動かないぜ！）

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

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

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

Google Chrome オプション 個人設定 同期

Google Chrome の拡張機能が同期できると知ってやってみた。

対象：
ホストOS上のChrome
(VMware Player上の)ゲストOS上のChrome

同期できなかった。

明日、別の端末のChromeと同期してみる。

■1/7 追記

別の端末で試みた。
できた！

Chromeを立ち上げたら、右上の拡張機能が増えていくのが、快感だったね。