You do not have permission to use blocking webRequest listeners. Be sure to declare the webRequestBl-CodePudding

I try to develop my first chrome extension with react js. when I try to blocking a URL in the chrome extension using chrome.webRequest API In error page shows two errors.

'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.

and I'm declaring the "webRequestBlocking" permission in the manifest file. here is my 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>"
 ]
}

here is my background.js

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

and I have tried removing webRequestBlocking but also the same. can anyone help me is there a way to fix this?

CodePudding user response：

the error explains it self 'webRequestBlocking' requires manifest version of 2 or lower. so you can't use webRequestBlocking in manifest version 3 .

but chrome is giving an alternative by using declarativeNetRequestWithHostAccess API witch is used to block or modify network requests by specifying declarative rules you can check here for more details .

CodePudding user response：

You can change "manifest_version": 2 and "webRequestBlocking": "permissions".