Using 'browser.webRequest.onBeforeRequest' In the DevTools console returns an error

function logURL(requestDetails) {
	console.log(`The URL is: ${requestDetails.url}`);
 }
browser.webRequest.onBeforeRequest.addListener(logURL, {urls: ["<all_urls>"],});

Loading the above code as part of an extension (placed inside a background.js file), works just fine, I can see the logs in the Browser Console but not in the Dev Tools Console.

If I open another Firefox profile with no extensions loaded in it, and paste the following in the Dev Tools Console:

function logURL(requestDetails) {
	console.log(`The URL is: ${requestDetails.url}`);
 }
browser.webRequest.onBeforeRequest.addListener(logURL, {urls: ["<all_urls>"],});

I get an error:

Uncaught ReferenceError: webRequest is not defined
    <anonymous> debugger eval code:5
debugger eval code:5:1
    <anonymous> debugger eval code:5

Why is that? Are the Browser Console and the Dev Tools Console not using the same JS code?

I am just getting started on working with extensions, I would appreciate any clarifications on this. Cheers.

It isn’t part of the browser Web API, browser/chrome is part of the WebExtensions API. You can still do debugging in the browser but not like that.

1 Like

Aah, I see that makes allot of sense. will definetly do some more reading. Thank you for that.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.