Show HN: ビルド設定不要でウェブ拡張機能を作成するCLIツール

Extension.jsについて

• Extension.jsは、設定が不要なプラグアンドプレイ方式のクロスブラウザ拡張開発ツールです。
• TypeScript、WebAssembly、React、モダンなJavaScriptをデフォルトでサポートしているため、クロスブラウザ拡張を作成できます

新規拡張の作成

• 次のコマンドで新しい拡張を簡単に作成できます

  npx extension create my-extension
  cd my-extension
  npm run dev
  

• コマンド実行後に新しいブラウザーインスタンスが開いたら、すぐに開発を開始できます

Chrome Extension Samplesの活用

• Chrome Extension Samplesリポジトリのサンプルを使えば、開発をすぐに始められます
  1. ターミナルを開く
  2. 拡張を作成するディレクトリに移動
  3. 以下のコマンドを実行

     npx extension dev <sample-name>
     

  • <sample-name>はChrome Extension Samplesで使うサンプル名に置き換えます
• 例: page-redderサンプルを実行

  npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge
  

Microsoft EdgeでChrome Extension Samplesを使用する

• Extension.jsはMicrosoft Edgeを含む複数のブラウザーをサポートします
• Edge対応拡張の開始方法:
  1. ターミナルを開く
  2. 対象プロジェクトのディレクトリへ移動
  3. 以下のコマンドを実行

     npx extension dev <sample-name> --browser=edge
     

  • <sample-name>は使用するサンプル名に置き換えます
• 例: magic8ballサンプルをEdgeで実行

  npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge 
  

EdgeでMozillaアドオンを実行する

• FirefoxとEdgeの差を縮小するため、EdgeでMozillaアドオンを実行できます
  1. プロジェクトのディレクトリへ移動
  2. 以下のコマンドを使用

     npx extension dev <addon-name> --browser=edge --polyfill=true
     

  • Mozillaアドオンを取り込み、Edge向けに調整します
• 例: MDN WebExtensions ExamplesのApply CSSサンプルをEdgeで実行

  npx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true
  

既存拡張にExtension.jsを使う

• 既存の拡張でパッケージマネージャーを使用している場合、Extension.jsをインストールしてスクリプトを作成すれば実行可能です
  1. devDependencyとしてextensionをインストール

     npm install extension --save-dev
     

  2. npmスクリプトとExtension.jsコマンドを接続

     {
       "scripts": {
         "build": "extension build", 
         "dev": "extension dev",
         "start": "extension start"  
       },
       "devDependencies": {
         "extension": "latest"
       }
     }
     

• 開発時はnpm run dev、本番プレビューはnpm run start、本番ビルドはnpm run buildを使用します

開発対象ブラウザーの指定

• デスクトップブラウザーのサポート状況

Brave	Chrome	Edge	Firefox	Opera	Safari	Vivaldi
☑️	✅	✅	⛔️	☑️	⛔️	☑️

• ☑️ = 動作する可能性が高いが、ブラウザーランナーをサポートしていない
• モバイルブラウザーのサポート状況

Firefox Android	iOS Safari
⛔️	⛔️

• 特定ブラウザー向けにdev/startコマンドへ--browserフラグを渡します
  • 例: npx extension dev path/to/extension --browser=edge
• ヒント: --browser="all"を渡すと、利用可能なすべてのブラウザーを一度に読み込みます

GN⁺の見解

• Extension.jsは、クロスブラウザ拡張開発向けの強力なツールのように見えます。特に設定なしで使え、複数ブラウザーを簡単にサポートできるため、開発時間を大きく短縮できると感じます。
• Chrome Extension SamplesやMDN WebExtensions Examplesといった既存サンプルを活用できるのも大きな利点です。初心者開発者でも簡単に始められそうです。
• 一方、FirefoxやSafariなど一部のブラウザーはまだ完全にサポートされていないようなので注意が必要です。特定ブラウザーのみを対象にする場合は、そのブラウザー専用の開発ツールの利用を検討するべきでしょう。
• 既存のPlasmo、WebExtensions APIなどの類似ツールと比較した際の長所・短所が気になります。特にManifest V3などの最新仕様への対応可否を確認する必要がありそうです。

[GN⁺]

Hacker Newsのコメント

• Chrome拡張機能開発向けの便利なフレームワークであるExtension.jsが紹介された
  • 現在、Firefox対応はまだ完全ではない
• 他の開発者もChrome拡張の開発で苦労した経験を共有
  • 特にスタイルの適用が難しかった
  • Extension.js がこうした悩みを解消してくれると期待されている
• Extension.js のREADMEドキュメントもよく整っていて高評価
• Google Playの煩雑さのためアプリに拡張機能を追加するのをためらっていた開発者も、Extension.jsの利用を検討中
• 拡張機能とタブ間の通信機能もExtension.jsに含まれると良いという意見が示された
  • DOMから読み取ったり、拡張機能からアクティブなタブへメッセージを送信するのが不便だった
• Plasmoのような類似フレームワークとの比較について質問が提起された
• Chrome拡張を開発する際の「インポスター症候群（Imposter Syndrome）」への言及
  • 新規プロジェクトの立ち上げが難しい
  • Extension.js がこれを解消してくれると期待
• Safari対応は、safari-web-extension-converter CLIツールを使えば比較的簡単だという意見
• これまでChrome拡張を開発した経験を踏まえ、Extension.jsの利点についての疑問が示された
  • 単なるファイルコピー以上に何ができるのか？
  • クロスブラウザ対応？ローカライズ対応？
• Chrome拡張開発時に開発ツールが不足していると感じた開発者によるExtension.jsへの期待感の表明