はじめてのchrome extension
Post on 05-Nov-2014
12.225 Views
Preview:
DESCRIPTION
TRANSCRIPT
はじめての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)
アジェンダ• 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(ツイッタークライアント)
例えば、どんなものがあるの?(2/3)
Google Mail Checker(メールチェック)
例えば、どんなものがあるの?(3/3)
Google Quick Scroll(検索を便利に)
インストールしてみよう
① セキュリティのチェック
② インストール
作るのは簡単
• HTML、CSS、JavaScriptで書ける• HTML5やChrome独自の便利なAPIが用意されている
•標準のデバッグツール(デベロッパーツール)がそのまま使える
作るのは簡単
Webサイト・Webアプリのような感覚で気軽に作れる
Chrome Extensionでできること
どんなことができる?(1/3)
•インターフェースの拡張- 右上にアイコンボタン(Browser Actions)- アドレスバーの右側にアイコンボタン(Page Actions)
- 検索ボックスの入力値を利用(Omnibox)- コンテキストメニューのカスタマイズ(Context Menus)
- ブックマーク、履歴、新しいタブページのカスタマイズ(Override Pages)
どんなことができる?(2/3)
•ブラウザの操作- ウィンドウ、タブの操作- ブックマーク、履歴の操作- 拡張機能の管理
どんなことができる?(3/3)
•その他- クロスドメイン通信(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バックグラウンド動作、権限設定
<!-- HTML省略 --><script> function setTimer(millisecond) { setTimeout(notify, millisecond); }
function notify(){ var popup = webkitNotifications.createNotification('icon.png', 'タイマー', 'Hello, World!'); popup.show(); }</script>
background.htmlデスクトップに通知する
<!-- 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
デバッグする(3/4)
アイコンを右クリック>ポップアップを検証
- ポップアップの検証 -
デバッグする(4/4)
拡張機能>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を公開してください!
ありがとうございました@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/)
top related