Chrome Extension with Manifest V3 won't access WebRequest

Question

I'm attempting to make a Chrome Extension, using Manifest Version 3, which accesses network requests originating from the webpage.

These are the relevant parts of the manifest, including permissions:

{
    "manifest_version": 3,
    ...
    "permissions": [
        "webRequest",
        "webRequestBlocking",
        "<all_urls>"
    ],
    "content_scripts": [
        {
          "js": ["scripts/content.js"],
          "css": ["styles.css"],
          "matches": [
            "<the site>"
          ],
          "run_at": "document_idle"
        }
    ],
}

Inside the content script, content.js, I registered a listener to chrome.webRequest:

chrome.webRequest.onBeforeRequest.addListener(
    (request) => {
        console.log(request);
    }
)

When I check the page console, other log lines from from content.js show up, but no web requests.

Furthermore, when I view the script inside the Chrome Developer Tools > Sources window, I see the following error.

Edit: This question was closed prematurely, because it is supposedly a duplicate. The related questions are based on V2 of the manifest, and this question is specifically about V3. The previous answers reference background scripts, which do not exist in V3.

You should also be aware of [Can Manifest V3 extensions use blocking Web Request?](https://developer.chrome.com/docs/extensions/mv3/mv3-migration/#when-use-blocking-webrequest) — Thomas Mueller, Oct 31 '22 at 06:39

score 0 · Answer 1 · answered Mar 10 '23 at 02:03

I guess you have confused the content.js and background.js. Try to put you code into background.js,the full code just like this:

{
  "name": "My  Extension",
  "description": "This extension will run on your pages.",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["webRequest", "webNavigation","background"],
  "host_permissions": ["*://*/*"],
  "content_scripts": [
    {
      "matches": [
        "*://*/path/*"
      ],
      "js": ["scripts/content.js"],
    }
  ],
  "background": {
    "service_worker": "scripts/background.js"
  },
  "icons": {
    "16": "images/icon16.png",
    "32": "images/icon32.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

and more,your background.js file should be like this:

chrome.webRequest.onBeforeRequest.addListener(
  function (details) {
    // do something here

  },
  {
    urls: [
      "https://yourhost.com/api/path",
    ],
    types: ["xmlhttprequest"],
  }
);

Chrome Extension with Manifest V3 won't access WebRequest

1 Answers1