導入から公開まで13時間!Chrome拡張機能の開発[2of6]

今回作成公開したChrome拡張のコード(ファイル)の構成を以下に示します。

Chrome拡張のコードの構成

HWISCooker
-	manifest.json
-	background.js
-	popup.js
-	popup.html
-	images
	-	HW_19.png
	-	HW_48.png
	-	HW_128.png
-	contentscript.js
-	jquery.js

となっています。

各ファイル(js, html, png)の役割はそれぞれのファイル名が示す通りですが、実際には「manifest.json」が全てを管理しており、役割とファイル名が関連付けられています。

Manifest.jsonのソースコード

{
  "name": "HWISCooker",
  "version": "1.0",
  "description": "Tired of putting your info. eternaly? Use HWISCooker!",
  "icons": {
    "19" : "images/HW_19.png",
    "48" : "images/HW_48.png",
    "128" : "images/HW_128.png"
  },
  "page_action": {
    "default_icon": "images/HW_19.png",
    "default_title": "HWISCooker",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["jquery.js", "background.js"]
  },
  "content_scripts": [ {
    "matches": ["https://www.hellowork.go.jp/servicef/130020.do*"],
    "js": ["jquery.js", "contentscript.js"],
    "run_at" : "document_idle",
    "all_frames": false
  }],
  "manifest_version": 2
}

上記構成で示したファイル名の内、「manifest.json」に明記されないのは「popup.js」だけですが、これはpopup.html内で参照されているからOKなのでしょう。また、jQuery等の補助スクリプトを使いたい場合には、「manifest.json」に明記するようです。

(つづく>>>)

関連する記事

導入から公開まで13時間!Chrome拡張機能の開発[1of6]
導入から公開まで13時間!Chrome拡張機能の開発[2of6]
導入から公開まで13時間!Chrome拡張機能の開発[3of6]
導入から公開まで13時間!Chrome拡張機能の開発[4of6]
導入から公開まで13時間!Chrome拡張機能の開発[5of6]
導入から公開まで13時間!Chrome拡張機能の開発[6of6]

お世話になったリンク

Chrome Extensions API リファレンス
Sample Extensions – Google Chrome Extensions
ぷりんすの開発メモ: Chrome拡張機能のマニフェストVesrsion2対応についてのメモ
ChromeExtensionを作ってみる | ぼんぼるにっき
Chrome Extension でデバッグを行う – 日頃の行い
ハローワークの「求人情報検索」ページ

(つづく)