すぐに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


コメントを読む

新着ピック  






















新着ニュース

【都市封鎖に備える】 オフィスにあるデスクトップに自宅からリモートアクセスして業務継続する方法 【完結・RRAS編】 | Developers.IO

AppSyncのクエリからStep Functionsのステートマシンを起動して時間のかかる処理を非同期に実行する | Developers.IO

クラスメソッドに新卒入社し10年目になるワイがキャリアや思い出を振り返り、そして卒業する | Developers.IO

君もクラメソオフィス(仮想)からオンライン会議に参加できるぞ!Lens StudioでオリジナルのLensを作成する方法 | Developers.IO

既存の S3 バケットでオブジェクトロックを有効化する手順 | Developers.IO

ドコモショップ六本木店のスタッフが新型コロナに感染--九州支社の社員も陽性

SIMフリースマホの「SIMフリー」って何? 気を付けるべき点は?【2020年最新版】

XplentyからAmazon Redshiftに接続してみた | Developers.IO

Zoombombingは犯罪 米司法省が警告

Zoom、北米のWeb会議の暗号キーを誤って中国データセンター経由にした問題について説明

[アップデート] CloudWatch Contributor Insights が一般利用可能になりました | Developers.IO

Zoom、パスワード強化と「待機室」追加 “Zoombombing”対策で

“半開き”で撮れるのが便利で面白い 「Galaxy Z Flip」のカメラで遊んでみた

2020年3月にリニューアルしたDevelopers.IOの変更点をインフラ側から紹介します | Developers.IO

【都市封鎖に備える】 オフィスにあるデスクトップに自宅からリモートアクセスして業務継続する方法 【SSTP編】 | Developers.IO

DataStaxがCassandraデータベースのためのKubernetesオペレーターをローンチ | TechCrunch Japan

GMとHondaが2024年発売の電気自動車2モデルを共同開発 | TechCrunch Japan

不況を生き延びたいならプラットフォームフォーマーを目指せ! | TechCrunch Japan

DB インスタンスのフェイルオーバーが発生しました。原因を特定する方法を教えてください。 | Developers.IO

「ポータブルテレビ」おすすめ3選 お風呂やキッチンで大活躍!【2020年最新版】

もっと見る
記事をPICKする
会員登録
Register
記事をPICKする

会員登録すると、もっと便利に利用できます。