如何用JavaScript实现网页历史后退后再前进？（Chrome扩展开发）

问题根源 #

连续同步调用history.back()和history.forward()时，浏览器的历史记录操作是异步执行的——后退操作还未完成，前进指令就已触发，导致前进操作无法生效，最终仅停留在后退后的页面。

可行实现方法 #

方法1：用setTimeout延迟执行前进操作 #

给history.forward()设置合理延迟，确保后退操作完成后再触发前进。延迟时间可根据实际场景调整，100-300ms基本能覆盖大多数情况：

history.back();
setTimeout(() => {
  history.forward();
}, 200);

方法2：监听popstate事件触发前进 #

浏览器历史记录变化时会触发popstate事件，我们可以在后退后监听该事件，确认后退完成后再执行前进，同时记得移除监听避免重复触发：

function handlePopState() {
  history.forward();
  window.removeEventListener('popstate', handlePopState);
}

window.addEventListener('popstate', handlePopState);
history.back();

针对YouTube场景的优化方案 #

YouTube部分页面采用SPA（单页应用）模式导航，可能不会触发标准的popstate事件或实际历史记录跳转。这种情况下，可借助Chrome扩展的chrome.tabsAPI操作标签页历史（需在manifest.json中声明"tabs"权限）：

chrome.tabs.getCurrent((tab) => {
  // 执行后退
  chrome.tabs.goBack(tab.id, () => {
    // 后退完成后延迟执行前进
    setTimeout(() => {
      chrome.tabs.goForward(tab.id);
    }, 200);
  });
});

内容的提问来源于stack exchange，提问作者Rufus Gordon-Heywood