Chrome拡張機能をChrome Extension CLIで作ってみた。～環境構築編～

Chrome拡張機能を作成するのに便利なツール「Chrome Extension CLI」が、先日バージョン1.0.0にアップデートされたので、環境構築、使用方法（プロジェクト作成・デバック）についてご紹介したいと思います。

本記事の内容は「環境構築」です。

Chrome Extension CLIでできること

Chrome Extension CLIは、npmコマンドを使って初期セットアップのテンプレートを作成してくれるオープンソースのCLIです。
Chrome拡張機能のテンプレートを自動で作成してくれたり、ソースコードの保存をするだけでビルド結果を反映してくれたりと、拡張機能作成に大きく貢献してくれます。

開発に使用したもの

・Visual Studio Code（今回はこちらのエディターを使用）
・Node.js v14.18.2
・Windows10 pro  (homeでも可)
・Chrome Extension CLI v1.0.0

Node.jsのインストール

Chrome Extension CLIを使用する為に、Node.jsをインストールする必要があります。こちらからインストーラーを入手してください。
バージョンはv14.18.2を使用しました。必要に応じて変更してください。

Node.js 14.18.2のダウンロードをクリック。

今回は 64bit 版を使っているので x64 をDLします。
node-v14.18.2-x64.msi をクリックすると、インストーラーのダウンロードが開始されます。

インストーラーの実行

インストーラーのダウンロードが完了したら、msiファイルを実行しNode.jsのインストールを開始します。特別に設定する値はないので、そのまま「Next」、「Install」をクリックしていきます。

「Finish」をクリックし、インストール作業は終了です。

動作確認

インストールが無事に完了したか確認を行います。コマンドプロンプトを起動し、次のコマンドを実行します。

node -v

インストールされたバージョンの値が表示出来れば成功です。

補足
バージョン管理ツールとしてNodistがありますが、メンテナンスが長期間なく、不具合も多く報告されている為、今回は使用せずにインストールしました。気になる方はこちらを参考にしてみてください。

nodistでNode.jsをバージョン管理 - Qiita

Chrome Extension CLIのインストール

続いて、PCのグローバル環境にChrome Extension CLIをインストールします。下記コマンドをコマンドプロンプトで実行します。​

npm install -g chrome-extension-cli

オプションの「-g」はグローバルインストールの意味で、npmのインストール場所にパッケージをインストールします。付けない場合は、ローカルインストールとなり、編集しているプロジェクトファイルのnode_modules内にインストールされます。プロジェクトごとに環境を設定したい場合は、ローカルインストールをしてください。

特にエラーが表示されずに完了した場合、インストールは成功です。

インストール手順は公式サイトを参考にしました。

GitHub - dutiyesh/chrome-extension-cli: 🚀 The CLI for your next Chrome Extension

以上でChrome Extension CLIを使用する為の環境設定は完了です。
次回は「Chrome Extension CLIの使い方（プロジェクト作成・デバッグ編）」になります。近日公開予定ですので、そちらも併せてチェックしてみてください。

追記　2022/3/30
「Chrome Extension CLIの使い方（プロジェクト作成・デバッグ編）」を公開しました。こちらよりご確認ください。