WebExtensions: browser.webRequest.onCompleted never fires

Question

I'm using the Firefox WebExtensions API with the following background script

var log = console.log.bind(console)

log('hello world from browser extension')

// https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/webRequest/onCompleted
var filter = { urls: '<all_urls>' }
var extraInfoSpec = ['tlsInfo', 'responseHeaders']

browser.webRequest.onCompleted.addListener(function(details){
    log(`Woo got a request, here's the details!`, details)
}, filter, extraInfoSpec) 

log('Added listener')

After loading the script from about:debugging, I see the following output in DevTools:

hello world from browser extension

I do not see any output- there is no data from browser.webRequest.onCompleted.addListener and there is no 'Added listener' message.

How do I make browser.webRequest.onCompleted work?

For completeness, my manifest.json is below:

{
    "manifest_version": 2,
    "name": "Test extension",
    "version": "1.0",
    "description": "Test extension.",
    "icons": {
        "48": "icons/border-48.png"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ],
    "permissions": [
        "webRequest",
        "webRequestBlocking"
    ]
}

Answer 1

The webRequest API is only available to background scripts. You seem to using it inside a content script.

1. urls in var filter = { urls: '<all_urls>' } needs to be be an array ['<all_urls>'].
2. 'tlsInfo' in extraInfoSpec doesn't exist, I don't know where it comes from.
3. You need to specify an additional <all_urls> permission in your manifest.

script.js

var filter = { urls: ['<all_urls>'] }
var extraInfoSpec = ['responseHeaders']

browser.webRequest.onCompleted.addListener(function(details){
    console.log(`Woo got a request, here's the details!`, details)
}, filter, extraInfoSpec) 

console.log('Added listener')

manifest.json

{
    "manifest_version": 2,
    "name": "Test extension",
    "version": "1.0",
    "description": "Test extension.",
    "icons": {
        "48": "icons/border-48.png"
    },
    "background": {
      "scripts": ["script.js"]
    },
    "permissions": [
        "webRequest",
        "webRequestBlocking",
        "<all_urls>"
    ]
}