如何实现点击新标签页时保持Extension弹窗持续打开？

Hey，这个问题我帮不少开发者解决过——默认情况下，浏览器会把扩展弹窗作为链接跳转的上下文，导致点击后弹窗直接关闭。下面是几个经过验证的解决方案，按简单到灵活排序：

给弹窗里所有的<a>标签加上target="_blank"和rel="noopener noreferrer"属性就行。这样点击链接会在全新标签页打开，同时切断新页面和弹窗的上下文关联，彻底避免弹窗被关闭。

示例代码：

<a href="https://your-target-url.com" target="_blank" rel="noopener noreferrer">点击打开新标签</a>

小提示：rel="noopener noreferrer"不仅是安全最佳实践（防止新页面通过window.opener篡改弹窗），还能确保弹窗不会被意外回收，一定要加上。

如果你的链接是JS动态生成的，或者需要更精细的逻辑控制，就给链接绑定点击事件，用Chrome扩展API手动打开新标签，同时阻止默认跳转行为。

示例代码：

// 遍历弹窗内所有链接
document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', (e) => {
    // 阻止默认跳转，避免弹窗关闭
    e.preventDefault();
    // 用Chrome API打开新标签
    chrome.tabs.create({ url: link.href });
  });
});

注意：这个方法不需要在manifest.json里额外声明tabs权限，弹窗环境下直接就能调用chrome.tabs.create()。如果是打开扩展内部页面，用相对路径（比如./internal-page.html）也完全没问题。

如果是打开扩展自身的页面，除了上面的方法，还可以用chrome.windows.create()打开独立窗口，或者在弹窗内用iframe加载，但这种场景比较少见，一般还是推荐新标签打开的方式更符合用户习惯。

修改完代码后，重新加载扩展：

1. 打开扩展弹窗
2. 点击链接
3. 确认新标签页正常打开，弹窗保持显示

如果还是有问题，检查这几点：

• JS方案里有没有漏掉e.preventDefault()
• HTML链接的target属性是否拼写正确
• 扩展的Manifest版本（V2和V3都支持这些方法，优先用V3）

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