素敵なjavascript ～google chrome編～
DESCRIPTION
TRANSCRIPT
素敵な javascriptGoogle Chrome 編
Hisatoshi Kikumoto
Google Chrome とは？ Google Chrome （グーグル・クローム）とは、 WebKit レンダリングエンジン・ア
プリケーションフレームワークをベースに Google が開発しているウェブブラウザです。
とにかく速くて軽いです！！ 現在安定版で 4.0 がリリースされています (Windows 版のみ）
4.0 のリリースにより以下の機能に対応になりました
ブックマーク同期機能
エクステンション正式対応！！
エクステンションについてはギャラリーにすでに 1500 以上も登録されています。
https://chrome.google.com/extensions
上記意外にも javascript の高速化や HTML5 API である Local Storage 、 DatabaseAPI 、 WebSockets にも対応しました
ショートカットを覚えよう
使うときにはショートカットを覚えよう
Ctrl ＋ Tab
Ctrl ＋ Shift ＋ Tab
Ctrl ＋ 1 ～ 8
タブの切替
F6 または Ctrl ＋ L アドレスバーにフォーカス
キーワードを入力して Ctrl ＋Enter
キーワードの前後に「 www. 」と「 .com 」を追加してウェブアドレスとして開く
アドレスを入力して Alt ＋Enter
新しいタブでそのアドレスを開く
Shift ＋ Escape タスクマネージャを表示
後は他のブラウザとだいたい同じ
ショートカットが足りない Firefox の vimperator みたいな chrome エクステンション「 smooziee 」を入れよう
http://code.google.com/p/vimlike-smooziee/
ｊ、 k 、 h 、 l スクロール
gg 、 G トップ、エンドへスクロール
H,L 戻る、進む
d タブを閉じる
u 閉じたタブを復元
r リロード
f リンク表示
便利なエクステンション
便利なエクステンション
Hatena Bookmark
Chrome IE Tab
Chromeleon User-Agent Spoofer (User-Agent switcher ）
nkGestures 右クリックのジェスチャーでページ操作
Bubble Translate 翻訳
Google Preview 検索結果のプレビュー
Gracemonkey はネイティブで対応しています
開発者用の便利な機能
Firebug 以上の開発者用機能が最初からついてます
ディベロッパーツール Ctrl + Shit + I
HTML 、 CSS 解析
リソース解析
script デバッグ
その他 HTML API の Local Storage やデータベースを確認が可能に！
エクステンションを作ろう（エクステンションで使える技術） エクステンションを作る上でまず使える API 群を把握しよう
通常の JavaScript と DOM API
XML HttpRequest
WebKit API ( アニメーションや変形処理などで使われます）
V8 API(JSON 用 ) ECMA5 では正式に採用されていますが、 chrome は ECMA 3 ベースとなっているので
HTML5 API
Chrome API
JQuery とかを使いたい場合はエクステンションにバンドルしましょう
エクステンションを作ろう（エクステンションの作り方） Hello World を作ってみる
用意するファイル
manifest.json ( 定義ファイル )
アイコン
ポップアップ用 HTML
デモ実施
エクステンションを作ろう (Chrome API 一部紹介 ) Browser Actions
ツールバーへのボタン表示およびボタンアクションを定義出来る API です。
tooltip 、 popup 、 badge を作成することができます
エクステンションを作ろう (Chrome API 一部紹介 ) Background Pages
起動時に実行しておける API で、初期化処理の実行や Browser Action で使用するアクションをまとめておくことができます。
{ "background_page": "background.html“ ・ ・}
エクステンションを作ろう (Chrome API 一部紹介 ) Content Scripts
対象ページを表示する際に実行するスクリプトを定義する API です。
いわゆる Gracemonkey みたいなものです
"content_scripts": [ { "css": [ "google.css" ], "js": [ "google.js" ], "run_at": "document_start", "matches": [ "http://www.google.com/*" ] } ]
エクステンションを作ろう (Chrome API 一部紹介 ) Event
ブラウザイベントへのリスナー定義を行う API です
chrome.tabs.onCreated.addListener(function(tab) { appendToLog('tabs.onCreated --' + ' window: ' + tab.windowId + ' tab: ' + tab.id + ' index: ' + tab.index + ' url: ' + tab.url);});
エクステンションを作ろう (Chrome API 一部紹介 ) Tabs 、 Windows
タブやウインドウをコントロールする API です
操作する場合は manifest.json に permission の設定が必要となります
{ "name": "My extension", ... "permissions": [ "tabs" ], ... }
エクステンションを作ろう ( ソースのありか )
エクステンションはパッケージすると .crx ファイルになりますが解凍方法が分からないのでソースはどうやって見ればいいのかなと思い探してみました
インストール後に以下のパスにソースが展開されているのでそこを見ればいいようです
C:\Documents and Settings\[ ユーザー名 ]\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions\
このようにChrome のエクステンションは Firefox に比べて
圧倒的に簡単で分かりやすいのでぜひ活用ください！
Let’s Enjoy Google Chrome !!