次のように書き換えることができます: Chrome 拡張機能で npm モジュールを使用することは可能ですか?

Question

試してみましたが、「要件が定義されていません」というエラーが発生しました。このエラーに関する情報が見つかりません。誰か説明してもらえますか?

Answer 1

2022 年に更新された回答

短い答え: はい、パッケージを要求/インポートできます。 Webpack のようなパッケージ化ツールを自分でセットアップして構成するのに苦労するのではなく (特に使用したことがない場合)、Chrome 拡張機能の定型コードを作成するために使用できるビルド ツールが用意されています。

• Extension CLI - このツールは詳細に文書化されており、このツールを使用するいくつかの Chrome 拡張機能 のソース コードを参照することもできます (他のユーザーがどのように拡張機能を設定したかを参照してください)アップコード）。
• Chrome 拡張機能 CLI

それらを使用する利点:

新しいプロジェクトはデフォルトのプロジェクト ファイル構造を初期化します。これは非常に役立ちます。
最新の JavaScript (ES6、ES2021) をサポートしているため、モジュールは適切に動作します。
彼らはパッケージ化ツールを統合し、事前に構成しました (上記のどちらの場合も Webpack だったと思います)。したがって、自分でツールをインストールして構成する必要はありません。
通常どおり
• npm を使用して、必要なパッケージ/依存関係をインストールできます。

その後は、もちろん

Chrome 拡張機能の公式ドキュメント に従って残りの手順を進めてください。

Answer 2

可能ですが、注意が必要です。 require() を使用してパッケージをロードしようとすると、Node はファイル システム内でそのファイルを見つけようとします。 Chrome 拡張機能は、ファイル システムではなく、マニフェストで宣言したファイルにのみアクセスできます。

この問題を解決するには、Webpack などのモジュール パッケージ化ツールを使用します。このツールは、require() によって導入されたすべてのパッケージのコードを含む単一の JavaScript ファイルを生成します。 Chrome 拡張機能 (背景ページ、コンテンツ スクリプト、ポップアップなど) ごとに個別のモジュールを生成し、生成された各モジュールをマニフェストで宣言する必要があります。

require() を利用できるようにビルド システムをセットアップすることを避けるために、 ボイラープレート プロジェクト から始めることをお勧めします。 My extension をチェックして、私がどのようにしたかを確認してください。