Chromium + Nodeで動作してJavaScriptで拡張可能なブラウザExoBrowserを試す

ExoはChromiumをベースとして、そこにNodeを載せてHTML/CSSとJavaScriptでブラウザUIを利用できるように設計されたブラウザです。

この記事ではExoブラウザをソースからビルドして利用してみました。

なお、コンパイル環境はXcode 5-DP4です。また、Windowsではコンパイルできませんでした。

ソースコードの取得

Exoコンパイルをビルドするために必要なソースコードを取得するには次の手順を行います。

…の前に、セキュリティアプリを入れている場合はコンパイルのパフォーマンスに影響を及ぼすので、スキャンの対象外にしておきましょう。

簡単に言えば、Chromiumのソースを取得して、その中にNodeとexoのソースを配置してから、ChromiumとNodeをexoのコンパイルに適したリビジョンにしてパッチを当てます。

$ mkdir exo && cd exo
$ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
$ depot_tools/gclient config http://git.chromium.org/chromium/src.git --git-deps
$ depot_tools/fetch chromium --nosvn=True

$ cd src/third_party
$ git clone -b exo https://github.com/spolu/node.git

$ cd ..  # exo/src
$ git clone https://github.com/spolu/exo.git

$ cd ..  # exo
$ depot_tools/gclient sync -r `cat exo/DEPS/chromium.HEAD` 

$ cd src/third_party/node
$ git reset --hard `cat ../../exo/DEPS/node.HEAD`

$ cd ../..  # exo/src
$ git apply exo/DEPS/chromium.patch

ビルド

Ninjaでビルドします。

$ export GYP_GENERATORS='ninja'
$ build/gyp_chromium exo/exo.gyp
$ cd third_party/node
$ ./configure --ninja --dest-cpu ia32
$ cd ../..  # exo/src
$ ../depot_tools/ninja -C out/Debug exo -j8

環境にもよりますが、ビルドには1時間ほどかかります。

実行

実行する前に、npmで必要なモジュールを入れる必要がありました。

$ cd out/Debug/Exo.app/Contents/Resources/app
$ npm install

これでout/DebugにあるExo.appを実行できるようになります。起動直後は次のようなかんじです。

タブは左側に配置されており、LRUのように最近見たものが自動的に一番上に来るようになっています。

おもしろい機能として、アドレスバーで「/ キーワード」とすることでタブが搾り込めたりします。詳細はStacked Navigationを紹介しているプレゼンテーション資料を参照ください。

もっとも、現在は次のような機能がないので実用には向きません。

• ブックマークなし
• Cookie/セッション保存なし
• インスペクタなし
• ダウンロード/アップロード機能なし
• Flashなし

Exoの改造

ExoのJavaScript APIリストを元に、ちょっと改造してみました。

Exoには⌘ + Qでアプリケーションを終了する機能がないみたいなので、それを付け足してみます。 ついでに、⌘ + Sでhttp://www.duckduckgo.com/に飛ぶようにもしてみます。

out/Debug/Exo.app/Contents/Resources/app/lib/keyboard_shortcuts.jsあたりをいじってみました。 次のコードと似たようなコードがたくさんあるので、適当な位置に追加します。

if(event.type === 7 && (event.modifiers === modifier) &&
   event.keycode === 81) {
  my.session.exo_browser().kill();
}
if(event.type === 7 && (event.modifiers === modifier) &&
   event.keycode === 83) {
    frame.load_url('http://www.duckduckgo.com/');
}

これで、⌘ + Qで終了するようになりました。

ただし、⌘ + Sはフレームに対してload_urlしているので直前に操作したフレームがタブだったら次のようになってしまいました。

見方を変えれば、タブの部分もJavaScriptで操作できるわけなので、いろいろできそうな気がします。

おわりに

Exoブラウザをソースからビルドして改造する方法を簡単に紹介しました。

ちなみに、ChromiumとExoアーキテクチャの違いは次のようになっています。

詳細はThe Experimentation Platform to Build a Next generation Web Browserを参照してください。

関連情報

• GitHub: Exo
• The Experimentation Platform to Build a Next generation Web Browser
• GitHub: node-webkit