Geminiクンに聞いた内容の備忘

必要なツールをインストール

Node.js: npm(Node Package Manager)を使用するため、Node.jsをインストール

web-ext: Firefoxアドオンの開発・テスト・パッケージングを支援するコマンドラインツール

# Node.jsが未インストールの場合
# https://nodejs.org/ja/ からダウンロード・インストール

# web-extのインストール
npm install --global web-ext

プロジェクトの作成

次に、プロジェクトのディレクトリ構造を作成

my-addon/
├── manifest.json
└── content.js

manifest.json

{
  "manifest_version": 2,
  "name": "My Hot Reload Addon",
  "version": "1.0",
  "description": "Demonstrates hot reloading for Firefox addons.",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

content.js

console.log("Hello from my Firefox addon!");

VSCodeでのホットリロード設定

web-extのコマンドラインから直接ホットリロードを有効にするのが最も簡単

VSCodeの統合ターミナルで以下のコマンドを実行

# プロジェクトディレクトリ(my-addon/)に移動
cd my-addon

# アドオンを開発モードで実行し、自動でリロード
web-ext run --source-dir . --ignore-files "node_modules" --reload

このコマンドは、以下のことを行います。

web-ext run: アドオンを新しいFirefoxウィンドウで実行します。
--source-dir .: カレントディレクトリをソースディレクトリとして指定します。
--watch: ソースファイルに変更があった際に自動でアドオンを再読み込み(ホットリロード)します。

この設定により、VSCodeでcontent.jsやmanifest.jsonを修正して保存すると、開いているFirefoxウィンドウのアドオンが即座に更新されます。これにより、コードの変更とテストのサイクルが非常に効率的になります。

人間:エラーが出ました。下記参照

web-ext : このシステムではスクリプトの実行が無効になっているため、ファイル
C:\Users\admin\AppData\Roaming\npm\web-ext.ps1 を読み込むことができません。詳細については、

スクリプトの実行ポリシーの制限解除

これは、WindowsのPowerShellでスクリプトの実行ポリシーが制限されているために発生するエラーです。この問題を解決するには、スクリプトの実行を許可するようにポリシーを変更する必要があります。

解決策

以下の手順で実行ポリシーを変更してください。管理者としてPowerShellを起動します。スタートメニューを右クリックし、「Windows PowerShell(管理者)」または「ターミナル(管理者)」を選択します。実行ポリシーを設定します。開いたPowerShellウィンドウで、以下のコマンドを実行します。

Set-ExecutionPolicy RemoteSigned

実行ポリシーの変更を許可するかどうかを尋ねるプロンプトが表示されます。Yと入力してEnterキーを押します。

Set-ExecutionPolicyは、スクリプトの実行を許可するコマンドです。

RemoteSignedポリシーは、ローカルで作成したスクリプトは署名なしで実行でき、インターネットからダウンロードしたスクリプトは信頼できる発行者によって署名されている必要があるという設定です。ほとんどの開発シナリオではこの設定で十分です。

再度実行する

上記の手順が完了したら、VSCodeのターミナルに戻り、最初に実行しようとしていたweb-extコマンドを再度実行してください。

web-ext run --source-dir . --ignore-files "node_modules" --reload

成功!