Chrome Extension meets HTML5

Chrome拡張とHTML5の蜜月

自己紹介

名前：

太田 昌吾

ID：

os0x(blog, Twitter)

肩書？：

Chrome ExtensionsのAPI Expertで、Chromium-Extensions-Japanグループの管理人

お仕事：

今年に入ってからお休み中…
Chrome拡張について記事を書いたり、JavaScriptの記事を書いたりしています

2010/3/25にGoogle Chrome OS 最新技術と戦略を完全ガイド: 小池良次, 中島聡, 伊藤千光, 太田昌吾, まえだひさこ, 向井領治が発売されます！

得意分野：

ほぼJavaScript専門、なかでもクロスブラウザや高速化が得意です

簡単な経歴：

元々、OperaのUserJavaScriptやGreasemonkeyを良く書いていた(oAutoPagerizeとか)
ChromeでもUserScriptsが動くらしい→拡張もできる(ようになる)らしい→UserJavaScriptより色々できて楽しい！→拡張作ったり、記事を書いていたらgihyo.jpで連載をすることに→そのまま勢いでAPI Expertに

Google Chromeとは、Chrome拡張とは

Chromium

レンダリングエンジンにWebKitを、JavaScriptエンジンにV8を採用したオープンソースのウェブブラウザ

Google Chrome

ChromiumをGoogleがカスタムして公開しているブラウザ

Chrome拡張

Chrome/Chromium上で動く、ウェブブラウザに特定の機能を追加するアプリケーション

Chrome vs Chromium

	Google Chrome	Chromium	補足
ロゴ
開発者	Googler	誰でも(多くはGoogler)
障害報告	あり(ONにした場合)	なし
利用統計	あり(ONにした場合)	なし
HTML5のVideo、Audio	H.264、AAC、MP3、Vorbis、Theora	デフォルトではVorbisとTheoraのみ	FFmpegを使用しているので、自己責任においてこれを差し替えれば対応フォーマットを変えることができる
ページ翻訳機能	あり	なし	※日本語圏での評判はいまひとつ
サンドボックス(セキュリティ機構)	常にON	場合によってはOFFになっていることも	非公式なパッケージなどは要注意
品質保証	事前にテストされてからリリースされる	Nightly Buildsのみ

Chromiumの特徴

オープンソースなので、すべてのソースが読める。カスタムしてビルドを作れる。

オープンソースコミュニティのパワーで、日々開発が進んでいる。また、Chromiumのカスタム版が数多く存在する。

今すぐ開発に参加できる chromium - Project Hosting on Google Codeへ！

Chromeの特徴

stable(安定版)、beta(テスト版)、dev(開発版)の3つのリリースがある

安定版は名前の通り、一般ユーザーが使用するリリース、(セキュリティフィックスを除いて)半年に1回程度のリリース

テスト版は、主に安定版のリリース前に、安定化のためにリリースされる、時期によってはまったくリリースされないが、1ヶ月に1回程度のリリース

開発版は、安定版のリリース後、次のバージョンに向けた新機能追加を主目的(そのため不安定になることも多々)にリリースされる、1週間に1回程度のリリース
※開発版もリリース前は安定する。修正が多く適用されている分だけテスト版より安定することも。

Chromeの構成

JavaScriptエンジンはV8というChromeのために開発したオープンソースのエンジンを搭載

レンダリングエンジンはWebKitのWebCoreを採用

WebCoreは、WebKitのレンダリング周りの実装(JavaScript部分はJavaScriptCore)

実は、V8とWebCoreを繋ぐ部分にバグが多い…(Safariでは正常なのに、Chromeだとなんかおかしくなるなぁという現象はここに起因することがほとんど)

最近はChromiumチームが積極的にWebKitにコミットするようになっていて、かなり改善しつつある

Chrome拡張とは

HTML/CSS/JavaScriptで作る、ブラウザをもっと便利にするモノ

とにかく作るのは簡単、でも制約は多い

