はじめてのchrome extension

はじめてのChrome Extension

2011/10/29BootCamp 2011

Toru Yoshikawa ( @yoshikawa_t )ハッシュタグ #bc2011jp #chr1

自己紹介• 吉川徹（@yoshikawa_t）• 株式会社オープンウェブ・テクノロジー（http://www.openweb.co.jp）

- Web開発案件募集中！

- 一緒にお仕事する仲間も募集中！

• html5j.org、HTML5とか勉強会スタッフ• Webアプリを公開しよう！ Chrome Web Store／Apps入門（http://gihyo.jp/dev/serial/01/chrome-web-store）

http://www.openweb.co.jp




http://gihyo.jp/dev/serial/01/chrome-web-store




アジェンダ• Chrome／Chrome Extensionの概要• Chrome Extensionでできること• Chrome Extensionを作ってみよう• Chrome Extensionをデバッグする• Chrome Extensionを公開しよう

Chrome／Chrome Extensionの

概要

Chromeつかってますか？

• 現在のバージョンは安定版で15• 6週ごとのメジャーアップデートで毎回さまざまな機能が追加されている

• ユーザー数は、全世界で2億人• 急激にシェアを伸ばしていて、 2011年9月現在で23.61%

Chrome Extensionってなに？

•名前の通り、ブラウザを拡張して便利にするもの

• Chrome Web StoreでいろいろなExtensionが公開されている

•もちろん自分で作って自分だけで使っても良し、全世界に公開しても良し

例えば、どんなものがあるの？（1/3）

Sliver Bird（ツイッタークライアント）


Google Mail Checker（メールチェック）


Google Quick Scroll（検索を便利に）

インストールしてみよう

① セキュリティのチェック

② インストール

作るのは簡単

• HTML、CSS、JavaScriptで書ける• HTML5やChrome独自の便利なAPIが用意されている

•標準のデバッグツール（デベロッパーツール）がそのまま使える

作るのは簡単

Webサイト・Webアプリのような感覚で気軽に作れる

Chrome Extensionでできること

どんなことができる？（1/3）

•インターフェースの拡張- 右上にアイコンボタン（Browser Actions）- アドレスバーの右側にアイコンボタン（Page Actions）

- 検索ボックスの入力値を利用（Omnibox）- コンテキストメニューのカスタマイズ（Context Menus）

- ブックマーク、履歴、新しいタブページのカスタマイズ（Override Pages）


•ブラウザの操作- ウィンドウ、タブの操作- ブックマーク、履歴の操作- 拡張機能の管理


•その他- クロスドメイン通信（Cross-Origin XHR）- バックグラウンド動作（Background Pages）

- 閲覧中のページで任意のJavaScriptを実行する（Content Scripts）

- データの永続化

Chrome Extensionを作ってみよう

作ってみよう（その1）•まずは簡単に"Hello, World!"• ブラウザの右上のアイコンをクリックするとポップアップで "Hellow, World!" が表示されるExtensionをつくってみよう

•利用する機能: Browser Actions

"Hello, World!"1.フォルダ作成

2.manifest.jsonファイルを書く（メタ情報）

3.popup.htmlファイルを書く（"Hello, World"を表示）

ファイル構成SampleExtension

manifest.json

icon.pngpopup.html

{ "name": "Sample Extension", "version": "0.1", "browser_action": { "default_popup": "popup.html", "default_icon": "icon.png" }}

manifest.jsonExtensionのメタ情報を記述

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style> p { font-size: 32px; } </style> </head> <body> <p>Hello, World!</p> </body></html>

popup.htmlHTMLで"Hello, Wold"を表示

動かしてみる（1/3）1. Chromeの右上のスパナアイコン＞ツール＞拡張機能

2. デベロッパーモードにチェック

3. 「パッケージ化されていない拡張機能を読み込む...」をクリックして、フォルダを読み込む

4. 右上のアイコンをクリック！＞Hello, World!

動かしてみる（2/3）① デベロッパーモードにチェック

② クリックしてフォルダを読み込む

動かしてみる（3/3）

作ってみよう（その2）

•ポップアップを表示している以外の状態でも何か動かしたい

•ポップアップでタイマーをセットし、時間になったら通知するようにしよう

•利用する機能: Background Pages

タイマー機能をつけてみる1.manifest.jsonファイルを変更する（バックグラウンド動作を追加）

2.background.htmlファイルを書く（時間になったら通知を記述）

3.popup.htmlファイルを変更する（タイマーのセット）

{ "name": "Sample Extension", "version": "0.2", "browser_action": { "default_popup": "popup.html", "default_icon": "icon.png" }, "background_page": "background.html", "permissions": [ "notifications" ]}

