見出し画像

chrome拡張機能の開発(備忘)② manifest.jsonの書き方

若干勉強が進んだので(汗)2回目です。

今回は「manifest.json」を作っていきたいと思います。
しかし公式ドキュメントもいまいちようわからんので
ハードルが一気に上がりますね(;'∀')

タイトルはchrome拡張にしていますがEdgeでも動くようにしました。(firefoxは未確認だけどいけるはず)
Edgeのが必須項目が多いのかChromeで動いてたものを
そのまんま持ってきたらエラーになっちゃいました。

説明はソース内に記載しています。(見づらくてすみません)

{
   "name": "Test Sample", //拡張機能名(必須)
   "version": "1.0", //バージョン(必須)
   "description": "Build an Extension!", //拡張機能の説明(必須)
   "permissions": ["tabs"], //使用するAPI(任意)
   "background": { //バックグラウンドで動かす場合は記載
     "scripts": ["background.js"], //呼び出すjsファイル名
     "persistent": false //true:常に実行(falseが推奨)
   },
   "page_action": { //指定のページのみのアクション
       "default_popup": "./popup.html", //デフォルトで呼び出されるhtml
       "default_icon": {
           "19": "./hello_extensions.png" //バーに表示されるicon(19pxが必須)
       } 
   },
   "author": "Aoko", //所有者名
   "manifest_version": 2 //マニフェストファイル自身のバージョン(2が最新)
 }

今回は所定のページのみ動かしたいので
backgroundでurl監視→page_action実行の動作にしていますが
どのページでも動かしたい場合はbackgroundなし
page_action→browser_actionにするとページでも動くようになります。
(下記参照)

{
   "name": "Test Sample",
   "version": "1.0",
   "description": "Build an Extension!",
   "permissions": ["tabs"],
   "browser_action": {
       "default_popup": "./popup.html",
       "default_icon": {
           "19": "./hello_extensions.png"
       } 
   },
   "author": "Aoko",
   "manifest_version": 2
 }

ウェブストアに公開するのであれば
もう少し設定がいりそうですがひとまず最低限の記載を上げました。

参考にさせていただきました。


この記事が気に入ったらサポートをしてみませんか?