使用browser.webRequest.onBeforeRequest取消请求致原标签页加载终止的问题

你的代码逻辑 #

browser.webRequest.onBeforeRequest.addListener(
    filterRequest,
    {urls: ['<all_urls>'], types: ['main_frame']},
    ['blocking']
);

function filterRequest(details) {
    const match = details.url.match(/\/container$/);
    if (!match) {
        return {};
    }
    browser.tabs.create({url: details.url.replace(/\/container$/, '')});
    return {cancel: true}
}

原网页加载停止的原因 #

当你在正在加载大型网页的标签页发起新的主框架请求（比如点击目标为当前标签页的链接），浏览器会立即启动导航流程：终止原有页面的所有加载任务、开始卸载原有页面，准备加载新的主框架资源。

你的代码在onBeforeRequest阶段取消了新请求，但此时导航流程已经启动，原有页面的加载终止操作已经触发，浏览器无法回滚到之前的加载状态，导致原网页停止加载。

解决办法 #

要保留原页面的加载状态，需要在浏览器启动导航流程之前阻止跳转，而不是在请求阶段取消请求。推荐两种方案：

方案1：通过Content Script拦截点击事件

这种方式直接在页面层面拦截跳转行为，不会触发浏览器的导航流程，原页面加载不受影响。

1. 新建content.js文件，写入以下代码：

document.addEventListener('click', (e) => {
  const link = e.target.closest('a');
  // 只处理目标为当前标签页的链接
  if (!link || link.target !== '' || link.target === '_blank') return;

  const url = new URL(link.href);
  if (url.pathname.endsWith('/container')) {
    e.preventDefault(); // 阻止默认跳转
    // 通知后台脚本打开新标签页
    browser.runtime.sendMessage({
      action: 'openNewTab',
      url: url.href.replace(/\/container$/, '')
    });
  }
});

2. 在后台脚本（比如background.js）中添加消息监听：

browser.runtime.onMessage.addListener((message) => {
  if (message.action === 'openNewTab') {
    browser.tabs.create({url: message.url});
  }
});

3. 在manifest.json中配置Content Script：

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "run_at": "document_start"
  }
]

方案2：通过WebRequest重定向回原页面

如果不想用Content Script，可以在onBeforeRequest中取消新请求的同时，将原标签页重定向回之前的URL，恢复加载状态：

browser.webRequest.onBeforeRequest.addListener(
  async (details) => {
    const match = details.url.match(/\/container$/);
    if (!match) return {};

    // 获取原标签页当前的URL
    const tab = await browser.tabs.get(details.tabId);
    // 在新标签页打开处理后的URL
    browser.tabs.create({url: details.url.replace(/\/container$/, '')});
    // 重定向原标签页回之前的URL，继续加载
    return {redirectUrl: tab.url};
  },
  {urls: ['<all_urls>'], types: ['main_frame']},
  ['blocking']
);

注意：这种方式会让原标签页重新加载之前的URL，如果原页面是大型网页，可能会重新开始加载，体验不如方案1。

内容的提问来源于stack exchange，提问作者Wizard