No errors , but no output in console from chrome extension

September 6, 2022

I’m trying to build an extension to monitor the xhr portion of the devtools network tab. I decided to start as simple as possible with the background script below. I’m seeing no errors on loading the extension, but don’t see any output in the console.

manifest.json:

{
"manifest_version": 3,
"version": "1.0",
"name": "Hello World!",
"description": "Learning how to make a chrome extension!",
"icons": {
    "16": "images/puppy16.png",
    "48": "images/puppy48.png",
    "128": "images/puppy128.png"
},
"action": {
    "default_icon": "images/puppy.png",
    "default_popup": "popup.html"
},
"background": {
    "service_worker": "background.js"
},
"host_permissions": [
    "https://yahoo.com/*"
],
"permissions": [
    "webRequest"
]
}

In my background.js:

(function () {

    chrome.webRequest.onCompleted.addListener(
        function (details) {
            console.log('HELLO THERE!!!!', details);
        },
        { urls: ["<all_urls>"] }
    );

}());

What am I doing wrong?

>Solution :

The background-page and webpage console log to different places so you wouldn’t see console.log('HELLO THERE!!!!', details); in the webpage’s console. Refer the answer below for how to view the background-page console.

Accessing console and devtools of extension's background.js