今回作成公開したChrome拡張のコード(ファイル)の構成を以下に示します。
Chrome拡張のコードの構成
HWISCooker - manifest.json - background.js - popup.js - popup.html - images - HW_19.jpg - HW_48.jpg - HW_128.jpg - 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.jpg", "48" : "images/HW_48.jpg", "128" : "images/HW_128.jpg" }, "page_action": { "default_icon": "images/HW_19.jpg", "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 でデバッグを行う – 日頃の行い
ハローワークの「求人情報検索」ページ
(つづく)