びっくり！ 簡単！ すぐできるChrome拡張ハンズオン
os0x(Shogo Ohta), 2012-02-22
slide show
Chrome拡張とは
HTML/CSS/JavaScriptで作る、ブラウザをもっと便利にするモノ
作るのはすごく簡単です
Chrome拡張でできること
インターフェースの拡張
- 右上にアイコンを追加(Browser Actions)
- アドレスバーの中にアイコンを追加(Page Actions)
- 検索ボックスの拡張(Omnibox)
- コンテキストメニューの拡張(Context Menus)
- ブックマーク、履歴、新規タブページの拡張(Override Pages)
- デスクトップへの通知
ブラウザの操作
- タブ・ウィンドウの操作
- ブックマーク・履歴の操作
- 拡張、アプリの管理
その他のAPI
- クロスドメイン通信
- バックグラウンドページ
- 任意のサイトでのJavaScriptの実行
- データの永続化
- リクエストヘッダの制御
作ってみよう
まず、manifest.jsonというファイルを作ります
{
"name": "cookpad speech search",
"description": "クックパッドで音声検索できるようにします",
"version": "0.1",
"content_scripts": [
{
"matches": ["http://cookpad.com/*"],
"js": ["content_script.js"],
"run_at": "document_end"
}
]
}
作ってみよう2
続いて、content_script.jsを作ります
var keyword = document.querySelector('#keyword');
keyword.setAttribute('x-webkit-speech', '');
中身はこれだけです
動かしてみよう
拡張機能のページを開く
デベロッパーモードにチェック
パッケージ化されていない拡張機能を読み込む…
先ほどのファイルを保存したフォルダを選択します
デバッグしてみよう
var keyword = document.querySelector('#keyword');
console.log(keyword);
keyword.setAttribute('x-webkit-speech', '');
デベロッパーツールのコンソールに要素が出ます
※.jsファイルなどを修正したときは、「再読み込み」ボタンを押さないと反映されないのでご注意を
デバッグしてみよう2
var keyword = document.querySelector('#keyword');
debugger;
keyword.setAttribute('x-webkit-speech', '');
デベロッパーツールを開いていると、JavaScriptの実行が止まり、ステップ実行できます
background処理を使ったサンプル
Twitterの検索APIを使って、特定のキーワードをAjaxで取ってきてNotificationで取得します。
{
"name": "Tweet Notify",
"description": "特定のキーワードが含まれるTweetをデスクトップに表示します",
"version": "0.1",
"background_page": "background.html",
"icons": {
"48": "Twitter-icon.png"
},
"permissions": [
"notifications",
"http://search.twitter.com/",
"http://twitter.com/"
]
}
<!DOCTYPE html>
<meta charset="utf-8">
<script src="jquery.min.js"></script>
<script>
var CheckTime = 60;
var keyword = 'cookpad.com';
var start = function() {
var api = 'http://search.twitter.com/search.json';
var url = api + '?q=' + encodeURIComponent(keyword);
var main = function() {
$.get(url, function(data) {
if (data && data.results && data.results.length) {
data.results.reverse().forEach(function(item, i) {
var notify = webkitNotifications.createNotification(item.profile_image_url, keyword + 'の検索結果', item.text);
notify.ondisplay = function() {
setTimeout(function() {
notify.cancel();
}, 5 * 1000);
};
notify.show();
});
}
});
};
setInterval(main, 60*1000);
main();
};
start();
</script>