Chrome拡張の例

実物を見てもらうのが一番

Google Mail Checker - Google Chrome 拡張機能ギャラリー

Chrome Stylist - Google Chrome 拡張機能ギャラリー

Hatena Bookmark GoogleChrome extension - Google Chrome 拡張機能ギャラリー

Chrome拡張でできること

• バックグラウンド処理
• クロスドメイン通信(XMLHttpRequest Level 2とCross-Origin Resource Sharing)
• データの永続化(Web Storage、Web SQL Database、Indexed Database API)
  ※Indexed Database APIが使えるようになるのはまだ先ですが
• デスクトップへの通知(Web Notifications)
• タブ・ウィンドウの操作(新規タブを開いたり、閉じたり、選択を変えたり)
• ブックマークの操作
• UIパーツの追加(ただし、アイコンを追加するのみ)
• ポップアップの表示
• 表示したページでJavaScriptを実行
• 国際化
• などなど(拡張のAPIは本当にこれだけ)

APIはまだまだ少ないが、バックグラウンド処理、クロスドメイン通信、データの永続化をベースに、可能性は無限

Chrome拡張のセキュリティ

拡張コンテキスト、コンテントコンテキスト、ページコンテキストの3つのコンテキストが存在し、それぞれは完全に分かれているので、お互いが干渉してしまうことはない。さらに、拡張同士も独立したコンテキストで実行される。

拡張コンテキストはタブ操作やクロスドメイン通信などの特権を実行でき、コンテントコンテキストと通信したり、スクリプトを実行したりといったことができます。

コンテントコンテキスト(ContentScripts)は特権を持っていませんが、読み込んだページのDOMを操作することができ、拡張コンテキストと相互に通信できます。

ページコンテキストは通常のウェブページで実行されるコンテキストで、コンテントコンテキストとはDOM経由でしかやり取りできませんし、拡張コンテキストとは完全に分断されています

「悪意のあるページで拡張の特権を利用されてしまう」といったことが起こりにくい仕様になっているが、開発者から見ると面倒に感じる部分も…

manifest.json

拡張を定義するjsonファイル。名前、バージョンのほか、アイコンや拡張の持つ権限、ContentScriptsを実行するURLの定義など。

manifest.jsonで宣言していない機能は使用できない。

セキュリティを高めつつ、機械的にその拡張の権限を判断して、インストールするユーザーに警告を出すことができる。

Chrome拡張で使えるHTML5

ChromeのHTML5対応：関連API

canvas

対応済み

video, audio

対応済み(対応フォーマットは前述の通り)

Web Workers

対応済み

Web Storage

Chrome4ではlocalStorageのみ対応、Chrome5でsessionStorageも対応予定

コミュニケーションAPI

対応済み(ただし、Chrome4ではテキストのみの送受信)

Web Sockets

対応済み(ただし、WokerからのSocketsはChrome5で対応予定)

HTML Ruby

対応済み

Web Fonts

対応済み

Web SQL Database

対応済み(残念ながら標準化はストップしてしまいましたが…)

Desktop notifications

Chrome5で正式対応予定

HTML Forms

一部のみ対応、Chrome5ではAPIを実装、バリデーションやUIはChrome6以降

Application Cache

Chrome5で対応予定

Geolocation API

Chrome5で対応予定

Drag & drop

一部実装されているが、Chrome5で完全に対応する予定

File API

Chrome5で対応予定

Indexed Database API

Chrome6で対応予定、2010/3/11に動作したとの第一報あり

最新の情報は、Web Platform Status (The Chromium Projects)にまとまっています

ChromeのHTML5対応：HTMLパーサー

<p>第1パラグラフ
<section>セクション</section>
<p>第2パラグラフ

わざとらしい例ですが、パーサーがsectionに対応しているか否かで、下記のように解釈が変わります。

	Chrome	Firefox
section要素未対応	Chrome4	Firefox3.6
section要素対応	Chrome5	Firefox3.6(html5.enable)

