クロスブラウザ拡張機能を頑張らずに開発する

ブラウザ拡張機能開発のために用意されている API は基本的にブラウザ間で共通化されていて、同じコードベースでクロスブラウザ対応させることが可能です。

Firefox の拡張機能は WebExtensions API を使ってビルドされ、この API は拡張機能をクロスブラウザーで開発するシステムです。このシステムの大半は Google Chrome と Opera と W3C Draft Community Group でサポートされている extension API と互換性があります。

https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions

前回紹介した Tanuki Utilities の開発のため Firefox と Chrome で動くように作った時のメモです。なるべく頑張らずに作っているので、ちゃんと作りたい場合は WebExtension Toolbox を使ったほうがいいかもしれません。

やったこと

マニフェストの共通化
Web Extensions API へのアクセスに chrome ネームスペースを使う

https://github.com/SogoKato/gitlab-project-favicon

マニフェストの共通化

Chrome は既に Manifest V3 (MV3) に移行していますし、Firefox も2023年1月リリースの109からデフォルトで有効化されています。MV2 と MV3 では manifest.json で使えるキーも違うので、これから作るのであれば MV3 に統一しちゃいましょう。

manifest.json のブラウザー互換性ページを見れば、使いたいキーがブラウザでサポートされているかどうかを確認できます。

Web Extensions API へのアクセスに chrome ネームスペースを使う

Firefox では browser が、Chrome では chrome が Web Extensions API にアクセスするためのネームスペースですが、Firefox では移植の手助けのために chrome も使えるようになっています。

なので、次のように書けます。


async function getSettings() {
  return await chrome.storage.sync.get(null);
}

Firefox のドキュメントでは Chrome は非同期処理にコールバックを使っていると説明されていたりしますが、MV3 からは Chrome でも Promise がサポートされているので Promise を使っておけば問題ないです。

まとめ

意外と少ない対応手順でクロスブラウザ対応できることがわかりました。他にも細かい違いはあるようなので、気になる方は参考文献のリンク先を参照してください。