Redirect to local file in chrome extension

Question

I'm trying to block some pages and redirect users to file inside extension and here is my code:

 function onHeadersReceivedHandler(details) {


    if (enabled && device && device.signature) {

        var item = map[details.url.toString()];
        if (!item) {
            item = map[details.url.toString()] = details;
        }

        console.log("url: ", details.url.toString());

        console.log("onBeforeRequest: ", item);

        if (item.allowed === false) {
            console.log("NOT ALLOWED ", item);
            return {
                redirectUrl: chrome.extension.getURL(blockUrl)
            };
        }

        else if (item.allowed === true) {
            console.log("ALLOWED ", item);
            return details;
        }

        else {
            console.log("NEED TO CHECK ", item);
            item.allowed = false;
            if (item.allowed === false) {
                console.log("NOT ALLOWED AFTER CHECK: ", item);
                return {
                    redirectUrl: chrome.extension.getURL(blockUrl)
                };
            }
        }


    }

}

       chrome.webRequest.onHeadersReceived.addListener(onHeadersReceivedHandler, {
        urls: ["http://*/*", "https://*/*"],
        types: ["main_frame"] 
    }, ["responseHeaders", "blocking"]);

But when this code detect blocked page, chrome redirect to about:blank page instead my block page. The most interesting thing is that everything works fine when I activate extension after opening page for blocking and than refresh page, except sometimes css is not loaded, but when I type url and hit enter it goes to about:blank. Is this some chrome issue or I'm missing something?

Answer 1

Just added:

"web_accessible_resources": [
   "block.html"
]

in my manifest.json