tande lab.

[Chrome] Extensionつくり方 その1 – 基本機能の理解

JavaScript の勉強がてら、Chrome Extension について
dotinstall で勉強してみたので、そのメモ。

何回かに分けて記事化します。

必要となる知識

  • JavaScript (必須)
  • HTML / CSS (必須)
  • jQuery (あれば便利)

参考サイト

Google Chrome拡張の基礎 – ドットインストール
ここで、一連のつくり方を学ぶことができます。無料です。
dotinstall 最高!!

Google Chrome Extensions – Google Code
Google の公式ドキュメントサイト。

基本的な機能

Extension は以下の4機能がメジャーどころ。
動作には必ず "manifest.json" というファイルが必要で、それに設定を記載していく形をとる。
あとは設定したい機能に応じて、必要なファイル (js,html,img画像など)を追加していく。

1. Browser Action

ツールバーに表示されるアイコン(19*19)と連動した機能を設定できる。
常時表示されている。
https://lh4.googleusercontent.com/-yahQRzSy7Uc/T_hckbPOEwI/AAAAAAABFb8/l6pxmqYPgoU/s800/120708-0011-2.png

2. Page Action

特定のページでアドレスバー右端に表示されるアイコン(19*19)と連動した機能を設定できる。
https://lh5.googleusercontent.com/-91ETksCGuIg/T_hck6idlSI/AAAAAAABFcA/6l7C_hwad_s/s800/120708-0011-3.png

3. Context Script

特定のページで自動実行される機能を設定できる。

4. Context Menu

右クリックメニューで表示される機能を設定できる。
https://lh3.googleusercontent.com/-2aJt7WeVglg/T_hb1rTcjHI/AAAAAAABFbs/wGj8OvNMiTo/s800/120708-0013.png

Extension の動作確認

拡張機能のページでデベロッパーモードにチェックすると、
デベロッパー用の表示(赤枠部分)が表示されます。
https://lh5.googleusercontent.com/-caADxED2NAI/T_hjscb7whI/AAAAAAABFcg/mtL6y28iEWU/s800/120707-0010-2.png

"パッケージ化されていない拡張機能を読み込む…" を押して、
https://lh4.googleusercontent.com/-kLeQr7U3wQ0/T_cm-7EBXjI/AAAAAAABE3s/T2aNMO4zA00/s800/120707-0004.png

作業フォルダを指定して読み込むと、
作成途中の Extension の動作をブラウザで確認することができます。
https://lh3.googleusercontent.com/-w8qjqQz1SRo/T_cm_ZFWqgI/AAAAAAABE38/_ISZe5sXyAo/s800/120707-0005-2.png

何かファイルを更新したら "リロード" で更新できます。
Chrome のバージョンが古い場合は少し表示が異なっていて "再読み込み" と表示されているはず。
https://lh5.googleusercontent.com/-n3tLZcFtQis/T_hjtB-kmCI/AAAAAAABFck/Lf5e2qBCkmU/s800/120707-0007-1.png

デバッグツール

Browser Action や Page Action のアイコンを
右クリックして表示される "ポップアップを検証" を選ぶと
コンソールが表示されるので、デバッグ時などに利用できます。
https://lh4.googleusercontent.com/-7iIrmfHHnUo/T_hkerzN0-I/AAAAAAABFc8/sDnB-hVW_S8/s800/120708-0008.png

… って dotinstall のビデオでは説明されてたんですが、
Chrome 最新版 (Ver.20) ではアイコンを右クリックしても
"ポップアップを検証" の表示がなくなってる!

どうするんだろ?

と思ったら、Chrome の仕様が変更になっていたようです。

アイコンをクリックして表示されるポップアップウィンドウを
右クリックするとでてくるリストから "要素を検証" を選ぶと、
コンソールが表示されるようになっていました。
https://lh5.googleusercontent.com/-F3oo9wyRhcQ/T_hX9-0l5cI/AAAAAAABFaw/fMcGK67ow_4/s800/120708-0005-2.png

そんな感じで Chrome Extension についての、基本機能をざっくりと説明でした。
次回に続きます。

2012.8.2 追記

なんか突然信じられない量のブクマがついてビビっています。。。
初心者がメモ代わりに書いている記事なので、何か間違いがあれば優しく教えてください。

その2 はこちらです。
[Chrome] Extensionつくり方 その2 – Browser Action