Chrome extension create html page at the root - google-chrome-extension

Question

Currently my extension opens a web page at
chrome-extension://bpmcncockdffdifceihffkimpfbobjhn/dist/webpage.html
How do I make it so that the webpage.html is omitted, and that the following url:
chrome-extension://bpmcncockdffdifceihffkimpfbobjhn
Immediately points to the webpage?

Answer 1

Chrome extensions pages are treated as direct file URLs, not as server pages, so there is no default handler for directories like index.html.
Persistent background script
If your background script doesn't have "persistent": false in manifest.json you can use webRequest API to redirect such a fake URL into the real one:
manifest.json:
"permissions": ["webRequest"],
"background": {
"persistent": true,
"scripts": ["background.js"]
}
background.js:
chrome.webRequest.onBeforeRequest.addListener(e => {
return {redirectUrl: chrome.runtime.getURL('/dist/webpage.html')};
}, {
urls: [chrome.runtime.getURL('/')],
types: ['main_frame'],
}, ['blocking']);
Event page background script
If your background script has "persistent": false in manifest.json you can use webNavigation API to redirect an error page to the real page. The only nuisance is that there'll be a dummy item in the tab's history and the history back button will be active (but it won't work of course as it'll be redirected again).
manifest.json:
"permissions": ["webNavigation"],
"background": {
"persistent": false,
"scripts": ["background.js"]
}
background.js:
chrome.webNavigation.onErrorOccurred.addListener(({tabId}) => {
chrome.tabs.update(tabId, {url: '/dist/webpage.html'});
}, {
url: [{
urlEquals: chrome.runtime.getURL('/'),
}],
});
There is also declarativeWebRequest but only in Chrome beta/dev/Canary. And just for fun, it's possible to use webRequest API with nonpersistent event pages but it's hacky (you'll have to prevent unloading of the event page by opening a message connection from an iframe inside the background page) and defeats the purpose of event pages so I won't be showing it here.