Blocking request in Chrome

Question

I'm trying to block some requests in a Chrome app.

I created a JavaScript listener that does this validation:

chrome.webRequest.onBeforeRequest.addListener(
    {
        urls: ["*://site.com/test/*"]
    },
    ["blocking"]
);

But the requests are not blocking. Did I miss something in this code?

My manifest:

"background": {
        "scripts": ["listener.js"],
        "persistent": true
    },
"permissions": ["tabs", "http://*/*"],
    "manifest_version": 2,

Answer 1

It looks like you misunderstood the meaning of "blocking" here.

https://developer.chrome.com/extensions/webRequest.html#subscription

If the optional opt_extraInfoSpec array contains the string 'blocking' (only allowed for specific events), the callback function is handled synchronously. That means that the request is blocked until the callback function returns. In this case, the callback can return a BlockingResponse that determines the further life cycle of the request.

To block a request (cancel it), return {cancel: true} in your event handler.

For example:

chrome.webRequest.onBeforeRequest.addListener(
    function() {
        return {cancel: true};
    },
    {
        urls: ["*://site.com/test/*"]
    },
    ["blocking"]
);

This will block all URLs matching *://site.com/test/*.

Also remember to declare both webRequest and webRequestBlocking permissions in your manifest.

Answer 2

From Chrome 59 you can block specific requests from Network tab of developer tools itself.

https://developers.google.com/web/updates/2017/04/devtools-release-notes#block-requests

Right-click on the request in the Network panel and select Block Request URL. A new Request blocking tab pops up in the Drawer, which lets you manage blocked requests.