Chrome拡張からHTML5へ

元々、Chrome拡張のAPIの仕様だったDesktop Notificationsが、2010年1月にW3C Editor's Draftとして(Web Notifications)公開されました。

このように、Chrome拡張は各種APIがHTML5をベースとしており、同時に、Chrome拡張からHTML5にフィードバックする、という相互作用の関係があります

HTML5を使いたい！という方は、是非Chrome拡張を！！

Chrome拡張の作り方

Twitterのハッシュタグなどの検索結果をNotifications APIで表示してみます

まず、manifest.jsonと各ファイルを用意します。

manifest.json

日本語はそのまま記述できるが、文字コードはUTF-8(BOMなし)にする必要がある。

{
  "name": "Hash Tweet",
  "description": "特定のhashtagが含まれるTweetをデスクトップに表示します",
  "version": "0.0.4",
  "background_page": "background.html",
  "browser_action": {
    "default_title": "Show Notification",
    "default_icon": "Twitter-icon.png",
    "popup": "popup.html"
  },
  "icons": {
    "48": "Twitter-icon.png"
  },
  "permissions": [
    "notifications",
    "http://*.twitter.com/",
    "http://twitter.com/"
  ]
}

background.html

Twitterのtokenの取得、ハッシュタグを検索して結果をNotifications APIで表示させるなど、メイン処理を行う

var keyword = localStorage.keyword;
var twitter_token;
var CheckTime = 60;
var notifies = {};
var tweets = {};
var timer;
init(keyword);
function init(tag){
	localStorage.keyword = keyword = tag;
	if (twitter_token) {
		clearTimeout(timer);
		Object.keys(notifies).forEach(function(id){
			var note = notifies[id];
			note.cancel();
		});
		start();
	} else {
		xhr('http://twitter.com/', function(res){
			var text = res.responseText;
			var handler = function(){
				window.parent.postMessage(document.getElementById("authenticity_token").value,"*");
			};
			window.onmessage = function(evt){
				delete window.onmessage;
				document.body.removeChild(frame);
				twitter_token = evt.data;
				if (keyword) {
					start();
				}
			};
			var frame = document.createElement('iframe');
			frame.src = 'data:text/html,<html><script>window.onload = ' + handler + ';<\/script>' +
			      text.replace(/<script(?:[ \t\r\n][^>]*)?>[\S\s]*?<\/script[ \t\r\n]*>|<\/?(?:i?frame|html|script|object)(?:[ \t\r\n][^<>]*)?>/gi, ' ');
			document.body.appendChild(frame);
		});
	}
}
function xhr(url, callback, error){
	var xhr = new XMLHttpRequest();
	xhr.open('GET', url, false);
	xhr.onload = function(){callback(xhr);};
	xhr.onerror = function(){
		console.error(xhr);
		if (error) error();
	};
	xhr.send();
}
function restart(){
	chrome.browserAction.setBadgeText({text:'!'});
	setTimeout(function(){
		start();
	}, 60 * 1000);
}
function start(){
	var token = '&authenticity_token=' + twitter_token;
	var api = 'http://integratedsearch.twitter.com/search.html';
	var url = api + '?q=' + encodeURIComponent(keyword) + '&rpp=20&refresh=true' + token;
	main(url);
	function main(url){
		xhr(url, function(res){
			var text = res.responseText, data;
			try {
				data = JSON.parse(text);
			} catch (e) {
				console.error(e);
				restart();
				return;
			}
			if (data.results && data.results.length) {
				data.results.reverse().forEach(function(item, i){
					tweets[item.id] = item;
					var url = 'chrome-extension://' + location.host + '/note.html#'+item.id;
					var notify = webkitNotifications.createHTMLNotification(url);
					notify.onclose = function(){
						delete notifies[item.id];
						delete tweets[item.id];
					}
					notify.show();
					notifies[item.id] = notify;
				});
				chrome.browserAction.setTitle({title:String(data.results.length) + ' tweet(s)!'});
			} else {
				chrome.browserAction.setTitle({title:'no tweet..'});
			}
			/*
			setTimeout(function(){
				Object.keys(notifies).forEach(function(id, i, a){
					var note = notifies[id];
					setTimeout(function(){note && note.cancel();}, (i * CheckTime / a.length) * 900);
				});
			}, CheckTime/6 * 1000);
			*/
			var count = 0;
			(function loop(){
				timer = setTimeout(function(){
					if (++count > CheckTime) {
						main(api + data.refresh_url + '&refresh=true' + token);
					} else {
						chrome.browserAction.setBadgeText({text:String(CheckTime-count)});
						loop();
					}
				}, 1000);
			})();
		},function(){
			restart();
		});
	}
}
chrome.extension.onRequest.addListener(function(message, sender, sendResponse){
	sendResponse(tweets[message.id]);
});

