特定のページだけで動作するChromeの拡張が作りたくなったので作ってみました。

ソースはGitHubで公開しています。(https://github.com/MCO-APPS/chrome-extention-sample

Chrome拡張はJSで作る

とっつきにくそうな印象ですが、Chrome拡張はJavaScriptで作ります。なので普段からWeb開発に携わっている人であれば意外と簡単に作ることができます。

今回作るのは「特定のページを表示する時に自動的に動作する機能」です。ブラウザの右上にボタンが出てきて押したら〜みたいなやつはLIGさんのブログあたりが分かりやすいかと思います。

ディレクトリ構成は以下の様な感じ。

スクリーンショット 2016-03-09 19.07.31

※LICENSEとREADMEはGitHub用なので実際は不要です。

 

manifest.json

manifest.json は拡張機能の情報や設定を記述するファイルです。名前や説明文等もmanifest.jsonに記述します。以下は最低限必要なものだけを記述したものです。

 

<説明>

  • manifest_version・・・マニフェストの様式のバージョンです。拡張機能(プログラム)のバージョンではないのでご注意を。2016年3月9日時点ではバージョン2というものが使用されています。
  • name・・・拡張機能の名称です。
  • version・・・拡張機能のバージョンです。アップデートの度に数字を大きくします。”1″、”1.0″、”2.10.2″、”3.1.2.4567″といった形式の他に”1.0 beta”、”build rc2″といった形式も使用できます。
  • description・・・拡張機能の説明です。
  • icons・・・アイコン画像です。16px、48px、128pxの3種類があります。
    • 16・・・拡張機能のページのファビコンに使用されます。
    • 48・・・拡張機能の管理ページ(chrome://extensions)で使用されます。
    • 128・・・Chromeウェブストアで使用されます。
  • content_scripts・・・拡張機能を動作させるURLやスクリプトを指定します。
    • matches・・・拡張機能を動作させるURLを指定します。アスタリスクでワイルドカード指定可能です。
    • css・・・マッチしたページに追加で読み込ませるCSSファイルのパスを指定します。
    • js・・・マッチしたページに追加で読み込ませるJavaScriptファイルのパスを指定します。

今回は省略していますが、著者名等も指定できます。

https://developer.chrome.com/extensions/manifest

 

スクリプトを書く

マニフェストの content_scripts.js で指定したパスにJSのファイルを設置して下さい。JSファイルに記述したものがそのまま実行されます。

今回はjQueryも使用しています。ページ本体でもjQueryを使用していたら衝突しないの?と思われるかもしれませんが、大丈夫です。ContentScriptはページ本体のJSとは別の空間で実行されるようなイメージなので、お互いのスクリプトが干渉することはありません。

<サンプル>

 

Yahoo!のページ内のaタグを取得してガタガタにするという意味不明なサンプルです。(マニフェストで matches に http://www.yahoo.co.jp/* を指定しています)

今回は使用していませんが、Chrome拡張では「Chrome.* API」という、通常のJSだけでは出来ないようなことが出来るAPIも用意されています。興味のある人は公式ガイドをご覧ください。

https://developer.chrome.com/extensions/api_index

 

Chromeに読み込ませる

開発した拡張機能をテストするにはChromeに読み込ませる必要があります。まずは拡張機能の管理ページ(chrome://extensions/)を開いて下さい。

右上の「デベロッパーモード」にチェックを入れると「パッケージ化されていない拡張機能を読み込む」というボタンが表示されます。

スクリーンショット 2016-03-09 18.58.50

 

「パッケージ化されていない拡張機能を読み込む」をクリックして拡張機能を開発しているディレクトリを指定すると一覧に追加されます。

スクリーンショット 2016-03-09 18.59.19

これでYahoo!にアクセスするとスクリプトが実行されるはずです。なお、スクリプトを修正した場合は都度「リロード」リンクをクリックしないと反映されないので注意。

 

動作確認

拡張機能を読み込んだ状態でYahoo!にアクセスしてみます。

スクリーンショット 2016-03-09 19.00.23

できました!ガッタガタにしてやりました!CSSでaタグの文字色も指定しているので赤くなっています。

 

Chromeウェブストアに公開する

作った拡張機能を公開したい場合は下記の手順で公開できます。はじめに5ドルかかりますが、一度支払った後は追加費用は掛かりません。

  1. Chromeに読み込ませる時と同じディレクトリを丸ごとZIP圧縮しておきます。
  2. デベロッパーダッシュボードにアクセス
  3. 画面の指示に従って5ドル支払います。
  4. 「新しいアイテムを追加する」ボタンをクリックしてZIPファイルをアップロード
  5. 画面に表示されるフォームに情報を入力して公開。(スクリーンショット等が必要です。)