Chrome拡張機能をChrome Extension CLIで作ってみた。～使用方法編～

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

本記事の内容は「Chrome Extension CLIの使用方法（プロジェクト作成・デバック）」です。環境構築は前回の記事を参考にしてみてください。

概要

大まかな流れは①～④になります。

①Cドライブ直下にプロジェクトフォルダを作成
②chrome-extension-cli my-extension でプロジェクトを作成
③cd my-extension でディレクトリの移動
④npm run watch でデバッグを行う

以下より、詳細を記載していきます。

Chrome拡張機能の作成準備

プロジェクトを管理するフォルダを作成します。今回はコマンドプロンプトを使用して、プロジェクトを作成する方法をご紹介します。

コマンドプロンプトでフォルダ作成
①エクスプローラーを起動し、ローカルディスク（C:）を開きます。
②上部のアドレスバーに「cmd」と入力し、Enter。

補足
エクスプローラーのアドレスバーに直接cmdを入力し起動すると、コマンドプロンプトが起動し、エクスプローラーで開いていた場所がカレントディレクトリになっています。

③プロジェクトを管理するフォルダ「ChromeExtensionCLI」を下記コマンドをコマンドプロンプトで実行し、作成します。

mkdir projects

以上で、Cドライブ直下のprojectsフォルダが作成出来れば成功です。

Visual Studio Codeで編集する

Visual Studio CodeはMicrosoftが無料で提供しているエディターです。気になる方はこちらからインストールしてみてください。他のエディターを使用する方はプロジェクトの作成までSkipしてください。

Visual Studio Code – コード エディター | Microsoft Azure

インストールされたVisual Studio Codeを起動します。先ほど作成したプロジェクトフォルダを下記手順で開き、ターミナルを起動します。

①File > Open Folderを選択（Ctrl+K＋O）

②プロジェクトフォルダを選択

③Terminal > New Terminalを選択（Ctrl+Shift+@）

④下矢印をクリックし、Command Promptを選択

以降の作業は、Visual Studio Codeのターミナルを使用します。先ほどまで使用していたWindows標準機能のコマンドプロンプトでも同じ事が実行できます。開発環境によって使い分けてください。

プロジェクトの作成

Chrome Extension CLIを使用してプロジェクトを作成します。下記コマンドをコマンドプロンプトで実行するとファイルが自動で作成されます。my-extensionはプロジェクト名になります。

chrome-extension-cli my-extension

コマンド実行後、以下の表示であれば、正常に処理が完了しています。

作成可能な拡張機能機能の種類

Chrome Extension CLIには３種類のテンプレートが用意されています。プロジェクト作成時に以下のコマンドを追加で記述することで、異なる種類のテンプレートを作成します。

Popup型（デフォルト設定）
アクティブタブに機能を追加します。プロジェクト作成時、オプション指定がない場合、デフォルトで作成されます。

画像引用：https://github.com/dutiyesh/chrome-extension-cli

Override page型
[新しいタブ]、[ブックマーク]、[履歴]ページなどのデフォルトページを上書きする拡張機能のテンプレートです。また、オプション値を指定することで、ブックマークや履歴ページを上書きすることができます。

chrome-extension-cli my-extension --override-page              // Override page型の指定
chrome-extension-cli my-extension --override-page=bookmarks    // ブックマークページ上書き
chrome-extension-cli my-extension --override-page=history      // 履歴ページの上書き

画像引用：https://github.com/dutiyesh/chrome-extension-cli

DevTools型
Chromeデベロッパーツールに機能を追加するテンプレートです。

chrome-extension-cli my-extension --devtools

画像引用：https://github.com/dutiyesh/chrome-extension-cli

プロジェクト構成

Chrome Extension CLIのデフォルト設定（Popup型）では、以下の構成を自動で作成します。

my-extension	              // プロジェクト名					
├── README.md						
├── node_modules						
├── package.json						
├── .gitignore						
├── config                    					
│   ├── paths.js						
│   ├── webpack.common.js						
│   └── webpack.config.js						
├── public						
│   ├── icons				  
│   │   ├── icon_16.png						
│   │   ├── icon_32.png						
│   │   ├── icon_48.png						
│   │   ├── icon_128.png						
│   ├── popup.html             // popupする画面					
│   └── manifest.json		   // 拡張機能のオプション設定			
└── src						
   ├── background.js           // パックグラウンド上で動作するスクリプト	
   ├── contentScript.js        // ブラウザ上に表示されているページ上で動作するスクリプト
   ├── popup.css               // popup画面のcss設定
   └── popup.js                // popup画面上で動作するスクリプト

補足
バージョン1.0.0からmanifest V3に対応したプロジェクト構成となっています。V2のプロジェクトは2023年6月に完全に使用できなくなるので注意してください。V2 対応期間についてはこちらをご確認ください。

Manifest V2 support timeline - Chrome Developers

以上でプロジェクトの作成は完了です。

デバッグ方法

続いて、Chrome Extension CLIを使ったデバッグ方法になります。下記コマンドを実行するとChrome拡張機能に必要なbuildファイルを作成します。

npm run watch

Chromeに拡張機能を実装する
先ほど作成されたbuildファイルを使用し、下記手順でデバックを行います。

①URLにchrome://extensionsを入力しページ移動

②デベロッパーモードのチェックボックスをオンにして、[パッケージ化されていない拡張機能を読み込む]ボタンをクリック

③buildフォルダーを選択

以上でChromeに拡張機能を実装することができます。

拡張機能の編集工程
プログラムの編集結果を反映したい場合、"npm run watch"が実行されていいる間は、プログラムの保存を行うとbuildファイルを自動的に更新します。

開発中の工程は以下の通りになります。

①npm run watchを実行
②プログラムを編集し保存
③chrome拡張機能ページで対象の拡張機能を更新する
②→③→②→③...と繰り返す

まとめ

今回はChrome Extension CLIを使用したプロジェクトの作成～デバッグ方法についてご紹介しました。

使用方法については公式サイトにすべて記載されています。詳細を確認したい方は併せてチェックしてみてください。

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