manifest.jsonバックグラウンド動作、権限設定

<script> function setTimer(millisecond) { setTimeout(notify, millisecond); }

function notify(){ var popup = webkitNotifications.createNotification('icon.png', 'タイマー', 'Hello, World!'); popup.show(); }</script>

background.htmlデスクトップに通知する

タイマー（秒）:<input type="number" value="3" min="1" step="1" id="second"><input type="button" value="セット" id="start"><script> var second = document.getElementById('second').value | 0, button = document.getElementById('start'); button.addEventListener('click', function(){ // Background PageのWindowオブジェクト取得 var bg = chrome.extension.getBackgroundPage(); bg.setTimer(second * 1000); }, false);</script>

popup.htmlタイマーをセットする

動かしてみる

作ってみよう（おまけ）

•閲覧中のサイトに意味もなく"Hello, World!"を表示したい

•利用する機能: Content Scripts

すべてのサイトにHello, World!を

1.manifest.jsonファイルを変更する（サイトで実行するスクリプトを指定）

2.content_script.jsファイルを書く（サイトで実行するスクリプトを記述）

{ /* 省略 */ "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": ["content_script.js"], "run_at": "document_end" } ]}

manifest.jsonサイトで実行するスクリプト指定

var div = document.createElement('div');div.textContent = 'Hello, World!';div.style.cssText = 'position: absolute; top: 0; left: 0; font-size: 32px; color: red;';document.body.appendChild(div);

content_script.jsHello, Worldを追加

動かしてみる

Chrome Extensionをデバッグする

• デベロッパーツールを使う- HTMLの要素を確認する- 適用されているスタイルやメトリックを確認する- スタイルをリアルタイムに変更して保存する- コンソールからJavaScriptを実行する- JavaScriptをデバッグする- ネットワークやパフォーマンスを測定する

デバッグする（1/4）

デバッグする（2/4）- ページの検証 -

•ページで右クリック＞要素の検証•スパナアイコン＞ツール＞デベロッパーツール

•Mac：command + option + i• Windows：Ctrl + Shift + i


アイコンを右クリック＞ポップアップを検証

- ポップアップの検証 -


拡張機能＞Background Pageをクリック

- バックグラウンドの検証 -

Chrome Extensionを公開しよう

公開してみよう（1/4）•準備するもの- 128x128ピクセルのアイコン- 1280x800ピクセルのスクリーンショット（詳細画面に表示）

- 440x280ピクセルの宣伝用タイル画象（一覧画面に表示）

公開してみよう（2/4）1.フォルダをzipで圧縮

2.Chrome Web Storeの右上にある歯車アイコン＞デベロッパーダッシュボードを表示

3.「新しいアイテム」をクリック

4.必須項目を入力して、プレビュー＞公開

公開してみよう（3/4）•補足・注意事項- 最初の公開には、$5が必要（クレジットカードのみの支払い）、それ以降は無料

- バージョン番号を上げれば、インストール済みのExtensionは、自動アップデート

公開してみよう（4/4）

おわりに★今日紹介した以外にもいろいろな機能があります。また、どんどん追加されているので、是非試してみてください。

★他のChrome Extensionをデバッグで見てみると作り方の参考になります。気になったらチェックしてみましょう。

★開発者コミュニティであるChrome API Developers JP（https://sites.google.com/site/chromeapijp/）に参加して、わからないことはどんどん聞いてみましょう。

★是非とも、あなたの作った素晴らしいChrome Extensionを公開してください！

https://sites.google.com/site/chromeapijp/

https://sites.google.com/site/chromeapijp/

ありがとうございました@yoshikawa_t

参考資料• chrome web store（https://chrome.google.com/）

• Google Chrome Extensions（http://code.google.com/chrome/extensions/index.html）

• Webアプリを公開しよう！ Chrome Web Store／Apps入門（http://gihyo.jp/dev/serial/01/chrome-web-store）

• 先取り！ Google Chrome Extensions（http://gihyo.jp/dev/feature/01/chromeExt）

• 続・先取り！ Google Chrome Extensions（http://gihyo.jp/dev/serial/01/chrome-extensions）

• Chrome Extensions API リファレンス（http://dev.screw-axis.com/doc/chrome_extensions/）

https://chrome.google.com

https://chrome.google.com

http://code.google.com/chrome/extensions/index.html






http://gihyo.jp/dev/feature/01/chromeExt




http://gihyo.jp/dev/serial/01/chrome-extensions




http://dev.screw-axis.com/doc/chrome_extensions/




はじめてのchrome extension

Technology