manifest.jsonについて

manifest.jsonとは

Webアプリケーションの情報を提供するJSONファイルです。主にPWA(プログレッシブウェブアプリケーション）に使用されます。

※PWAは、ネイティブアプリのような機能を提供するWebアプリで、オフラインでの利用、プッシュ通知、ホーム画面への追加などができます。

また、manifest.jsonは、Webアプリのアプリ名、アイコン、デフォルトのスタートページ、スクリーンの表示形式など、アプリケーションに関する様々な情報を含んでいます。これにより、ユーザーがWebアプリをPWAとして追加できるようになります。

基本設定

{
  "manifest_version": "3", // マニフェストのバージョン
  "name": "My App", // アプリ名
  "short_name": "App", // アプリ名の短縮名
  "version": "0.1.0", // 拡張機能自体のバージョン
  "description": "拡張機能の説明文",
  "icons": [
    {
      "src": "images/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }
  ]
}

name : 45 文字まで。

version : 拡張機能の自動更新機能でバージョンが差がチェックされるので、更新の際には既存のバージョンより大きい値にする必要があります。

icons : 16x16 , 48x48,128x128 のサイズの.png画像の設定推奨されています。

オプション

{
  "action": { //拡張機能のアイコンをクリックしたときに動作するものを設定
    "default_icon": "popup128.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [ // 拡張機能がWebページに埋め込むスクリプトの設定を行う
    {
      "matches": ["https://xxx.com/*"],
      "js": ["script.js"],
      "run_at": "document_end" // content scriptが実行されるタイミングを指定
    }
  ],
  "background": { // バックグラウンドでJSを動かす
    "service_worker": "background.js",
    "type": "module" //　オプションとして渡す
  },
}

action : default_popupにhtmlファイルを設定することで、拡張機能のアイコンをクリック時にそのhtmlのポップアップを設定することができます。default_iconにはブラウザの右上に出すアイコンを設定します。

content_scripts : 表示しているWebページの詳細を読み取ったり、DOM操作したり、親の拡張機能に情報を渡したりする目的がある場合設定します。matchesにコンテンツスクリプトが挿入されるページを指定。"run_at": "document_end"で、documentの解析が完了してDOMが構築された後に実行されることを示しています。

background : 拡張機能のバックグラウンドで実行するスクリプトを指定するキーです。他のスクリプトやUIからのイベントを受け取ることができます。