WebExtensions -- WebRequest event not triggering successfully despite matching network requests

Question

I'm developing an extension with WebExtensions and have run into a problem with WebRequest events. I am attempting to intercept the response to the request that the Facebook.com newsfeed sends to load more posts, which occurs through the URL https://www.facebook.com/ajax/pagelet/generic.php/LitestandTailLoadPagelet?dpr=* (where * is a whole mess of identifiers). This request shows up in the devtools: image.

Here's the relevant manifest bits:

{
    "permissions": [
        "*://facebook.com/*",
        "tabs",
        "activeTab",
        "webRequest",
        "webRequestBlocking"
    ],
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "content_scripts": [{
        "matches": ["*://facebook.com/", "*://facebook.com/groups/?*"],
        "js": ["/content-script.js"],
        "css": ["/css/styles.css"]
    }]
}

In background.js, I have the following event listener at the very top of the file (not that order should matter here):

browser.webRequest.onHeadersReceived.addListener(
    details => { console.log("event"); }, 
    { urls: ["https://www.facebook.com/ajax/pagelet/generic.php/LitestandTailLoadPagelet?dpr=*"] }, 
    ["blocking", "responseHeaders"]
);

However, making the request (even re-sending the one pictured above with the same url) doesn't trigger the console.log or even a breakpoint set on the event through devtools. The page loads no problem.

Any ideas?

Answer 1

You are trying to intercept requests to www.facebook.com but you don't have a host permission for that domain (you do have facebook.com but that's a different domain)