Canadian Devです。

みなさん、Chrome拡張機能を作ってみたことがありますか？ブラウザーについたスクリーンキャプチャーやアドブロッカーなどということです。

Webページを作ったことがあるならとても簡単に作れると思います。

APIをテストするために、自社サービスのウェブAPIと繋がるChrome拡張機能を作ったことがあります。

Chrome拡張機能に使用されたファイルがこうなりました：

- api_test.js
- background_test.js
- icon.png
- jquery.min.js
- manifest.json
- test.html

このリストの中で、必須のファイルはmanifest.jsonだけです。ただのJSONファイルですが、このファイルがないとChromeがちゃんと拡張機能を読み込むことができません。

拡張機能がまずマニフェストを読み込み、そのファイルに書いた設定で拡張機能を立ち上げます。

manifest.jsonが下記のコードのようになります：

{
  "manifest_version": 2,
  "name": “テストChrome拡張機能",
  "description": “This extension is a Chrome extension test“,
  "version": “0.9.1.0”,
  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
  },
  "permissions": [
   "activeTab”,
   "cookies",
   "*://*.qangaroo.jp/*",
   "http://ajax.googleapis.com/"
  ],
  "background": {
    "scripts": [“background_test.js"]
  }
  "content_scripts": [
    {
      "matches": [“*://*.qangaroo.jp/*”],
      "js": [“api_test.js”]
    }
  }
}

上記のコード通り、マニフェストに必要なキーバリューがmanifest_version, nameとversionだけです。

上記はよく使われているキーですが、他のキーやライブラリーもいっぱいあり、かなりコンプレクスな拡張機能を作ることができます。

マニフェスト、html、js、css、画像などのファイルが全て準備できてブラウザーで確認したい場合は、その他のツール > 拡張機能をクリックしてデベロッパーモードがONにしているかを確認した上でパッケージ化されていない拡張機能を読み込むというボタンを押してください。manifest.jsが入っているフォルダーをそのままOpenすると拡張機能が立ち上がります。

簡単ですね！Chrome拡張機能を作ってみませんか？

That’s all, folks!