How to use webRequest API (without blocking) in Chrome extension manifest v3?

Question

I'm learning to write a chrome extension. It is to intercept network requests on the web page. Because I will use the node.js package later, I use chrome-extension-cli to create a base structure for this chrome extension.

Currently I want to use webrequest API to intercept requests. From what I've found about this API. As long as I don't use "blocking" related methods, I can use this API in manifest v3. According to what I have found, I can use onBeforeRequest to achieve my purpose.

Below is a simple example of what I added.

in background.js

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

chrome.webRequest.onBeforeRequest.addListener(
  logURL,
  {urls: ["<all_urls>"]},
  ['requestBody']
);

But when I add this chrome extension to the browser and refresh the page, I don't see any relevant output in the F12 console page.

Page title is: '...' - evaluated by Chrome extension's 'contentScript.js' file
Hi Con, my name is Bac. I am from Background. It's great to hear from you.

F12 console has only the following two lines of output. This is just an example provided by chrome-extension-cli. If I'm thinking correctly, I should be able to see all network requests in the webpage in the F12 console. Is there something I am missing? Or is my understanding of chrome extension and webrequest API insufficient?

The following are other related files, all three files are in the same directory.

manifest.json

{
  "manifest_version": 3,
  "name": "npm_function_test",
  "version": "0.1.0",
  "description": "My Chrome Extension",
  "icons": {
    "16": "icons/icon_16.png",
    "32": "icons/icon_32.png",
    "48": "icons/icon_48.png",
    "128": "icons/icon_128.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "Virustotal_function_test",
    "default_popup": "popup.html"
  },
  "declarative_net_request" : {
    "rule_resources" : [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules_1.json"
    }]
  },
  "permissions": [
    "storage",
    "scripting",
    "webRequest",
    "declarativeNetRequest",
    "declarativeNetRequestFeedback"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "run_at": "document_idle",
      "js": [
        "contentScript.js"
      ]
    }
  ]
}

background.js

'use strict';
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'GREETINGS') {
    const message = `Hi ${
      sender.tab ? 'Con' : 'Pop'
    }, my name is Bac. I am from Background. It's great to hear from you.`;

    // Log message coming from the `request` parameter
    console.log(request.payload.message);
    // Send a response message
    sendResponse({
      message,
    });
  }
});

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

chrome.webRequest.onBeforeRequest.addListener(
  logURL,
  {urls: ["<all_urls>"]},
  ['requestBody']
);

contentScript.js**

'use strict';
const pageTitle = document.head.getElementsByTagName('title')[0].innerHTML;
console.log(
  `Page title is: '${pageTitle}' - evaluated by Chrome extension's 'contentScript.js' file`
);

// Communicate with background file by sending a message
chrome.runtime.sendMessage(
  {
    type: 'GREETINGS',
    payload: {
      message: 'Hello, my name is Con. I am from ContentScript.',
    },
  },
  (response) => {
    console.log(response.message);
  }
);

// Listen for message
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'COUNT') {
    console.log(`Current count is ${request.payload.count}`);
  }
  sendResponse({});
  return true;
});