TypeError: browser.webRequest is undefined [duplicate]

Question

I am trying to log errors using webextension. I have the follwoing simple example to start with:

manifest.json:

{

  "manifest_version": 2,
  "name": "testOnErrorWebex",
  "version": "1.0",

  "description": "Adds a red border to all webpages matching mozilla.org.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["testOnErrorWebex.js"]
    }
  ],

  "permissions": [
  "webRequest"
]

}

And, the content script: testOnErrorWebex.js

console.log("-- inside js file --");

var target = "<all_urls>"; 

/*
e.g., with no network:
"https://developer.mozilla.org/en-US/"
NS_ERROR_NET_ON_RESOLVED in Firefox
net::ERR_INTERNET_DISCONNECTED in Chrome
*/

function logError(responseDetails) {
  console.log("-- inside logError  --");
  console.log("inside logError");
  console.log(responseDetails.url);
  console.log(responseDetails.error);
}

browser.webRequest.onErrorOccurred.addListener(
  logError,
  {urls: [target]}
);

When I try the extension and load it, then type any bad URL that fires an error: e.g., https://doesnotexist/

The following line from the content script is printed:

-- inside js file --

But I get this eerro:

TypeError: browser.webRequest is undefined

Answer 1

The browser.webRequest is not available in the content scripts. Please try to change the testOnErrorWebex.js to run in background as you can find in the following changed manifest:

{

  "manifest_version": 2,
  "name": "testOnErrorWebex",
  "version": "1.0",
  "description": "Adds a red border to all webpages matching mozilla.org.",
  "background": {
    "scripts": ["testOnErrorWebex.js"]
  },
  "permissions": [
    "webRequest"
  ]
}