manifest.json code example

Example 1: manifest.json chrome

{
  // Required
  "manifest_version": 2,
  "name": "My Extension",
  "version": "versionString",

  // Recommended
  "default_locale": "en",
  "description": "A plain text description",
  "icons": {...},

  // Pick one (or none)
  "browser_action": {...},
  "page_action": {...},

  // Optional
  "action": ...,
  "author": ...,
  "automation": ...,
  "background": {
    // Recommended
    "persistent": false,
    // Optional
    "service_worker":
  },
  "chrome_settings_overrides": {...},
  "chrome_url_overrides": {...},
  "commands": {...},
  "content_capabilities": ...,
  "content_scripts": [{...}],
  "content_security_policy": "policyString",
  "converted_from_user_script": ...,
  "current_locale": ...,
  "declarative_net_request": ...,
  "devtools_page": "devtools.html",
  "differential_fingerprint": ...,
  "event_rules": [{...}],
  "externally_connectable": {
    "matches": ["*://*.example.com/*"]
  },
  "file_browser_handlers": [...],
  "file_system_provider_capabilities": {
    "configurable": true,
    "multiple_mounts": true,
    "source": "network"
  },
  "homepage_url": "http://path/to/homepage",
  "host_permissions": ...,
  "import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
  "incognito": "spanning, split, or not_allowed",
  "input_components": ...,
  "key": "publicKey",
  "minimum_chrome_version": "versionString",
  "nacl_modules": [...],
  "natively_connectable": ...,
  "oauth2": ...,
  "offline_enabled": true,
  "omnibox": {
    "keyword": "aString"
  },
  "optional_permissions": ["tabs"],
  "options_page": "options.html",
  "options_ui": {
    "chrome_style": true,
    "page": "options.html"
  },
  "permissions": ["tabs"],
  "platforms": ...,
  "replacement_web_app": ...,
  "requirements": {...},
  "sandbox": [...],
  "short_name": "Short Name",
  "signature": ...,
  "spellcheck": ...,
  "storage": {
    "managed_schema": "schema.json"
  },
  "system_indicator": ...,
  "tts_engine": {...},
  "update_url": "http://path/to/updateInfo.xml",
  "version_name": "aString",
  "web_accessible_resources": [...]
}

Example 2: manifest for pwa

{  "short_name": "WAM",  "name": "Web App Manifest",  "theme_color": "#eb5252",  "background_color": "#000000",  "display": "fullscreen",  "Scope": "/",  "orientation": "portrait",  "icons": [    {      "src": "images/android/android-launchericon-48-48.png",      "type": "image/png",      "sizes": "48x48"    },    {      "src": "images/android/android-launchericon-96-96.png",      "type": "image/png",      "sizes": "96x96"    },    {      "src": "images/android/android-launchericon-192-192.png",      "type": "image/png",      "sizes": "192x192"    }  ],  "start_url": "index.html?utm_source=homescreen"}

Example 3: manifest.webmanifest example

{  "short_name": "Weather",  "name": "Weather: Do I need an umbrella?",  "description": "Weather forecast information",  "icons": [    {      "src": "/images/icons-192.png",      "type": "image/png",      "sizes": "192x192"    },    {      "src": "/images/icons-512.png",      "type": "image/png",      "sizes": "512x512"    }  ],  "start_url": "/?source=pwa",  "background_color": "#3367D6",  "display": "standalone",  "scope": "/",  "theme_color": "#3367D6",  "shortcuts": [    {      "name": "How's weather today?",      "short_name": "Today",      "description": "View weather information for today",      "url": "/today?source=pwa",      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]    },    {      "name": "How's weather tomorrow?",      "short_name": "Tomorrow",      "description": "View weather information for tomorrow",      "url": "/tomorrow?source=pwa",      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]    }  ]}

Example 4: manifest.json basic structure

//this is the basic structure of the manifest.json of browser extensions
{
    "name":"demo",
    "version":"1.1",
    "manifest_version":2,

    "description":"a demo extesion for learning purpose",
    "browser_action":{
        "default_title":"a demo title",
        "default_popup":"popup.html"
    },
    "permissions": ["http://*", "https://*" ]
}

Example 5: manifest.json

# manifest.json in your react project inside public folder

This provides application metadata for Progressive Web Apps. For
example, the file allows installation of your application on a mobile phone’s home
screen, similar to native apps. It contains the app name, icons, theme colors, and other
data needed to make your app installable.