🦊🐈️❤|Firefoxベースのブラウザー、模様替えしてみた

こんにちは。Firefoxベースのブラウザーである『noraneko』の開発をしているNyanRusです。

私が作っているブラウザーについて、「開発のきっかけ」や「開発で知ったこと」、「経験したこと」を書きます。

Firefoxってなに？

『Firefox』はMozillaという会社、及びコミュニティが開発しているブラウザーです。
メジャーなブラウザーである『Chrome』はGoogleが開発しています。
世の中には、『Microsoft Edge』『Opera』などChromeの亜種がたくさんありますが、Firefoxはそうではなく、Chromeと同じ先祖を持っている違うブラウザーだと言えます。

Firefoxベースのブラウザを作ろうとしたきっかけ

ある学生コミュニティを見つけたのですが、
最初は、そのコミュニティで作られている拡張機能に関心があり、コードを見ていました。
、、、うわー！JavaScriptがたっくさーん！
ということでその時にTypeScriptを書いて、おすすめしてきました。

JavaScriptはブラウザーで実行できるスクリプトですが、型が緩く補完が効きづらいのでコードを書くとき不便なのです。
TypeScriptは、型および他の便利な機能を足したJavaScriptで、JavaScriptに変換されて実行されます。JavaScriptが補完が効きづらいのに対して、TypeScriptは補完が効くので、結構楽にコードを書けます。

このブラウザーはTypeScriptのおすすめの延長線となっております。

ゑ？

拡張機能からブラウザーの話で急展開ですが、
その学生コミュニティでは、Firefoxベースのブラウザーがありました。
Firefoxのソースコードを見るとわかるのですが、スクリプトの殆どが補完の効かないJavaScriptで書かれています。

https://searchfox.org/mozilla-central/source/browser/base/content

その開発の支援をしたのがきっかけとなり、Firefoxのソースコードを見ることになりました。

ブラウザー開発は模様替え

ブラウザーを開発しているということは、模様替えみたいなものだと思います。
ゲームで言えば、スキンを自作するようなことです。
見た目を変えたり、機能を追加するのですが、
Mozillaによって書かれたソースコードを一部書き直して実現します。
そして私が書き変えた部分が、このMozillaによって修正されると…
ソースコードが、、、
衝突します！！！

衝突した上に、JavaScriptなので型の補完も受けられません！
今では便利なAIの補助があるとしても、確実な情報源である型情報がないのです。

模様替えがつらすぎます！（アップデートのたびに修正を100行とかざらです）
なので、ブラウザーを少し楽に開発できる仕組みを作っていってます。
TypeScript, Viteなどを使っています。

なぜ新しい仕組みを？

元々は、既存のビルドの仕組みを流用しようとしました。
よく検証された仕組みを使うと、書くことが少なく、楽に進むからです。

既存のFirefoxのビルドでは、mozbuildというPythonスクリプトの塊があります。
Firefoxの開発では、大いに助けになる存在です。
しかし、模様替えをしようとしている側にとっては大きな壁がありました。

負担なデカいソースコード、長いビルド時間

Firefoxの開発を始めるとき、Firefoxのソースコードをダウンロードする必要があります。
その大きさは凄まじく、4GBです。
それをダウンロードするのにまず時間がかかり、それをビルドするのに2時間ほどかかります。
開発を始めるときのハードルが凄まじいのです。（模様替えなのに…）

アーティファクトビルドという、ビルドをスキップする機能はありますが、Firefoxにのみ対応しており、Firefoxベースの他のブラウザーには対応していません。
カスタムブラウザーにアーティファクトビルドは使えません。
そして、コードを書こうとしても、大きなソースコードを読み込むので、エディターも重いです。

その後、ブラウザを作れば公開もするでしょうが、
公開のために先程の2時間がかかり、バグが出るたびにまた2時間がかかります。（またか！！）
トライアンドエラー（涙ぐましい）が基本のソフトウェア開発で、公開やバグ修正のたびに2時間がかかるのはとてもとて～も疲れます。

noranekoブラウザー

それを踏まえての、私が作っているブラウザーになります。

1. 時短できる小さなソースコード
   mozbuildのソースコードとにらめっこした結果、
   ブラウザーのバイナリのみをダウンロードすれば開発ができるように作成。
   アーティファクトビルドのような機能が使えるようになりました。
   その結果、、、（ジャジャーン！！）　2時間時短できます！
   ソースコードの大きさも改善し、エディタも快適になりました。
   また、大きなリポジトリは、C++ソースや、既存のJavaScriptの変更が必要なときにだけ見れば良くなりました。

2. JavaScriptからTypeScriptへ！
   模様替えに、TypeScriptの方も使えるようにし、最近はMozilla側で一部の型定義が提供されているため、型補完が結構効くようになりました！

3. 便利な開発ツール
   ブラウザの内部をViteと繋いでいるので、限定的な場合にですが、開発のとき実行中にソースコードを入れ替える、Hot Module Replacementも使えます。

4. リリースで待たなくていい
   アーティファクトビルドの仕組みを使えるようにしたので、JavaScriptのようなスクリプトの変更は10分ぐらいでリリースできます。

楽な模様替えを目指して

noranekoブラウザーは、ある学生コミュニティで開発されているブラウザーに貢献するために作られました。
いま絶賛デバッグ中！！！
一応アルファ版は出ていますので、ぜひ試してみてください。
みなさんの貢献や、派生も歓迎です！

https://github.com/nyanrus/noraneko

お読みいただきありがとうございます！良い一日をお過ごしください。