爆速でChrome拡張機能を作成する

Chrome拡張機能は便利だが、いざ自分が作るとなると覚えることが多くて面倒くさい。
そこで generator-chrome-extension というひな壇生成ツールを使って効率的にChrome拡張機能を作ってみる。

作るもの

https://github.com の背景が真っ赤になる誰得拡張機能

Chrome拡張機能にもいくつか種類があり、今回のように特定のURL(全体でもできるが)で何かを実行したい場合はContent Scriptsと呼ばれるタイプを使う。

インストール

依存ライブラリのインストール

npm install -g yo bower gulp

Chrome拡張機能のコードテンプレートを生成するためのジェネレータをインストール

npm install -g generator-chrome-extension

ひな壇生成

yoはひな壇を生成するコマンド。それ以上でもそれ以下でもない。

mkdir my_extension
cd my_extension
yo chrome-extension

いろいろ質問される。今回はContent Scriptsを作りたいので

? What would you like to call this extension? my_extension
? How would you like to describe this extension? My Chrome Extension <<そのままエンター>>
? Would you like to use UI Action? No <<そのままエンター>>
? Would you like more UI Features? <<Content Scriptsでスペースキー押してエンター>>
? Would you like to set permissions? <<そのままエンター>>

これでひな壇が生成される。いろいろディレクトリがあるが肝心の拡張機能部分はappであることに注意

manifestの設定

デフォルトだとすべてのサイトで動作するが、今回はGithubのサイトのみで動いて欲しいのでmachesの部分も以下に変更

  "content_scripts": [
    {
      "matches": [
        "https://github.com/*"
      ],
    }
  ]

面倒なので最初からJQueryをインストールしておくと吉

bower install jquery --save

  "content_scripts": [
    {
      "js": [
        "bower_components/jquery/dist/jquery.min.js",//　← これをcontentscript.jsより前に追加
        "scripts/contentscript.js"
      ],
    }
  ]

ファイルの編集

いよいよgithubの背景色を赤くする誰得処理を記述する時が来た。編集するファイルはapp/scripts.babel/contentscript.jsでapp/scripts/contentscript.jsではないので注意

app/scripts.babel/contentscript.js

'use strict';

$(function () {
  $('body').css('background-color', '#ff0000');
});

実行

以下のコマンドを実行すると、app/scripts.babel/ 以下のコードをビルドし、
app/scripts/ 以下に実行ファイルを生成してくれる。

gulp watch

その後、Chromeの拡張機能管理画面より「パッケージ化されていない拡張機能を読み込む」でインストール。ディレクトリはさっき生成したappを選択する。

うまく読み込まれれば https://github.com/ を開くと赤く染まったGithubがオデムカエしてくれる。

開発するときのTips

開発するときは当たり前だが何度もコードを書き換える。その都度再インストールしてたらやってられない。 generator-chrome-extension ではそこもカバーしてくれており、以下のコマンドを実行すると

gulp watch

「何かコードを修正したら、それを検知してビルドを行い、さらにChromeに再読み込みさせる」をリアルタイムで実行してくれる。