Chrome extension forwards blocked sites to html page, but only when the link is written directly in the search bar

Question

I'm making a simple Chrome extension for a project, but I have one odd issue. I've made a site blocker in the background script:

    localStorage.setItem('blocked_sites',  ["*://www.wikipedia.org/*", "*://www.change.org/*", "*://en.wikipedia.org/*"]); 
urls = localStorage.getItem('blocked_sites').split(',');

chrome.webRequest.onBeforeRequest.addListener(
function(intercept) {
    console.log(intercept.url);
    localStorage.setItem('denied_access_url', intercept.url);
     return {redirectUrl: chrome.extension.getURL("chatbot.html")};
     
},
{
    urls,
    types: ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", 
"xmlhttprequest", "other"]
},
["blocking"]
);

This blocker works when I directly visit a site by typing a url in the search bar. The page redirects to my html file fine. But if I google search and then click on a link or click on a hyperlink in an email, the site is blocked but the page is not redirected to 'chatbot.html', the page says:

'blninlecioflbneanancablcknibdbja is blocked This page has been blocked by Chrome ERR_BLOCKED_BY_CLIENT' (the random letters are the name of the local extension folder, generated by chrome). The terminal says "(index):7272 crbug/1173575, non-JS module files deprecated. (anonymous) @ (index):7272" and then clicking on the number at the end of the string shows

'No resource with given URL found'

Oddly enough, when I print out the url in the background.js console and click it, redirection to chatbot.html works. It also works when I click on links in word documents (but again, not links in emails!).

I've tried researching these errors, but haven't found much.

Why can the file be found only sometimes?

Answer 1

"You need to add the file to web_accessible_resources in manifest.json. I consider it a bug but this is how it's always been working. –wOxxOm"