5分で作るChrome拡張機能 #JavaScript

株式会社アンティー・ファクトリー、株式会社アンティー・システムのXA（マークアップエンジニアチームの名称）メンバーによるAdvent Calendar __11日目__担当の@k__watanabeです。

普段からなにかとお世話になっている__Chrome拡張機能（エクステンション）__ですが、そういえば自分で作ったことがなかったので、この機会に作ってみました。
Chrome ウェブストア - 拡張機能

クオリティの高いものを作り込んで、__Chromeウェブストア__に公開するとなると、技術や時間、登録料などもかかり大変そうですが、とりあえずローカルで動かすまでをゴールとしたら5分で作れそうです。
What are extensions? - Google Chrome

サンプルが豊富なので助かります。
Sample Extensions - Google Chrome

機能の内容は、拡張機能の動作が、かんたんに確認できるものにしたいと思います。
（※以下、見出しの数字は所要時間の目安です。）

##00:00〜01:29 ファイル構成

本当に最低限ですから、まあ、こんなかんじでファイルを用意します。

.
├── css
│   └── style.css
├── img
│   └── icon.png
├── js
│   ├── background.js
│   └── jquery-3.2.1.min.js
└── manifest.json

01:30〜02:29 manifest.json

このファイルだけあればなんとかなるぞ（？）ファイルmanifest.jsonの中身を書きます。

manifest.json


{
  "name": "拡張機能の名前",
  "description": "拡張機能の説明",
  "version": "1.0",
  "content_scripts": [{
    "js": ["js/jquery-3.2.1.min.js", "js/background.js"],
    "css": ["css/style.css"],
    "matches": ["http://*/*", "https://*/*"]
  }],
  "browser_action": {
    "default_icon": "拡張機能のアイコン画像",
    "default_title": "ツールバーのアイコンにマウスオーバーで表示されるツールチップ"
  },
  "manifest_version": 2
}

本当は、ChromeのAPIの利用やDOM操作、動作状況などに違いのあるcontent-scriptsやbackgroundを適切に使い分けたり、default_popupでポップアップ用のhtmlを設定したりなど、いろいろありますが、ここでは割愛します。
JavaScript APIs - Google Chrome

02:30〜03:29　処理の内容を書く

いよいよ処理の内容を書きます。
動作が確認できればよいので、CSSで背景色を変更したり、JavaScriptでalertする程度のものでもよいのですが、style.cssとbackground.jsとicon.pngはサンプルを用意しておきました。
料理番組でよくある__「…で、半日冷蔵庫で寝かしたのがこちらですね〜」__というアレなのでズルではないです。
https://github.com/p-toro/isaykai

03:30〜04:59　Chromeに拡張機能を読み込ませる

Chromeのアドレスバーにchrome://extensions/と入力しEnter。
__「デベロッパーモード」にチェックを入れると、「パッケージ化されていない拡張機能を読み込む…」__ボタンが出現しますので、それをクリックし、用意したフォルダを選択します。
※サンプルの場合、buildを読み込んでもらえればオッケーです。

05:00　完成

なんとか間に合いました。
ツールバーの拡張機能のアイコンが並んだエリアに今回追加したアイコンが追加されていることが確認できると思います。

今回はアイコンからのオンオフ切り替え機能はなく、常に動作しているだけの仕様なので、__有効__のチェックボックスをチェックして（ツールバーのアイコンをクリックして）好きなサイトを開けば、拡張機能の動作が確認できると思います。

サンプルで試された方は、見慣れたオシャレなあのサイトが、昔懐かしい__愛○会__のようなシンプルで力強いデザインに変更されたのではないでしょうか？

まとめ

案件によっては気をつけなければならない独自のチェック項目があったりします。
たとえばCMSに取り込むための独特なファイルパスであったり、画面表示だけでは確認しにくい独自データ属性などです。
そういった項目をチェックする拡張機能を作ってチームで共有するというのも、よいかもしれませんね。

5分で作るChrome拡張機能

01:30〜02:29 manifest.json

02:30〜03:29 処理の内容を書く

03:30〜04:59 Chromeに拡張機能を読み込ませる

05:00 完成

まとめ

02:30〜03:29　処理の内容を書く

03:30〜04:59　Chromeに拡張機能を読み込ませる

05:00　完成