popup.html

任意のハッシュタグを入力するインターフェースとして使用

<!doctype html>
<html>
<style>
body{
margin: 0px;
padding: 0px;
}
body > div{
padding:7px;
}
body > div > input{
width:100px;
}
</style>
<div><input type="text" value="" placeholder="keyword" id="keyword"></div>
<script>
var BG = chrome.extension.getBackgroundPage();
var keyword = document.getElementById('keyword');
keyword.addEventListener('change',function(){
	BG.init(this.value);
});
if (BG.keyword) {
	keyword.value = BG.keyword;
}
</script>
</html>

note.html

Notifications APIで表示される小窓用のHTML

<!doctype html>
<html>
<style>
body{
font-family:sans-serif;
color:#333;
}
a{
color:#003366;
text-decoration:none;
}
#prof{
float:left;
max-width:48px;
min-width:48px;
}
</style>
<a id="user" target="_blank"><img id="prof"></a>
<a id="tweet" target="_blank"></a>
<script>
chrome.extension.sendRequest({id:location.hash.slice(1)}, function(item){
	document.querySelector('#user').href = 'http://twitter.com/' + item.from_user;
	document.querySelector('#prof').src = item.profile_image_url;
	var tweet = document.querySelector('#tweet');
	tweet.href = 'http://twitter.com/' + item.from_user + '/status/' + item.id;
	tweet.textContent = item.text;
});
</script>
</html>

Twitter-icon.png

Twitterのアイコン

以上のファイルを1つのフォルダに置き、拡張機能ページで「デベロッパーモード」選択し、パッケージ化されてない拡張の読み込みを行います

追記(2010/03/18 18:43)：Chrome5以降の方は、TweetNotifyから実際にインストールできるようにしました(まだ作りこみが甘いので、長時間使用しているとメモリを消費するのでご注意ください…)

Appendix

Chrome Extensionsの参考URL

• Google Chrome Extensions - Google Code：公式ドキュメント
• Chrome Extensions API リファレンス：非公式日本語訳(@nao58)
• Chromium-extensions | Google グループ：公式Extension開発者フォーラム(英語)
• Chromium-Extensions-Japan | Google グループ：準公式Extension開発者フォーラム(日本語)
• [chrome] Index of /trunk/src/chrome/common/extensions/docs/examples：Extensionのサンプル
• Google Chrome 拡張機能：公式拡張ギャラリー

また、2010年4月9日（金）にChrome Extension TechTalkを行います。Chrome Extension TechTalkのご案内、ライトニングトーク発表者の募集もしていますので、是非ご応募ください！

この資料についてのお話

この資料自体がHTML5のサンプルとなるよう作ってあります。

HTML5 Validator

Validator.nu (X)HTML5 Validator
(X)HTML5 validation results for http://ss-o.net/chrome/extension/html5.html

HTML5 Outliner

HTML 5 Outliner
Outline

Outlineと目次

HTML5 のセクションアウトラインを生成してみよう！ - IT戦記のOutliner.jsを使用して、右上の目次を自動生成しています。

This work is in the Public Domain.