0

enter image description here

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?

user1592380
  • 34,265
  • 92
  • 284
  • 515
  • Which console are you trying to log to? just to clarify,`background.js` logs to the background page console, not the webpage console – justinw Sep 06 '22 at 20:26
  • OK, did not Know that. I was thinking as a test the webpage console. – user1592380 Sep 06 '22 at 20:34
  • Nope, they are separate. Here's an answer that can help you view the background console: https://stackoverflow.com/questions/10257301/accessing-console-and-devtools-of-extensions-background-js – justinw Sep 06 '22 at 20:36

1 Answers1

2

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

justinw
  • 3,856
  • 5
  • 26
  • 41