WebKit拡張教室
at ブラウザー勉強会

Date: 2010/07/16

Author: 太田昌吾(os0x, Twitter, hatena)

ブラウザー勉強会

ウェブブラウザの勉強会ということなので拡張機能だけでなく、Safari、Chrome、そしてWebKitについて簡単に

WebKitの歴史

WebKitの原型は、KDEプロジェクトのHTMLレンダリングエンジンであるKHTMLとJavaScriptエンジンのKJSをベースに1998年に開発が始まった

その後、2002年にWebKitという名称とそのプロジェクトがスタート

HTMLレンダリングエンジンはWebCore、JavaScriptエンジンはJavaScriptCoreと命名された

余談ですが、CSSのベンダープリフィクスについて、WebKitは-webkitが知られていますが、実は-khtmlもしくは-appleと書いてもOKだったりします。

body.r{
  -apple-transform:rotate(-10deg);
  -khtml-transition: all 2s ease-in-out;
}

ただし、今まさに削除されようとしているので使っちゃ駄目!

Bug 42093 - Change handling of -khtml- and -apple- vendor-prefixes

といいつつ、-apple-dashboard-regionや-khtml-user-dragや-khtml-user-selectなどは実際に使われていることも…

余談の余談ですが、-apple-dashboard-region(MacのDashboard用の拡張)にいたっては、Operaも(Operaウィジェット用に)サポートしています。

なおWebKitも-apple-dashboard-regionと-apple-line-clampだけはサポートを続けるらしく、このまま定着してしまいそうです。

ちなみに-apple-line-clamp(もしくは-webkit-line-clamp)というのは長い文字列を自動的に省略してくれるCSSです。

/trunk/LayoutTests/fast/overflow/line-clamp.html - WebKit

WebCore

HTMLのパーサー、レイアウト、レンダリング、DOMライブラリの集合

少なからず過去の遺産を含む…

例えば…

CSSの新しいプロパティを追加するたびにswitch caseが増える

最近追加されたところではCSS Generated Content for Paged Media ModuleのHyphenationで、そのChangeset 61548

例えば…

グローバル変数が lock もされずそこらじゅうで使われてることからわかるわけですが、 WebCore は基本的に thread unsafe です。

2010-01-02 - 兼雑記

WebKit2

身も蓋もない言い方をすると、そういった負の遺産を解決するプロジェクト

WebKitをマルチプロセス化するプロジェクト

WebKit2とChromeのマルチプロセスの違い

Chromeはアプリケーションレベルのマルチプロセスなので、Windowsでタスクマネージャを開くとChromeのプロセスがたくさん起動している(※)

WebKit2はフレームワークレベルなので、1つのアプリケーションの中でプロセスを分割されることになる(※)

と、思われるが、WebKit2はまだまだこれからなので、詳細は不明というか未定

↑再利用性云々の意味を取り違えていておかしなことを書いています…。ChromeのマルチプロセスはChromeでしか利用しにくいけど、WebKit2のマルチプロセスはWebKit2を利用するアプリケーションならその恩恵を得られる。ってことでした。

WebKitの開発者

コミッターとレビュアー(とコントリビューター)がいる

2010年7月16日時点でコミッターは116名、レビュアーは76名

コミッターは10から20程度のパッチを送っていて、レビュアーに認められれば割とすぐになれることも(早ければ数カ月程度)

レビュアーはプロジェクトに大きな貢献をしていないとなれない

参考: committers.py

WebKit Chromium
Safari Google Chrome
WebCore
JavaScriptCore
V8
オープンソース
Extensions

Chrome/Safari拡張

HTML/CSS/JavaScriptをベースに拡張用APIを使ってブラウザに機能を追加する

簡単に作れるのが長所だが、その代わりに制約も多い

なお、Safari拡張は2010年7月17日時点では正式リリースはされていない

Chrome/Safari拡張のギャラリー

Googleは公式の拡張機能ギャラリーを提供している

Appleも拡張のリリースに合わせてギャラリーを公開予定

HTML5関連APIと拡張

グラフィック系
  • canvas
  • SVG
  • video, audio
  • Web Fonts
データ系
  • Web Storage
  • Web SQL Database(標準化は停止)
  • Indexed Database API(実装途中)
通信系
  • postMessage
  • Web Sockets
  • XMLHttpRequest Level 2
その他
  • Web Workers
  • Geolocation API
  • Application Cache
  • Drag & drop
  • HTML Forms(UI系は実装途中)
  • File API(Chrome6から)
  • Desktop notifications(Chromeのみ)

拡張用API

共通
  • タブ操作・ウィンドウ操作
  • オプションページ
  • ツールボタン(ChromeはBrowser Action、SafariはToolbar Button)
  • コンテキストメニュー(ただし、ChromeはChrome6から追加予定で現状は使えない)
  • バックグラウンド・グローバルページ(ブラウザの起動中、バックグランドで動いているページ)
  • ユーザースクリプト(読み込んだページ上で実行されるスクリプト、ページのDOMにアクセスできる)
  • ユーザースタイルシート(読み込んだページに適用されるCSS)
  • ページのキャプチャ
Chrome
  • ブックマーク操作
  • ページアクション(アドレスバーの中にアイコンを表示)
  • ポップアップ(ページアクション・ブラウザアクションから表示できるミニサイズのポップアップページ)
  • 履歴操作
  • 国際化(i18n)
Safari
  • ツールバー

Firefoxの拡張との違い

長所

インストール・アップデート時に再起動が不要

XULやXPCOMなど、専用技術を覚える必要がない

短所

先にあげたAPIにない機能、それらで実現できないことはほとんど実現不可能(ローカルファイルへのアクセスなど)

拡張を動かす

拡張のAPIをその場で実行できる簡単な拡張を用意しました(仕組みはevalするだけ)。安全かどうか保証できないので、使い終わったらアンインストールしてあげてください。

Chrome用: sandbox.crx

Safari用: sandbox.safariextz

zip: sandbox.safariextension.zip

Appendix

Chrome Extensionsの参考URL

Safari Extensionsの参考URL