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がありますが、メンテナンスが長期間なく、不具合も多く報告されている為、今回は使用せずにインストールしました。気になる方はこちらを参考にしてみてください。
Chrome Extension CLIのインストール
続いて、PCのグローバル環境にChrome Extension CLIをインストールします。下記コマンドをコマンドプロンプトで実行します。
npm install -g chrome-extension-cli
オプションの「-g」はグローバルインストールの意味で、npmのインストール場所にパッケージをインストールします。付けない場合は、ローカルインストールとなり、編集しているプロジェクトファイルのnode_modules内にインストールされます。プロジェクトごとに環境を設定したい場合は、ローカルインストールをしてください。
特にエラーが表示されずに完了した場合、インストールは成功です。
インストール手順は公式サイトを参考にしました。
以上でChrome Extension CLIを使用する為の環境設定は完了です。
次回は「Chrome Extension CLIの使い方(プロジェクト作成・デバッグ編)」になります。近日公開予定ですので、そちらも併せてチェックしてみてください。
追記 2022/3/30
「Chrome Extension CLIの使い方(プロジェクト作成・デバッグ編)」を公開しました。こちらよりご確認ください。
この記事が気に入ったらサポートをしてみませんか?