React开发Chrome扩展Manifest V3拦截URL报错求助

错误原因分析 #

• Manifest V3已完全移除webRequestBlocking权限和webRequest API的blocking监听模式，这是第一个错误的直接原因。
• 第二个权限错误是因为V3不兼容旧的blocking监听逻辑，即使声明webRequestBlocking权限也无效。

解决方案 #

1. 更新manifest.json配置 #

移除webRequestBlocking权限，添加declarativeNetRequest权限（V3标准的网络拦截权限），同时配置规则资源路径：

{
  "manifest_version": 3,
  "name": "Chrome Extension",
  "description": "First Extension",
  "options_page": "options.html",
  "background": {
    "service_worker": "background.bundle.js"
  },
  "action": {
    "default_title": "Open Extension",
    "default_icon": "icon-34.png"
  },
  "icons": {
    "128": "icon-128.png"
  },
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*",
        "<all_urls>"
      ],
      "js": [
        "contentScript.bundle.js"
      ],
      "css": [
        "content.styles.css"
      ]
    }
  ],
  "devtools_page": "devtools.html",
  "web_accessible_resources": [
    {
      "resources": [
        "content.styles.css",
        "icon-128.png",
        "icon-34.png"
      ],
      "matches": ["<all_urls>"]
    }
  ],
  "permissions": [
    "activeTab",
    "tabs",
    "declarativeNetRequest"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "ruleset_1",
        "enabled": true,
        "path": "rules.json"
      }
    ]
  }
}

2. 创建规则文件rules.json #

在扩展根目录新建rules.json，定义具体的拦截规则（对应你原来的取消请求逻辑）：

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "cancel"
    },
    "condition": {
      "urlFilter": "https://reactjs.org/*",
      "resourceTypes": ["main_frame", "sub_frame", "script", "image"]
    }
  }
]

3. 调整background.js（可选） #

如果不需要动态修改拦截规则，原有的webRequest监听代码可以直接删除；如果需要动态添加/删除规则，可使用declarativeNetRequest的动态规则API：

// 示例：扩展安装时动态添加拦截规则
chrome.runtime.onInstalled.addListener(() => {
  chrome.declarativeNetRequest.updateDynamicRules({
    addRules: [
      {
        "id": 2,
        "priority": 2,
        "action": { "type": "cancel" },
        "condition": { "urlFilter": "https://reactjs.org/*", "resourceTypes": ["main_frame"] }
      }
    ],
    removeRuleIds: []
  });
});

关键说明 #

• Manifest V3强制使用declarativeNetRequest处理阻塞式网络拦截，它比旧的webRequestBlocking性能更高，且符合V3的安全规范。
• host_permissions必须包含你要拦截的URL范围，否则规则不会生效。

内容的提问来源于stack exchange，提问作者Tharuka Dananjaya