Chrome扩展在根目录下创建html页面



当前我的扩展在上打开一个网页

chrome-extension://bpmcncockdffdifceihffkimpfbobjhn/dist/webpage.html

我如何使其省略webpage.html,并使以下网址:

chrome-extension://bpmcncockdffdifceihffkimpfbobjhn

是否立即指向网页?

Chrome扩展页面被视为直接文件URL,而不是服务器页面,因此对于index.html这样的目录没有默认的处理程序。

持久后台脚本

如果您的后台脚本在manifest.json中没有"persistent": false,您可以使用webRequest API将这样一个虚假的URL重定向到真实的URL:

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']);

事件页面背景脚本

如果您的后台脚本在manifest.json中有"persistent": false,您可以使用webNavigation API将错误页面重定向到实际页面。唯一令人讨厌的是,选项卡的历史记录中会有一个伪项目,并且历史记录返回按钮将处于活动状态(但它当然不会工作,因为它将再次被重定向(。

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('/'),
}],
});

还有declarativeWebRequest,但仅在Chrome测试版/dev/Canary中提供。为了好玩,可以将webRequest API与非持久性事件页面一起使用,但它很古怪(你必须通过从后台页面内的iframe打开消息连接来阻止卸载事件页面(,并且违背了事件页面的目的,所以我不在这里显示它。

最新更新