Show HN: ビルド設定なしで Web 拡張機能を作成する CLI ツールを開発

 (github.com/cezaraugusto)
4 ポイント 投稿者 GN⁺ 2024-05-02 | 1件のコメント | WhatsAppで共有
  • Extension.jsは Chrome、Edge、Firefox 向けの Web 拡張機能をビルドする CLI で、npx extension@latest create my-extension と npm run dev だけで開発を始められる
  • Manifest V3 の断片化、ブラウザごとの差異、コンテンツスクリプトのホットリロード不足、対象ごとに別々のビルドパイプラインが必要な問題を、設定不要の開発フローへと減らすことを目指している
  • background、content、popup、options スクリプトに Hot Module Replacement を提供し、React、Vue、Svelte、Preact コンポーネントと TypeScript を第一級でサポートする
  • extension build --zip で Chrome Web Store、Edge Add-ons、Firefox AMO 提出用の本番 ZIPを作成でき、--browser=firefox のようなブラウザ別ビルドも可能
  • 既存の拡張機能にも extension@latest を開発依存関係として追加し、build、dev、preview スクリプトを接続する形で導入できる

Extension.js が解決しようとしている問題

  • Extension.js は Chrome、Edge、Firefox 拡張機能を作るための CLI ツール
  • 基本的な利用フローは、新しいプロジェクトを作成して開発サーバーを起動する形
    • npx extension@latest create my-extension
    • cd my-extension
    • npm run dev
  • npm、pnpm、yarn、bun とともに動作する
  • ドキュメント、テンプレート、サンプルはそれぞれ Documentation、Templates、Examples で提供される

開発体験と主要機能

  • ブラウザ拡張開発で直面する Manifest V3 の断片化、ブラウザごとの差異、コンテンツスクリプトのホットリロード不足、対象ごとのビルドパイプラインの問題を減らすことに重点を置いている
  • Hot Module Replacement は background、content、popup、options スクリプトに適用される
    • React、Vue、Svelte、Preact コンポーネントも含む
  • Manifest V3 を標準で使用し、Chrome、Edge、Firefox 向けの自動アダプターを提供する
  • 1 つの CLI で Chrome、Edge、Firefox と Chromium または Gecko ベースのバイナリを対象に実行できる
  • webpack、rollup、保守が必要なプラグインなしで zero config を志向する
  • TypeScript、React、Vue、Svelte、Preact を第一級でサポートする
  • extension build --zip で Chrome Web Store と Firefox Add-ons 提出向けの本番ビルドを作成できる
  • 既存の拡張機能にも 1 つの devDependency として追加できる

他の拡張開発ツールとの違い

  • Plasmo、WXT、CRXJS を使ったことがあるユーザー向けに、Extension.js の違いを機能別に示している
  • GitHub サンプルを直接実行できる
  • 管理されたブラウザバイナリを提供する
    • 例: extension install firefox で隔離された Firefox ビルドをダウンロードする
  • コンテンツスクリプト向けのクロスブラウザ HMRが組み込まれており、追加プラグインの接続は不要
  • ストア提出用の本番 ZIP を作成できる
    • 例: extension build --zip
  • フレームワーク非依存
  • カスタム Chromium および Gecko バイナリを指定できる
    • --chromium-binary
    • --gecko-binary

対応フレームワークとブラウザ

  • 対応フレームワークと実行例はテンプレートまたはサンプルとして提供される
  • extension dev、extension start、extension preview ではブラウザ関連フラグを使用できる
    • --browser <chrome | edge | firefox> でブラウザを選択する
    • --chromium-binary <path-to-binary> でカスタム Chromium バイナリを指定する
    • --gecko-binary <path-to-binary> でカスタム Gecko または Firefox バイナリを指定する
  • 対応ブラウザは Google Chrome、Microsoft Edge、Mozilla Firefox、Chromium ベース、Gecko ベース
  • Apple Safari は Next と表示されている

ビルド、パッケージング、管理ブラウザ

  • 本番ビルドは npx extension@latest build で実行する
  • ストア提出用 ZIP パッケージは npx extension@latest build --zip で生成する
  • ブラウザ別ビルドも可能
    • 例: npx extension@latest build --browser=firefox --zip
  • 便利なビルドフラグが用意されている
    • --zip: ストアアップロード用 ZIP にパッケージングする
    • --zip-source: ストアのソースコード審査向けにソースファイルを含める
    • --zip-filename <name>: 出力ファイル名を制御する
    • --polyfill: クロスブラウザ webextension polyfill を有効化する
  • Extension.js はクリーンな開発セッションのために、隔離されたブラウザバイナリをダウンロードして管理できる
    • npx extension@latest install firefox
    • npx extension@latest install --browser=all
    • npx extension@latest install --where

既存の拡張機能とサンプル実行

  • 既存の拡張機能には開発依存関係としてインストールする
    • npm install extension@latest --save-dev
  • package.json のスクリプトで extension build、extension dev、extension preview を接続して使える
    • npm run dev: 開発
    • npm run build: 本番ビルド
    • npm run preview: 本番出力の確認
  • Chrome Extension Samples のサンプルを直接取得して実行できる
  • コミュニティとサンプルは Discord、GitHub issues、examples で提供される
  • ライセンスは MIT

関連記事

