すぐにChrome拡張機能開発できるオープンソースのテンプレート「Chrome Extension CLI」

◆ Chrome Extension CLI
https://github.com/dutiyesh/chrome-extension-cli

紹介

「Chrome Extension CLI」は、npmを使って簡単にChrome拡張機能の初期セットアップができるオープンソースのテンプレートです。

$ npm install -g chrome-extension-cli

/usr/local/bin/chrome-extension-cli -> /usr/local/lib/node_modules/chrome-extension-cli/index.js
+ chrome-extension-cli@0.2.0
added 21 packages from 11 contributors in 2.879s

まずは、Chrome Extension CLIをインストールします。

$ chrome-extension-cli my-extension

Creating a new Chrome extension in /Users/xxx/my-extension
...
  1. cd my-extension
  2. Run npm run watch
  3. Open chrome://extensions
  4. Check the Developer mode checkbox
  5. Click on the Load unpacked extension button
  6. Select the folder my-extension/build

続いて、プロジェクト名を指定して拡張機能を作成します。

$ cd my-extension
$ npm run watch

...

    background.js ⏤  1.45 kB (+1.45 kB)
 contentScript.js ⏤  1.75 kB (+1.75 kB)
        popup.css ⏤  662 B (+662 B)
         popup.js ⏤  2.15 kB (+2.15 kB)

Built at: 2019/10/15 21:32:19

出来上がったプロジェクトに移動して、ビルドを実行。

chrome://extensions/

拡張機能の画面に移動し、デベロッパーモードをONにします。

すると、Chromeストアのアップロードされていないプロジェクトを読み込むことができるようになります。

先ほど作成したプロジェクトを読み込み

拡張機能がインストールされるのを確認します。

このような拡張機能が表示されれば正しくロードができています。あとは、出来上がったファイルをカスタマイズしていくだけです。

はじめてChrome拡張機能を開発する方にとって、学習コストが軽減されるツールになっています。

◆ Chrome Extension CLI
https://github.com/dutiyesh/chrome-extension-cli