React浏览器扩展中本地JSON加载失败，如何解决？

云原生阿岚

2026-8-5

解决浏览器扩展中fetch加载本地JSON报错TypeError: Failed to fetch的问题

以下是几种常见的排查和解决方向：

检查资源路径与访问方式
浏览器扩展内的本地资源不能直接用普通相对路径访问（尤其是在content script或popup中），必须用扩展API生成合法的资源URL。正确写法：
```
fetch(chrome.runtime.getURL('data.json'))
  .then(res => res.json())
  .then(data => { /* 处理数据 */ })
  .catch(err => console.error(err));
```
确认JSON文件的位置和路径是否匹配，比如文件放在./assets/data.json，则路径应为'assets/data.json'。
配置Manifest的资源访问权限
如果是在content script中加载JSON，必须在manifest.json（v3版本）中声明web_accessible_resources，确保content script能访问到该资源：
```
"web_accessible_resources": [
  {
    "resources": ["data.json"],
    "matches": ["<all_urls>"] // 根据你的扩展适配范围调整匹配规则
  }
]
```
若使用Manifest v2，直接写成数组即可："web_accessible_resources": ["data.json"]
排查JSON文件本身问题
- 用JSON校验工具（比如VSCode的内置校验）检查文件是否存在语法错误（如逗号遗漏、引号不闭合）
- 确保文件编码为UTF-8，避免乱码导致解析失败
避免协议错误
不要尝试用file://协议加载扩展内的资源，扩展资源有专属的chrome-extension://协议，通过chrome.runtime.getURL()生成的URL会自动适配该协议，避免跨域或协议不兼容问题。