1件のコメント

 
GN⁺ 2024-05-02
Hacker Newsのコメント

  • 素晴らしいプロジェクト。自分の拡張機能（https://github.com/herrherrmann/omnivore-list-popup）でも試してみようと思う
    これまでは拡張機能のビルドや開発モードの管理を自前のスクリプトで処理していたが、すでに web-ext で楽にできるかを見ていた
    ただ、メインブラウザが Firefox なのに、Extension.js はまだ Firefox を完全にはサポートしていないように見える

    • Mozilla Add-On は --polyfill フラグを付ければ Chrome や Edge で実行できるが、現時点では Firefox には拡張機能を手動で追加する必要がある
      近いうちに Firefox サポート を入れる予定ではあるが、今のところブラウザランチャーがない

  • まさに今必要なツール。作って共有してくれてありがとう。Firefox サポート がうまく進むことを期待している
    Firefox サポートの issue: https://github.com/cezaraugusto/extension.js/issues/5

    • 特に manifest.json の競合する要件を扱う助けになるとよさそう
      たとえば イベントページとバックグラウンドサービスワーカー の違い、あるいはブラウザごとに要求されたり禁止されたりする権限が一貫していないことがある
    • GitHub の Firefox サポート issue に詳細をもっと書いてくれると助かる。コミュニティが解決を手伝えるかもしれない

  • ちょっと混乱している。すでに Chrome 専用の拡張機能を JavaScript で書いたことがあるが、始めるのは Chrome 拡張機能のドキュメントサイトから数ファイルをコピーする程度だった
    IDE の設定は特にしていないし、何をすべきなのかもよくわからない
    このツールが数ファイルをコピーする以上に何をしてくれるのか理解したい。クロスブラウザ対応 なのか、多言語対応なのかが気になる

    • そういう場合、Extension.js は通常の Web 開発では見落としがちな 設定の細部 を管理してくれる
      Chrome 拡張機能のドキュメントから数ファイルをコピーした後は、ブラウザで「開発者モード」を自分で有効にしてファイルを追加しなければならない。コードを変えたら、ブラウザ拡張機能が影響する複数の実行コンテキストを手動でリフレッシュして変更を確認する必要がある。複数ブラウザでテストするなら、この工程をそれぞれで繰り返さなければならない
      TypeScript や JavaScript フレームワークのようなパッケージ依存を使いたければ、既存の拡張機能抽象化フレームワークに依存して新しいやり方を学ぶか、webpack、Parcel、esbuild のようなツールで自分で設定を作る必要がある。このあたりまで来ると、ブラウザ拡張機能の開発は複雑で面倒になりがちだ
      Extension.js は、開発用ブラウザで拡張機能をバンドルして実行する過程を自動化することで、これをシンプルにしている。HTML/CSS/JavaScript だけでなくブラウザ領域まで含めたすべての実行コンテキストで 自動リロード をサポートし、TypeScript や React のようなコード依存も追加設定なしでインストールするだけで使える。複数ブラウザでも同時に動作する

  • 良いプロジェクト。最初の Chrome 拡張機能は https://crxjs.dev/vite-plugin/getting-started で作ったが、スタイルをきちんと動かすのにかなり手がかかった
    初めての ブラウザ拡張機能開発 だったからかもしれない: https://chromewebstore.google.com/detail/bettermenu-for-door...
    まだやることが多いので、このプロジェクトもチェックしてみるつもり

  • 本当に素晴らしい。README まで美しくよくできている
    Google Play があまりにひどいのでアプリに拡張機能を付けるのを先延ばしにしていたが、これを一度試してみるつもり

  • いいね。似たフレームワークの Plasmo と比べるとどう違うのか気になる
    https://www.plasmo.com/

    • 一番大きな違いは、Plasmo は フレームワーク だという点だと思う。つまり新しい拡張機能を作るには、その抽象化を学び、その抽象化に合わせたサンプルに依存する必要がある
      ブラウザ拡張機能そのものとは必ずしも関係のない設定ファイルや特定のルールにも従わなければならない
      一方で Extension.js は標準の拡張 API で拡張機能を作れるようにし、設定ファイルだけを抽象化する。ツール固有の細かいやり方を学ぶ必要がない。だから Chrome や MDN のサンプルがマニフェストファイルを単一の基準として動くなら、Extension.js で使うためにリファクタリングする必要がなく、新しいプロジェクトの開始やプロトタイプ作成がしやすい
    • Plasmo はとても便利そうに見える。実際に拡張機能開発で使ったことがあるのか気になる

  • 拡張機能をいくつか作ったことがある。ひとつはネタで、imgur がハートの色を変えて皆が不満だったときに、その色を変える拡張機能だった
    Chrome 拡張機能を作るたびに インポスター症候群 がかなり強く出る。なぜか新規プロジェクトを作るのがすごく難しいので、こういうツールがあると本当にありがたい

    • 本当に同感。拡張機能開発は本来もっと楽しいものであるべきだと思う。次のプロジェクトで Extension.js が役立つことを願っている

  • 気に入った。拡張機能とタブ間の通信 にも少し魔法をかけてくれるといいのに
    拡張機能を作るたびに DOM を読んだり、拡張機能からアクティブタブへメッセージを送ったりする過程がいつもつらい

    • Plasmo には見ておく価値のあるメッセージングライブラリがある
      https://docs.plasmo.com/framework/messaging
    • 今のところ計画にはないが、その間も npm には良いライブラリがきっとあるはず
    • この過程のどこが特に面倒だったりわかりにくかったりするのか、もう少し共有してもらえるとありがたい

  • issue をひとつ追加した。Safari サポートは Apple の safari-web-extension-converter CLI ツールを使えば比較的シンプルそう

  • 良さそう。自分の拡張機能 Vim for Docs で一度試してみるつもり
    Firefox がサポートされていないのは残念だが、そもそも Firefox と Chromium 系ブラウザ の両方をサポートする拡張機能ビルドツール自体あまりない

    • Firefox サポートは次のアップデートに入る予定。期待していていい