Chrome Blocking Redirect to Extension Page

I am trying to make a chrome extension that blocks users from accessing sites by redirecting them to the extension's custom HTML block page. The user can then choose to click "Unblock" to exclude the current tab from being checked by the filter.

The extension works as expected. For example, if you try to access https://www.youtube.com/ while "youtube.com" is in the blocked list, it will redirect you to "blocked.html".

However, it seems that the extension only works on the CURRENT TAB that you are working with. If you try to shift click a hyperlink (Which opens the link in a new tab) which leads to https://www.youtube.com, it will redirect to "blocked.html", but Chrome would block the redirect and give you this screen:

Even if you now focus on the tab and press refresh, "blocked.html" still does not load.

I believe this may be because I am missing permissions in my manifest file, however, I looked at the docs for the permissions page and I could not find any relevant permissions I could add.

Thanks in advance.

Note: Interestingly, the yellow error message shown above only appears on pages that have been blocked by chrome. The message is this: "crbug/1173575, non-JS module files deprecated."

Also, if you try to refresh the page, the line number that the message appears becomes higher. (I refreshed a few times and right now it is at VM712:7146). Not sure if this message is related to the error.

manifest.json

    "manifest_version": 2,
    "background": {
        "service_worker": "background.js"
    },
    "options_page": "options.html",
    "permissions": [
        "storage",
        "activeTab",
        "tabs",
        "webRequest",
        "webRequestBlocking",
        "<all_urls>"
    ],
    "page_action": {
        "default_popup": "popup.html"
    }

blocked.js (Shortened)

// Unblock button redirect
let unblockButton = document.getElementById("unblockButton");
updateOriginalUrl();
chrome.runtime.onMessage.addListener(function update(message) {
    updateOriginalUrl();
    chrome.runtime.onMessage.removeListener(update);
})
function updateOriginalUrl() {
    chrome.storage.sync.get("originalUrl", (result) => {
        console.log("Unblock button URL set to: " + result.originalUrl);
        unblockButton.addEventListener("click", () => {
            location.href = result.originalUrl;
            chrome.runtime.sendMessage("exclude")
        })
    });
}

background.js

chrome.webRequest.onBeforeRequest.addListener((details) => {
    console.log("New request detected")
    console.log("Request URL: " + details.url);
    if(enabled && !excludedTabs.includes(details.tabId)) {
        for(let blockedUrl of blockedList) {
            if(details.url.includes(blockedUrl)) {
                console.log("Match detected, redirecting");
                chrome.storage.sync.set( {"originalUrl": details.url}, () => {
                    chrome.runtime.sendMessage("updateOriginalUrl");
                });
                return {
                    redirectUrl: chrome.runtime.getURL("blocked.html")
                };
            }
        }
    }
}, {
    urls: ["<all_urls>"],
    types: ["main_frame"]
}, ["blocking"]);

Thanks @wOxxOm:

Either add blocked.html to web_accessible_resources in manifest.json or switch to using declarativeNetRequest API.

This worked.