Intercept network requests

​

What MV3 allows

​

Manifest

{
  "manifest_version": 3,
  "name": "Request Inspector",
  "version": "1.0.0",
  "permissions": ["webRequest"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  },
  "devtools_page": "devtools/index.html"
}

​

Observe requests in the background

chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    console.log('→', details.method, details.url, details.type)
  },
  { urls: ['<all_urls>'] }
)

chrome.webRequest.onCompleted.addListener(
  (details) => {
    console.log('←', details.statusCode, details.url)
  },
  { urls: ['<all_urls>'] }
)

chrome.webRequest.onErrorOccurred.addListener(
  (details) => {
    console.warn('✗', details.error, details.url)
  },
  { urls: ['<all_urls>'] }
)

​

Inspect requests in a devtools panel

chrome.devtools.panels.create('Requests', '', 'panel/index.html')

chrome.devtools.network.onRequestFinished.addListener((entry) => {
  console.log(entry.request.method, entry.request.url, entry.response.status)

  entry.getContent((body) => {
    if (body) console.log('body bytes:', body.length)
  })
})

​

Run it

extension dev ./request-inspector --browser=chromium

​

Firefox differences

• Firefox Manifest V3 still supports blocking webRequest with the webRequestBlocking permission.
• Firefox treats Manifest V3 host permissions as opt-in. Users grant them from the extensions panel, not at install time.
• Firefox runs the background as an event page, not a service worker. Top-level listener registration works on both.
• The devtools APIs above work in Firefox under the same chrome.devtools.* names.

​

Start from a template

npx extension@latest create request-inspector --template=devtools

​

Best practices

• Narrow the urls filter on each listener instead of listening to <all_urls> in production.
• Correlate events by requestId rather than by URL, since pages repeat URLs.
• Keep listeners fast, because every observed request invokes them.
• Request the narrowest host permissions that your feature needs.
• Use declarativeNetRequest for blocking, and keep webRequest for observation.

​

Next steps

• Block traffic declaratively in Build an ad blocker.
• Review host permission hygiene in the Security checklist.
• Review Manifest V3 concepts for the service-worker lifecycle.