Chrome扩展开发：官方示例manifest.json报错求助

你提供的manifest.json语法上无明显格式错误，但报错大概率出自以下几个常见场景，按步骤排查即可：

1. 文件路径不匹配 #

• 核对项目目录结构：
  • 确认根目录下存在images文件夹，且内部包含icon-16.png、icon-32.png等所有声明的图标文件
  • 确认scripts文件夹存在，且content.js文件确实在该文件夹内，路径层级无错位

2. 图标文件不符合要求 #

• 检查图标参数：
  • 图标必须是标准PNG格式，不能是JPG、WebP等其他格式
  • 图标尺寸必须严格对应声明的数值（如16×16、32×32），不能有像素偏差
  • 尝试替换为已知可用的图标文件，排除文件损坏的可能

3. Chrome版本兼容性问题 #

• Manifest V3要求Chrome版本至少为88，若你的浏览器版本过低，会直接触发加载报错，先升级Chrome到最新稳定版再测试

4. 隐形JSON语法错误 #

• 排查隐形字符：
  • 偶尔会出现全角逗号、中文引号这类肉眼难辨的错误，可将代码复制到Chrome开发者工具的Console中，执行JSON.parse(你的manifest代码)，能直接定位语法错误位置
  • 用纯文本编辑器（如Notepad++）打开代码，开启显示所有字符功能，排查是否存在看不见的格式问题

5. 扩展加载方式错误 #

• 确保是通过Chrome「扩展程序」页面开启「开发者模式」，再选择「加载已解压的扩展程序」加载整个项目文件夹，而非直接拖拽单个manifest.json文件到浏览器

附你的manifest.json代码供对照：

{
  "manifest_version": 3,
  "name": "Reading time",
  "version": "1.0",
  "description": "Add the reading time to Chrome Extension documentation articles",
  "icons": { 
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "matches": [
        "https://developer.chrome.com/docs/extensions/*",
        "https://developer.chrome.com/docs/webstore/*"
      ]
    }
  ]
}

内容的提问来源于stack exchange，提问作者Kosain Abro