WebExtensions: browser.webRequest.onCompleted 从不触发

Question

我正在使用 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')

从 about:debugging 加载脚本后，我在 DevTools 中看到以下输出：

hello world from browser extension

我没有看到任何输出 - browser.webRequest.onCompleted.addListener 没有数据，也没有 'Added listener' 消息。

如何使 browser.webRequest.onCompleted 工作？

为了完整起见，我的manifest.json如下：

{
    "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

webRequest API is only available to background scripts。您似乎在内容脚本中使用它。

1. urls in var filter = { urls: '<all_urls>' } 需要是数组 ['<all_urls>'].
2. 'tlsInfo' in extraInfoSpec 不存在，我不知道它来自哪里。
3. 您需要在清单中指定额外的 <all_urls> 权限。

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>"
    ]
}