ZenBrowser をビルドしてみよう
動機づけ
ZenBrowser というものがあるらしいというのを2025年夏頃に紹介を受けて Firefox Nightly 使いの私は全然触手が伸びなかった。
それ以降周りでもZenBrowser使いが増え、「ここはいいんだけど、ここがダメだなー」みたいな意見を聞く機会が増えたので、すこし調べてみたらビルドしてカスタマイズするという事になってました。
Zen Browser とは
私自身、Zen Browser の背景など全く知らずに Gecko のフォークという認識だけでした。
調べていくと Firefox からフォークするにあたって作業にフォーカスしやすいようなフロントエンドの実装をメインに活動されている事がよくわかりました。
他の Firefox(Gecko) ベースブラウザ
ちょっと調べて以下のような活発なブラウザが存在していたが、オープンソースで使う人の作業にフォーカスしたものは他にはなさそうだった。 (他にご存じのものがあればコメントください)
この文章について
macOS で ZenBrowser をビルドして、Firefox(gecko)のビルドと何が違うのかを理解してもらうためのドキュメントです。
mac mini 2025 の最低スペックでもビルドが可能です。
なぜビルド？
別にビルドしなくても、皆さんブラウザーをダウンロードすれば快適に使う事ができます。普通に使いたい方は公式サイトからダウンロードしてお使いください。
どうしてもビルドしたいとか、ブラウザのカスタマイズしたいとか、内部を知りたいという方だけが読んでください。
ビルドをしてフロントの一部をカスタマイズしたり、ネットワークやDOMを修正できて普通のブラウザではできない拡張をする事ができます。
特に Firefox ベースということなので、ブラウザ内部のI/Fは Mozilla Gecko と同じものを利用しているので公開されている情報が多く実現するための障壁も少なくなることでしょう。
準備
基本的には、Building Zen の順番に実行していけばビルドすることはできるはずです。
XCode 準備
CLI 系を使う Chromium のビルドの時や OBS ビルドの時も同じですが、XCode の利用規約に合意している必要があります。
sudo xcode-select --switch /Applications/Xcode.app
sudo xcodebuild -license
これで Apple 開発の利用規約がターミナルに表示されるので、Yesを洗濯して合意しましょう
レポジトリのクローン
git clone https://github.com/zen-browser/desktop.git --depth 10
cd desktop
関連パッケージのインストール
npm i
ここまでは Node.js パッケージアプリの準備のようですね。
インストールされるパッケージも babel やeslint など JavaScript 開発で一般的なものがインストールされます。
Bootstrap ツールのセットアップ
npm run init
ここでは、surfer というツールを使って Firefox の特定バージョンのダウンロードや、必要となる Bootstrap ツールのダウンロードを行います。
ここでしばし時間がかかるかもしれません。
言語パックの設定
python3 ./scripts/update_en_US_packs.py
利用する言語パックのスクリプトが用意されているので実行しましょう。
ビルド
npm run build
これでブラウザのビルドができます。
具体的には、Firefox のビルドでは mach というコマンドを利用します。
先ほどの Bootstrap に含まれており、それを実行しているようです。
ここのビルドステップは長くて50分ほどかかります。
年賀状を書いて待っておきましょう。
実行
npm start
これで ZenBrowser が起動します。
まとめ
簡単なビルドの説明でしたが、公式を眺めながらビルドするとすんなりビルドできました。
Firefox の階層をそのまま持ってきているので、DOM や CSS 、フロントエンドの実装など Firefox の実装を利用できそうなので改造のしがいがありそうなので、今後修正したら記事にしたいと思います。
Discussion