Manifest V3版Chrome扩展点击按钮无法发送网络请求如何解决

算力阿峰

2026-9-27

问题原因

Manifest V3 要求跨域请求的目标域名必须提前在host_permissions字段中声明，你当前的配置没有添加对应接口域名的访问权限，导致请求被浏览器直接拦截，不会发送到服务端。
你当前配置的webRequest权限属于冗余权限，普通接口请求不需要该权限。

修复步骤

1. 修改manifest.json配置

添加host_permissions字段，填入你请求的接口根域名，示例如下：

{
  "name": "DoctorBotTheExtension",
  "description": "DoctorBot Web API fit into an extension",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"],
  "host_permissions": ["https://*****.****.**/*"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
        "16": "/images/icon16x16.png",
        "32": "/images/icon32x32.png",
        "48": "/images/icon48x48.png",
        "128": "/images/icon128x128.png"
    }
  },
  "icons": {
      "16": "/images/icon16x16.png",
      "32": "/images/icon32x32.png",
      "48": "/images/icon48x48.png",
      "128": "/images/icon128x128.png"
  }
}

注意把https://*****.****.**/*替换成你实际的接口域名，末尾的*代表匹配该域名下所有路径的请求。

2. （可选）优化popup.js请求逻辑

Manifest V3 更推荐使用fetchAPI替代XMLHttpRequest，写法更简洁，兼容性也更好，修改后的代码示例：

async function myFunction() {
  const x = document.getElementById("inp").value;
  const url = `https://*****.****.**/doctorapi/${x}`;
  try {
    const res = await fetch(url);
    const text = await res.text();
    document.getElementById('answer').innerHTML = text;
  } catch (err) {
    console.error('请求失败：', err);
  }
}