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


コメントを読む

新着ピック  






















新着ニュース

AWS WAFV2でIPアドレス制限してみた | Developers.IO

ハードウェアスタートアップがクラファンで音楽制作に新鮮な息吹を吹き込む | TechCrunch Japan

サーバーレス開発モニタリングのEpsagonが17億円超を調達 | TechCrunch Japan

「iPad(第7世代)」向けケース・カバーの選び方とおすすめ製品3選【2020年最新版】

AWS Backupに新機能 EC2インスタンスをEBSごとバックアップ/リストア可能に クロスリージョンにも対応

AIを活用した観光タクシーの相乗りサービス--JR東日本子会社ら新潟で実証実験

[レポート] 冗長化、永続化、ログ… Prometheus を拡張するエコシステムについて Meetup で聞いてきた #prometheustokyo | Developers.IO

NTTデータ、レジ無しデジタル店舗出店サービス「Catch&Go」を強化

日本発の地質時代「チバニアン」誕生 国際地質科学連合が正式決定

Chromeブラウザに統合メディアコントロール機能が加わる | TechCrunch Japan

昆虫食スタートアップのエリーが東京・表参道に蚕バーガー店をオープン | TechCrunch Japan

[レポート] 15分以内にデータベースを使用したフルスタックのWebアプリケーションを作成する #Workshop #DAT330 #reinvnet 2019 | Developers.IO

PayPay、金融サービス参入へ 後払い、保険、ローン、投資など年内にも開始 “スーパーアプリ化”へ準備着々

非テック企業がCESで注目を集めた理由 パワードスーツだけじゃないデルタ航空のイノベーション

12月の楽天モバイル通信障害、全回線の2割に影響 原因は「デッドロック」

ファミマが「第2回うまいパン決定戦」を開催 山パンがむき出しにした「全国制覇」の野望

映像から複数人の激しい動きを解析、東大とドコモが技術開発 ディープラーニング活用

AR謎解きゲーム「PSYCHO-PASS サイコパス 渋谷サイコハザード」が1月21日より開催 | TechCrunch Japan

「LiVR」でAKB48グループの劇場公演をVRライブ配信--“超神席”で鑑賞可能に

Alphabetが初の時価総額1兆ドル超え、投資家はサンダー・ピチャイがお気に入り | TechCrunch Japan

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

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