Chrome拡張機能を作ってみました！ | GROUP DEV BLOG

2018.05.30

プログラミング

Chrome拡張機能を作ってみました！

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": 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だけです。

manifest_version: ※必須	現在、この値は必ず２にしないといけません。
version: ※必須	拡張機能のバージョンです。クロームストアにアップロードすることになる場合は更新する度にバージョンを必ず上げないといけないので、なるべく低いバージョンにする方がいいと思います。
name: ※必須	拡張機能の名前。
description:	拡張機能についての説明。
browser_action:	このキーバリューでブラウザーに拡張ボタンが作られます。画像を入れたい場合はdefault_iconのところにパスを指定し、そのボタンを押すと`default_popup`で指定された`html`ファイルが表示されます。
permissions:	拡張機能に権限を与える場合はここに指定します。値が配列です。拡張機能がクッキーやセッションなどをアクセスしたり、ブラウザーライブラリーを使用したい場合はここに指定してください。
background:	このキーは、Webページと関係なく、ずっと維持する必要のあるjsスクリプトが入ります。
content_scripts:	このキーは配列であり、特定なWebページにスクリプトを読み込みたい場合に指定します。配列の中にある各オブジェクトに二つのキーがあります: jsとmatches。jsのキーはjsファイルが入った配列で、 matchesのキーはURLパターンが入り、このマッチに当てはまるURLにjsファイルが読み込まれます。

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

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

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

That’s all, folks!

【テクノモバイルではエンジニア/デザイナーを積極採用中です！】

下記項目に1つでも当てはまる方は是非、詳細ページへ！

自分でアプリを作ってみたい
ITで世の中にワクワクを生み出したい
使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら

Qangaroo（カンガルー）

徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
テストの進捗が見える。開発がスマートに進む。
クラウド型テスト管理ツール『Qangaroo（カンガルー）』

https://qangaroo.jp/