[{"data":1,"prerenderedAt":1283},["ShallowReactive",2],{"blog-post-en-how-to-create-manifest-json":3,"surround-\u002Fen\u002Fblog\u002Fhow-to-create-manifest-json":1276},{"id":4,"title":5,"author":6,"body":7,"category":1254,"date":1255,"description":1256,"draft":1257,"extension":1258,"h1":14,"image":1259,"lastmod":1255,"locales":1260,"meta":1262,"navigation":1263,"path":1264,"promo":1265,"seo":1269,"stem":1270,"tags":1271,"__hash__":1275},"blog\u002Fen\u002Fblog\u002Fhow-to-create-manifest-json.md","How to Create a manifest.json File: PWA & Chrome Examples","JSON Toolbox Team",{"type":8,"value":9,"toc":1218},"minimark",[10,15,24,34,43,48,54,57,124,127,143,146,150,160,163,229,244,251,255,260,281,285,342,346,363,367,377,383,387,390,398,405,409,416,423,436,440,579,586,590,596,623,626,658,662,666,674,678,727,731,751,754,760,774,778,802,805,809,938,942,945,956,965,975,983,986,999,1003,1006,1051,1054,1058,1062,1076,1080,1083,1087,1103,1107,1115,1119,1128,1132,1148,1152,1162,1166,1209,1212],[11,12,14],"h1",{"id":13},"how-to-create-a-manifestjson-file-pwa-and-chrome-extension-examples","How to Create a manifest.json File: PWA and Chrome Extension Examples",[16,17,18,19,23],"p",{},"Two developers can search \"how to create a manifest.json file\" and need completely different files. One is adding install support to a website. The other is publishing a Chrome extension. Both files are named ",[20,21,22],"code",{},"manifest.json",". Almost nothing else about them is the same.",[16,25,26,27,33],{},"That is the key idea: ",[28,29,30,32],"strong",{},[20,31,22],{}," is a filename convention, not a format."," The file is ordinary JSON; what matters is the specification the consumer expects. This guide covers the two specs you are most likely to need — the W3C Web App Manifest (PWA) and the Chrome Extension Manifest V3 — with minimal working examples, the fields each one requires, and how to debug them when a browser refuses to load them.",[16,35,36,37,42],{},"If you are new to JSON files themselves, start with ",[38,39,41],"a",{"href":40},"\u002Fblog\u002Fhow-to-create-json-file","How to Create a JSON File"," for the syntax rules and saving steps, then come back here.",[44,45,47],"h2",{"id":46},"what-is-a-manifestjson-file","What is a manifest.json file?",[16,49,50,51,53],{},"A ",[20,52,22],{}," is a JSON file that describes an application to the software that runs it: its name, icons, entry point, permissions, and display behavior.",[16,55,56],{},"The same filename is used by several unrelated ecosystems:",[58,59,60,76],"table",{},[61,62,63],"thead",{},[64,65,66,70,73],"tr",{},[67,68,69],"th",{},"Kind of manifest",[67,71,72],{},"Who reads it",[67,74,75],{},"Purpose",[77,78,79,91,102,113],"tbody",{},[64,80,81,85,88],{},[82,83,84],"td",{},"Web App Manifest",[82,86,87],{},"Browsers",[82,89,90],{},"Makes a site installable as a PWA",[64,92,93,96,99],{},[82,94,95],{},"Extension manifest",[82,97,98],{},"Chrome, Edge, Firefox",[82,100,101],{},"Declares an extension's metadata, scripts, and permissions",[64,103,104,107,110],{},[82,105,106],{},"Framework manifest",[82,108,109],{},"Next.js and similar tools",[82,111,112],{},"Generated or consumed by the framework",[64,114,115,118,121],{},[82,116,117],{},"Platform manifest",[82,119,120],{},"Game mods, plugins, cloud services",[82,122,123],{},"Platform-specific packaging metadata",[16,125,126],{},"Two rules hold across all of them:",[128,129,130,137],"ol",{},[131,132,133,136],"li",{},[28,134,135],{},"The file is JSON."," No comments, no trailing commas, double-quoted keys, UTF-8. A file that is valid JSON can still be rejected, but a file that is not valid JSON is always rejected.",[131,138,139,142],{},[28,140,141],{},"The spec decides the fields."," Copying a Chrome extension's manifest into a PWA does nothing useful — the structures are not interchangeable.",[16,144,145],{},"Because these files are edited by hand and read by strict parsers, the same three problems come up constantly: a trailing comma, a comment someone added for documentation, and an icon path that 404s.",[44,147,149],{"id":148},"web-app-manifest-pwa-what-it-is-and-when-you-need-it","Web App Manifest (PWA): what it is and when you need it",[16,151,152,153,159],{},"The ",[38,154,158],{"href":155,"rel":156},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fappmanifest\u002F",[157],"nofollow","Web Application Manifest"," is a W3C specification: a JSON file that tells the browser how your app should look and behave when installed.",[16,161,162],{},"It declares:",[164,165,166,180,186,195,218],"ul",{},[131,167,168,171,172,175,176,179],{},[28,169,170],{},"Identity:"," ",[20,173,174],{},"name"," and ",[20,177,178],{},"short_name",".",[131,181,182,185],{},[28,183,184],{},"Icons:"," sizes the browser uses for the home screen, taskbar, and splash screen.",[131,187,188,171,191,194],{},[28,189,190],{},"Entry point:",[20,192,193],{},"start_url"," — what opens when the app is launched.",[131,196,197,171,200,203,204,207,208,207,211,214,215,179],{},[28,198,199],{},"Display:",[20,201,202],{},"display"," — ",[20,205,206],{},"standalone",", ",[20,209,210],{},"fullscreen",[20,212,213],{},"minimal-ui",", or ",[20,216,217],{},"browser",[131,219,220,171,223,175,226,179],{},[28,221,222],{},"Colors:",[20,224,225],{},"theme_color",[20,227,228],{},"background_color",[16,230,231,232,237,238,243],{},"You need one if you want your site to be installable — added to a phone's home screen or a desktop dock and opened in its own window instead of a browser tab. MDN's ",[38,233,236],{"href":234,"rel":235},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FManifest",[157],"Web app manifests"," guide and web.dev's ",[38,239,242],{"href":240,"rel":241},"https:\u002F\u002Fweb.dev\u002Flearn\u002Fpwa\u002Fweb-app-manifest",[157],"web app manifest"," tutorial are the reference material.",[16,245,246,247,250],{},"You do ",[28,248,249],{},"not"," need one for a site that should stay a website.",[44,252,254],{"id":253},"how-to-create-a-manifestjson-for-a-pwa","How to create a manifest.json for a PWA",[256,257,259],"h3",{"id":258},"step-1-create-the-file","Step 1: Create the file",[16,261,262,263,265,266,269,270,273,274,277,278,179],{},"Create ",[20,264,22],{}," in your site's public root (or ",[20,267,268],{},"manifest.webmanifest"," — see the FAQ). For a project that serves ",[20,271,272],{},"public\u002F"," statically, that is ",[20,275,276],{},"public\u002Fmanifest.json",", which becomes ",[20,279,280],{},"\u002Fmanifest.json",[256,282,284],{"id":283},"step-2-add-the-required-fields","Step 2: Add the required fields",[58,286,287,297],{},[61,288,289],{},[64,290,291,294],{},[67,292,293],{},"Field",[67,295,296],{},"Why it is needed",[77,298,299,311,321,330],{},[64,300,301,308],{},[82,302,303,305,306],{},[20,304,174],{}," or ",[20,307,178],{},[82,309,310],{},"The label shown under the icon and in the install dialog",[64,312,313,318],{},[82,314,315],{},[20,316,317],{},"icons",[82,319,320],{},"At minimum a 192px and a 512px PNG",[64,322,323,327],{},[82,324,325],{},[20,326,193],{},[82,328,329],{},"The page that opens when the app launches",[64,331,332,336],{},[82,333,334],{},[20,335,202],{},[82,337,338,339,341],{},"Whether the app gets its own window; ",[20,340,206],{}," is the common choice",[256,343,345],{"id":344},"step-3-add-the-recommended-fields","Step 3: Add the recommended fields",[16,347,348,207,351,207,353,207,355,358,359,362],{},[20,349,350],{},"description",[20,352,225],{},[20,354,228],{},[20,356,357],{},"orientation",", and ",[20,360,361],{},"screenshots"," improve the install experience and are quick to add.",[256,364,366],{"id":365},"step-4-write-the-manifest","Step 4: Write the manifest",[368,369,375],"pre",{"className":370,"code":372,"language":373,"meta":374},[371],"language-json","{\n  \"name\": \"JSON Toolbox\",\n  \"short_name\": \"JSON Toolbox\",\n  \"description\": \"Free, browser-based JSON tools for developers.\",\n  \"start_url\": \"\u002F\",\n  \"scope\": \"\u002F\",\n  \"display\": \"standalone\",\n  \"background_color\": \"#ffffff\",\n  \"theme_color\": \"#0284c7\",\n  \"orientation\": \"portrait-primary\",\n  \"icons\": [\n    {\n      \"src\": \"\u002Ficons\u002Ficon-192.png\",\n      \"sizes\": \"192x192\",\n      \"type\": \"image\u002Fpng\",\n      \"purpose\": \"any\"\n    },\n    {\n      \"src\": \"\u002Ficons\u002Ficon-512.png\",\n      \"sizes\": \"512x512\",\n      \"type\": \"image\u002Fpng\",\n      \"purpose\": \"any\"\n    },\n    {\n      \"src\": \"\u002Ficons\u002Fmaskable-512.png\",\n      \"sizes\": \"512x512\",\n      \"type\": \"image\u002Fpng\",\n      \"purpose\": \"maskable\"\n    }\n  ]\n}\n","json","",[20,376,372],{"__ignoreMap":374},[16,378,379,382],{},[20,380,381],{},"purpose: \"maskable\""," is optional but worth having: it tells Android the icon has safe padding, so the OS can crop it into a shape without cutting off your logo.",[256,384,386],{"id":385},"step-5-link-it-from-your-html","Step 5: Link it from your HTML",[16,388,389],{},"The manifest does nothing until a page points at it:",[368,391,396],{"className":392,"code":394,"language":395,"meta":374},[393],"language-html","\u003Clink rel=\"manifest\" href=\"\u002Fmanifest.json\">\n","html",[20,397,394],{"__ignoreMap":374},[16,399,400,401,404],{},"Put it in the ",[20,402,403],{},"\u003Chead>"," of every page you want installable — or at least your entry page.",[256,406,408],{"id":407},"step-6-serve-it-over-https-and-test","Step 6: Serve it over HTTPS and test",[16,410,411,412,415],{},"Browsers only offer installation in a secure context, so the manifest and the site must be served over HTTPS in production (",[20,413,414],{},"localhost"," counts as secure for development).",[16,417,418,419,422],{},"To verify, open DevTools → ",[28,420,421],{},"Application → Manifest",". Chrome shows the parsed fields, flags missing icons, and reports whether the page meets its installability criteria. That panel is far faster than guessing: it names the exact field that is missing.",[16,424,425,426,305,428,430,431,207,433,435],{},"Chrome's criteria include an HTTPS origin, a manifest with ",[20,427,174],{},[20,429,178],{},", 192px and 512px icons, ",[20,432,193],{},[20,434,202],{},", and a registered service worker with a fetch handler. The set has changed across Chrome versions, so treat the DevTools panel as the source of truth rather than any single article — including this one.",[44,437,439],{"id":438},"common-mistakes-when-creating-a-pwa-manifest","Common mistakes when creating a PWA manifest",[58,441,442,455],{},[61,443,444],{},[64,445,446,449,452],{},[67,447,448],{},"Symptom",[67,450,451],{},"Likely cause",[67,453,454],{},"Fix",[77,456,457,473,491,509,526,541,557],{},[64,458,459,462,465],{},[82,460,461],{},"\"Manifest: Line: 1, column: 1, Syntax error\"",[82,463,464],{},"Invalid JSON — usually a trailing comma or a comment",[82,466,467,468,472],{},"Remove it, or paste the file into ",[38,469,471],{"href":470},"\u002Ftools\u002Fformat\u002Fjson-repair","JSON Repair"," to clean it up",[64,474,475,478,485],{},[82,476,477],{},"DevTools shows no manifest at all",[82,479,480,481,484],{},"Missing or wrong ",[20,482,483],{},"\u003Clink rel=\"manifest\">"," path",[82,486,487,488],{},"Use an absolute path: ",[20,489,490],{},"href=\"\u002Fmanifest.json\"",[64,492,493,496,503],{},[82,494,495],{},"Manifest fetched but not parsed",[82,497,498,499,502],{},"Server returned ",[20,500,501],{},"text\u002Fhtml"," — usually a 404 page or a SPA fallback",[82,504,505,506,508],{},"Make sure ",[20,507,280],{}," is served as JSON, not your index.html",[64,510,511,514,523],{},[82,512,513],{},"Install prompt never appears",[82,515,516,517,519,520,522],{},"Missing 192px or 512px icon, missing ",[20,518,193],{},"\u002F",[20,521,202],{},", not HTTPS, or no service worker with a fetch handler",[82,524,525],{},"Check the Installability section in DevTools",[64,527,528,531,538],{},[82,529,530],{},"Icon looks broken or cropped",[82,532,533,534,537],{},"Wrong icon path, or no ",[20,535,536],{},"maskable"," icon",[82,539,540],{},"Use absolute paths; add a maskable icon with padding",[64,542,543,546,551],{},[82,544,545],{},"App opens the wrong page",[82,547,548,550],{},[20,549,193],{}," relative to the manifest, not the HTML",[82,552,553,554,556],{},"Start it with ",[20,555,519],{}," and confirm it resolves",[64,558,559,562,572],{},[82,560,561],{},"Field ignored by the browser",[82,563,564,565,568,569,571],{},"Typo or wrong type (",[20,566,567],{},"\"display\": \"Standalone\""," is not valid; use lowercase ",[20,570,206],{},")",[82,573,574,575],{},"Compare against the ",[38,576,578],{"href":155,"rel":577},[157],"W3C spec",[16,580,581,582,179],{},"One trap worth calling out: your editor may accept comments in this file because VS Code reads many config files as JSONC. The browser does not. Comments make the manifest fail to parse — see ",[38,583,585],{"href":584},"\u002Fblog\u002Fjson-comments","Comments in JSON",[44,587,589],{"id":588},"chrome-extension-manifestjson-what-it-is-and-when-you-need-it","Chrome extension manifest.json: what it is and when you need it",[16,591,592,593,595],{},"Every Chrome extension has a ",[20,594,22],{}," in its root directory. It declares the extension's name, version, icons, scripts, and permissions — without it, Chrome will not load the folder at all.",[16,597,598,599,602,603,606,607,610,611,615,616,179],{},"The current standard is ",[28,600,601],{},"Manifest V3",". V2 extensions have been phased out, so any example showing ",[20,604,605],{},"\"manifest_version\": 2"," or a ",[20,608,609],{},"background.scripts"," array is out of date. See Chrome's ",[38,612,601],{"href":613,"rel":614},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fextensions\u002Fdevelop\u002Fmigrate\u002Fwhat-is-mv3",[157]," overview and MDN's ",[38,617,620,622],{"href":618,"rel":619},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FMozilla\u002FAdd-ons\u002FWebExtensions\u002Fmanifest.json",[157],[20,621,22],{}," reference",[16,624,625],{},"Three V3 changes cause most migration errors:",[128,627,628,642,655],{},[131,629,630,631,634,635,638,639,179],{},"Background pages are ",[28,632,633],{},"service workers",": ",[20,636,637],{},"\"background\": { \"service_worker\": \"background.js\" }",", not ",[20,640,641],{},"\"background\": { \"scripts\": [...] }",[131,643,644,645,650,651,654],{},"Host access moved to ",[28,646,647],{},[20,648,649],{},"host_permissions","; ",[20,652,653],{},"permissions"," now holds API permissions only.",[131,656,657],{},"Remotely hosted code is not allowed — scripts must ship inside the extension.",[44,659,661],{"id":660},"how-to-create-a-manifestjson-for-a-chrome-extension-manifest-v3","How to create a manifest.json for a Chrome extension (Manifest V3)",[256,663,665],{"id":664},"step-1-create-the-file-in-the-extension-root","Step 1: Create the file in the extension root",[368,667,672],{"className":668,"code":670,"language":671,"meta":374},[669],"language-text","my-extension\u002F\n├── manifest.json\n├── background.js\n├── popup.html\n└── icons\u002F\n    ├── icon-16.png\n    ├── icon-48.png\n    └── icon-128.png\n","text",[20,673,670],{"__ignoreMap":374},[256,675,677],{"id":676},"step-2-add-the-required-keys","Step 2: Add the required keys",[58,679,680,690],{},[61,681,682],{},[64,683,684,687],{},[67,685,686],{},"Key",[67,688,689],{},"Requirement",[77,691,692,705,714],{},[64,693,694,699],{},[82,695,696],{},[20,697,698],{},"manifest_version",[82,700,701,702],{},"Must be ",[20,703,704],{},"3",[64,706,707,711],{},[82,708,709],{},[20,710,174],{},[82,712,713],{},"Display name",[64,715,716,721],{},[82,717,718],{},[20,719,720],{},"version",[82,722,723,724],{},"One to four dot-separated integers, e.g. ",[20,725,726],{},"\"1.0.0\"",[256,728,730],{"id":729},"step-3-add-the-keys-most-extensions-need","Step 3: Add the keys most extensions need",[16,732,733,207,735,207,737,740,741,207,744,207,746,358,748,179],{},[20,734,350],{},[20,736,317],{},[20,738,739],{},"action"," (toolbar button and popup), ",[20,742,743],{},"background.service_worker",[20,745,653],{},[20,747,649],{},[20,749,750],{},"content_scripts",[256,752,366],{"id":753},"step-4-write-the-manifest-1",[368,755,758],{"className":756,"code":757,"language":373,"meta":374},[371],"{\n  \"manifest_version\": 3,\n  \"name\": \"My Extension\",\n  \"version\": \"1.0.0\",\n  \"description\": \"A minimal Manifest V3 Chrome extension.\",\n  \"icons\": {\n    \"16\": \"icons\u002Ficon-16.png\",\n    \"48\": \"icons\u002Ficon-48.png\",\n    \"128\": \"icons\u002Ficon-128.png\"\n  },\n  \"action\": {\n    \"default_popup\": \"popup.html\",\n    \"default_title\": \"My Extension\",\n    \"default_icon\": {\n      \"16\": \"icons\u002Ficon-16.png\",\n      \"48\": \"icons\u002Ficon-48.png\",\n      \"128\": \"icons\u002Ficon-128.png\"\n    }\n  },\n  \"background\": {\n    \"service_worker\": \"background.js\"\n  },\n  \"permissions\": [\"storage\"],\n  \"host_permissions\": [\"https:\u002F\u002Fexample.com\u002F*\"]\n}\n",[20,759,757],{"__ignoreMap":374},[16,761,762,763,766,767,638,770,773],{},"Note the icon keys: they are ",[28,764,765],{},"strings"," (",[20,768,769],{},"\"16\"",[20,771,772],{},"16","), and the paths are relative to the extension root, not the manifest.",[256,775,777],{"id":776},"step-5-load-and-test-it","Step 5: Load and test it",[128,779,780,786,792,799],{},[131,781,782,783,179],{},"Open ",[20,784,785],{},"chrome:\u002F\u002Fextensions",[131,787,788,789,179],{},"Enable ",[28,790,791],{},"Developer mode",[131,793,794,795,798],{},"Click ",[28,796,797],{},"Load unpacked"," and select your extension folder.",[131,800,801],{},"Read the error list on the extension's card — Chrome reports manifest problems with the key involved, and the service worker's console is reachable via the \"service worker\" link.",[16,803,804],{},"A manifest that is valid JSON can still be rejected here. Chrome validates the schema too: an unknown key produces a warning, and an invalid value produces an error.",[44,806,808],{"id":807},"common-mistakes-when-creating-a-chrome-extension-manifest","Common mistakes when creating a Chrome extension manifest",[58,810,811,822],{},[61,812,813],{},[64,814,815,818,820],{},[67,816,817],{},"Mistake",[67,819,448],{},[67,821,454],{},[77,823,824,840,858,873,888,902,913,928],{},[64,825,826,831,834],{},[82,827,828,830],{},[20,829,605],{}," or missing",[82,832,833],{},"\"Unrecognized manifest key\" \u002F refuses to load",[82,835,836,837],{},"Set ",[20,838,839],{},"\"manifest_version\": 3",[64,841,842,849,852],{},[82,843,844,845,305,847],{},"Missing ",[20,846,174],{},[20,848,720],{},[82,850,851],{},"\"Required value 'version' is missing\"",[82,853,854,855,857],{},"Add both; ",[20,856,720],{}," must be dot-separated integers",[64,859,860,864,867],{},[82,861,862],{},[20,863,641],{},[82,865,866],{},"Background never runs in V3",[82,868,869,870],{},"Use ",[20,871,872],{},"\"service_worker\": \"background.js\"",[64,874,875,880,883],{},[82,876,877,878],{},"Match patterns in ",[20,879,653],{},[82,881,882],{},"\"Permission ... is unknown or URL pattern is malformed\"",[82,884,885,886],{},"Move URLs to ",[20,887,649],{},[64,889,890,893,896],{},[82,891,892],{},"Icon key is a number",[82,894,895],{},"Icon missing",[82,897,898,899],{},"Use string keys: ",[20,900,901],{},"\"16\": \"icons\u002Ficon-16.png\"",[64,903,904,907,910],{},[82,905,906],{},"Icon file missing",[82,908,909],{},"\"Could not load icon\"",[82,911,912],{},"Verify the path relative to the extension root",[64,914,915,918,921],{},[82,916,917],{},"Comments in the manifest",[82,919,920],{},"\"Manifest is not valid JSON\"",[82,922,923,924],{},"Remove them — or strip them with ",[38,925,927],{"href":926},"\u002Ftools\u002Fconvert\u002Fjsonc-to-json","JSONC to JSON",[64,929,930,933,935],{},[82,931,932],{},"Trailing comma",[82,934,920],{},[82,936,937],{},"Remove the final comma",[44,939,941],{"id":940},"write-validate-and-format-your-manifest","Write, validate, and format your manifest",[16,943,944],{},"Manifest files are small, hand-edited, and unforgiving. Three checks catch nearly every failure:",[16,946,947,950,951,955],{},[28,948,949],{},"1. Validate the JSON first."," Paste the file into the ",[38,952,954],{"href":953},"\u002Ftools\u002Fformat\u002Fjson-editor","JSON Editor",": it highlights syntax errors as you type and can format or minify the document before you copy or download it. Because it runs in your browser, you can paste an unreleased extension manifest or an internal PWA config without sending it anywhere.",[16,957,958,961,962,964],{},[28,959,960],{},"2. Repair instead of rewriting."," If the file already has trailing commas, single quotes, unquoted keys, or comments, ",[38,963,471],{"href":470}," fixes all of them at once and returns valid JSON.",[16,966,967,970,971,974],{},[28,968,969],{},"3. Check it from the command line."," On any machine with ",[20,972,973],{},"jq"," or Python installed:",[368,976,981],{"className":977,"code":979,"language":980,"meta":374},[978],"language-bash","jq . manifest.json\npython -m json.tool manifest.json\n","bash",[20,982,979],{"__ignoreMap":374},[16,984,985],{},"Both parse the file and print it, so an error means the JSON is invalid. Commands like these are also easy to add to CI so a broken manifest never reaches production.",[16,987,988,989,993,994,998],{},"For an extra layer, generate a JSON Schema from a known-good manifest with the ",[38,990,992],{"href":991},"\u002Ftools\u002Fconvert\u002Fjson-schema-generator","JSON Schema Generator"," and validate future versions against it with the ",[38,995,997],{"href":996},"\u002Ftools\u002Fformat\u002Fjson-schema-validator","JSON Schema Validator",". This catches a renamed or missing key that is still perfectly valid JSON — the class of bug syntax checking cannot see.",[44,1000,1002],{"id":1001},"other-types-of-manifestjson","Other types of manifest.json",[16,1004,1005],{},"The same filename appears in other ecosystems, each with its own required fields:",[164,1007,1008,1026,1035,1043],{},[131,1009,1010,1013,1014,305,1017,1020,1021,179],{},[28,1011,1012],{},"Next.js"," — the App Router supports ",[20,1015,1016],{},"app\u002Fmanifest.json",[20,1018,1019],{},"app\u002Fmanifest.ts"," and generates the Web App Manifest for you; see the ",[38,1022,1025],{"href":1023,"rel":1024},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fapi-reference\u002Ffile-conventions\u002Fmetadata\u002Fmanifest",[157],"Next.js manifest documentation",[131,1027,1028,1031,1032,1034],{},[28,1029,1030],{},"Adobe UXP plugins"," — a ",[20,1033,22],{}," declaring the plugin id, host application, and entry point.",[131,1036,1037,1031,1040,1042],{},[28,1038,1039],{},"Minecraft behavior and resource packs",[20,1041,22],{}," with a header, module list, and UUIDs.",[131,1044,1045,1048,1049,179],{},[28,1046,1047],{},"Cloud and container tooling"," — various deployment descriptors also named ",[20,1050,22],{},[16,1052,1053],{},"The pattern is always the same: the platform's documentation defines the fields, and JSON syntax is only the container. When in doubt, follow the platform's official docs over any generic tutorial — including this one.",[44,1055,1057],{"id":1056},"faq","FAQ",[256,1059,1061],{"id":1060},"what-is-the-difference-between-manifestjson-and-manifestwebmanifest","What is the difference between manifest.json and manifest.webmanifest?",[16,1063,1064,1065,1068,1069,1072,1073,1075],{},"They hold the same content. ",[20,1066,1067],{},".webmanifest"," is the extension recommended by the W3C spec, and the spec's media type is ",[20,1070,1071],{},"application\u002Fmanifest+json",". ",[20,1074,22],{}," is the de facto name most projects use, and browsers accept it. Pick one; make sure your server sends a JSON content type for it.",[256,1077,1079],{"id":1078},"do-i-need-a-manifestjson-for-every-website","Do I need a manifest.json for every website?",[16,1081,1082],{},"No. Add one if you want the site to be installable or to control how it looks when installed. A blog, a docs site, or a marketing page that should stay in a browser tab needs nothing.",[256,1084,1086],{"id":1085},"can-i-use-comments-in-a-manifestjson","Can I use comments in a manifest.json?",[16,1088,1089,1090,175,1093,1096,1097,1099,1100,1102],{},"Not in the file you ship. Standard JSON has no comment syntax, so ",[20,1091,1092],{},"\u002F\u002F",[20,1094,1095],{},"\u002F* *\u002F"," make the manifest invalid and both browsers and Chrome will reject it. Your editor may accept them because it reads the file as JSONC — that is the editor being lenient, not the browser. See ",[38,1098,585],{"href":584},", and use ",[38,1101,927],{"href":926}," to strip them before publishing.",[256,1104,1106],{"id":1105},"why-doesnt-my-pwa-show-the-install-prompt","Why doesn't my PWA show the install prompt?",[16,1108,1109,1110,305,1112,1114],{},"Usually one of: the manifest is missing a 192px or 512px icon, ",[20,1111,193],{},[20,1113,202],{}," is missing, the page is not served over HTTPS, or there is no registered service worker with a fetch handler. Open DevTools → Application → Manifest and read the installability list — it names what is missing.",[256,1116,1118],{"id":1117},"why-does-chrome-say-invalid-manifest-for-my-extension","Why does Chrome say \"Invalid manifest\" for my extension?",[16,1120,1121,1122,1124,1125,1127],{},"Either the JSON is invalid (trailing comma, comment, single quotes) or a value fails schema validation (missing ",[20,1123,720],{},", wrong ",[20,1126,698],{},", malformed permission). Load the extension unpacked and read the error on its card — Chrome names the offending key.",[256,1129,1131],{"id":1130},"can-i-use-the-same-manifestjson-for-a-pwa-and-a-chrome-extension","Can I use the same manifest.json for a PWA and a Chrome extension?",[16,1133,1134,1135,207,1137,358,1139,1142,1143,175,1145,1147],{},"No. They are different specifications with different required keys. ",[20,1136,698],{},[20,1138,653],{},[20,1140,1141],{},"background"," mean nothing to a browser reading a web app manifest, and ",[20,1144,193],{},[20,1146,202],{}," mean nothing to Chrome loading an extension. Keep them in separate files in separate projects.",[256,1149,1151],{"id":1150},"where-should-the-file-go","Where should the file go?",[16,1153,1154,1155,1157,1158,1161],{},"For a PWA, somewhere served at a stable public URL — commonly ",[20,1156,280],{}," at the site root, referenced by an absolute ",[20,1159,1160],{},"href",". For a Chrome extension, the root of the extension folder, next to the scripts it references.",[44,1163,1165],{"id":1164},"whats-next","What's Next?",[164,1167,1168,1176,1184,1192,1200],{},[131,1169,1170,1173,1174,179],{},[28,1171,1172],{},"Writing a manifest now?"," Format and validate it in the ",[38,1175,954],{"href":953},[131,1177,1178,1181,1182,179],{},[28,1179,1180],{},"Already broken?"," Fix commas, quotes, and comments with ",[38,1183,471],{"href":470},[131,1185,1186,1189,1190,179],{},[28,1187,1188],{},"New to JSON files?"," Read ",[38,1191,41],{"href":40},[131,1193,1194,1197,1198,179],{},[28,1195,1196],{},"Fighting comments or trailing commas?"," See ",[38,1199,585],{"href":584},[131,1201,1202,1197,1205,179],{},[28,1203,1204],{},"Debugging a parse error?",[38,1206,1208],{"href":1207},"\u002Fblog\u002Fjson-parse-error-debug","JSON Parse Failed: 10 Common API Errors and How to Debug Them",[1210,1211],"hr",{},[16,1213,1214],{},[1215,1216,1217],"em",{},"All tools on JSON Toolbox run entirely in your browser. Your data never leaves your device.",{"title":374,"searchDepth":1219,"depth":1219,"links":1220},2,[1221,1222,1223,1232,1233,1234,1241,1242,1243,1244,1253],{"id":46,"depth":1219,"text":47},{"id":148,"depth":1219,"text":149},{"id":253,"depth":1219,"text":254,"children":1224},[1225,1227,1228,1229,1230,1231],{"id":258,"depth":1226,"text":259},3,{"id":283,"depth":1226,"text":284},{"id":344,"depth":1226,"text":345},{"id":365,"depth":1226,"text":366},{"id":385,"depth":1226,"text":386},{"id":407,"depth":1226,"text":408},{"id":438,"depth":1219,"text":439},{"id":588,"depth":1219,"text":589},{"id":660,"depth":1219,"text":661,"children":1235},[1236,1237,1238,1239,1240],{"id":664,"depth":1226,"text":665},{"id":676,"depth":1226,"text":677},{"id":729,"depth":1226,"text":730},{"id":753,"depth":1226,"text":366},{"id":776,"depth":1226,"text":777},{"id":807,"depth":1219,"text":808},{"id":940,"depth":1219,"text":941},{"id":1001,"depth":1219,"text":1002},{"id":1056,"depth":1219,"text":1057,"children":1245},[1246,1247,1248,1249,1250,1251,1252],{"id":1060,"depth":1226,"text":1061},{"id":1078,"depth":1226,"text":1079},{"id":1085,"depth":1226,"text":1086},{"id":1105,"depth":1226,"text":1106},{"id":1117,"depth":1226,"text":1118},{"id":1130,"depth":1226,"text":1131},{"id":1150,"depth":1226,"text":1151},{"id":1164,"depth":1219,"text":1165},"json_tools","2026-10-01T00:00:00.000Z","Create a manifest.json for a PWA or Chrome extension: required fields, minimal examples, install rules, and how to debug an invalid manifest.",false,"md","\u002Fblog\u002Fcover\u002Fen\u002Fhow-to-create-manifest-json-cover.svg",[1261],"en",{},true,"\u002Fen\u002Fblog\u002Fhow-to-create-manifest-json",{"slug":1266,"text":1267,"btn":1268},"json-editor","Writing a manifest? Format and validate it before you ship:","Open JSON Editor",{"title":5,"description":1256},"en\u002Fblog\u002Fhow-to-create-manifest-json",[1272,22,1273,1274,84],"JSON","PWA","Chrome Extension","dhcMuyNAGtdBybHlCRCMA-XP6HsZqgyITOEyM1yK9vE",[1277,1280],{"path":1278,"title":1279},"\u002Fen\u002Fblog\u002Funexpected-end-of-json-input","Unexpected End of JSON Input: Causes and Fixes",{"path":1281,"title":1282},"\u002Fen\u002Fblog\u002Fhow-to-create-json-file","How to Create a JSON File: Step-by-Step Guide",1791273861856]