reactjs - 您无权使用阻塞 webRequest 监听器。请务必在 list 中声明 webRequestBlocking 权限

Question

我尝试用 React js 开发我的第一个 chrome 扩展。当我尝试使用 chrome.webRequest API 阻止 chrome 扩展程序中的 URL 在错误页面中显示两个错误。

'webRequestBlocking' requires manifest version of 2 or lower.

Unchecked runtime.lastError: You do not have permission to use blocking webRequest listeners. Be sure to declare the webRequestBlocking permission in your manifest.

并且我在 list 文件中声明了“webRequestBlocking”权限。这是我的 manifest.json

{
  "manifest_version": 3,
  "name": "Chrome Extension",
  "description": "First Extension",
  "options_page": "options.html",
  "background": {
  "service_worker": "background.bundle.js",
  "matches": [
   "<all_urls>"
  ]
},
 "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": []
  }
 ],
  "permissions": [
  "activeTab",
  "tabs",
  "webRequest",
  "webRequestBlocking"
 ],
 "host_permissions": [
  "<all_urls>"
 ]
}

这是我的 background.js

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    console.log(details);
    return {cancel: true};
  },
  {urls: ["https://reactjs.org/"]},
  ["blocking"]
);

而且我已经尝试删除 webRequestBlocking 但还是一样。谁能帮我解决这个问题？

Answer 1

错误自行解释 'webRequestBlocking' 需要 list 版本 2 或更低版本。 因此您不能在 list 版本 3 中使用 webRequestBlocking> .

但 chrome 通过使用 declarativeNetRequestWithHostAccess API 提供了一种替代方法，该 API 用于通过指定声明性规则来阻止或修改网络请求你可以查看here了解更多详情。