Chrome扩展中chrome.runtime.getURL打印正常但fetch请求失败

常见原因及对应解决方法 #

• Manifest版本配置不匹配
  你目前使用的web_accessible_resources对象数组格式仅适用于Manifest V3：

// Manifest V3 正确配置
"web_accessible_resources": [{
    "resources": ["data/info.json"],
    "matches": ["<all_urls>"]
}]

如果你的扩展使用Manifest V2，该配置会直接失效，需替换为数组格式：

// Manifest V2 正确配置
"web_accessible_resources": ["data/info.json"]

可通过manifest.json根节点的manifest_version字段确认你使用的版本。

• 请求代码存在语法/参数问题
  你写的jQuery代码本身存在语法错误，回调函数被放在了getJSON方法的括号外，导致请求逻辑异常，修正后写法：

$.getJSON(jsonUrl, function(data) {
    console.log(data);
})

原生fetch请求需要补充同源凭证参数，避免被安全策略拦截：

const jsonUrl = chrome.runtime.getURL('data/info.json');
fetch(jsonUrl, {
  credentials: 'same-origin'
})
.then(res => res.json())
.then(data => console.log(data))

• 内容安全策略（CSP）拦截
  Manifest V3默认的CSP规则可能拦截本地资源请求，可在manifest.json中添加配置放行：

"content_security_policy": {
  "extension_pages": "script-src 'self'; object-src 'self';",
  "content_scripts": "script-src 'self'; object-src 'self';"
}

• 资源路径校验
  确认扩展根目录下存在data/info.json文件，路径大小写完全匹配，打包时该文件未被排除。

内容的提问来源于stack exchange，提问作者Shintaro Takechi