How to open the correct devtools console to see output from an extension script?

Add-ons Development
#1

I am trying to test sample code for web extension for browsers. But, it doesn’t work. I checked the console for Google Chrome and also for Firefox. It doesn’t print anything. The following is my code:

manifest.json :

{
    "description": "Demonstrating webRequests",
    "manifest_version": 2,
    "name": "webRequest-demo",
    "version": "1.0",

    "permissions": [
        "webRequest"
    ],
    "background": {
        "scripts": ["background.js"]
    }
}

background.js :

function logURL(requestDetails) {
    console.log("Loading: " + requestDetails.url);
}

chrome.webRequest.onBeforeRequest.addListener(
    logURL,
    {urls: ["<all_urls>"]}
);
console.log("Hell o extension background script executed");

Am I missing something?

#2

Hi @Nicole, one of our team members recently noticed we had some gaps in our documentation on this topic and added some more information will hopefully be helpful. :slight_smile: Unfortunately, we haven’t yet pushed his updates to our production site yet.

You can check out the updates on our staging environment, though.

#3

You will need the <all_urls> host permission for this to work in Firefox, see the paragraph just before “Modifying requests” at https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest