点击链接后如何保持Chrome扩展窗口不自动关闭？

核心原因 #

Chrome扩展的popup弹窗本质是一个临时渲染的小页面，只要页面发生导航跳转、资源卸载就会自动关闭，默认点击未指定打开方式的链接会在popup窗口内加载目标地址，触发页面卸载导致弹窗消失。 #

可直接复用的实现方法 #

• 方法1：给所有静态链接添加属性
  给popup里的<a>标签统一加上target="_blank"和rel="noopener noreferrer"属性，让链接在新标签页打开，不会触发popup页面的导航变动：

  <a href="https://example.com" target="_blank" rel="noopener noreferrer">示例链接</a>
  

• 方法2：全局绑定点击事件（适配动态生成的链接）
  直接在popup的JS逻辑里加全局点击监听，拦截所有链接点击行为，调用Chrome扩展API主动开新标签，完全避免触发popup页面本身的跳转：

  // popup页面的JS代码
  document.addEventListener('click', e => {
    const link = e.target.closest('a');
    if (link?.href) {
      e.preventDefault();
      chrome.tabs.create({ url: link.href });
    }
  });
  

关于弹窗关闭逻辑的说明 #

Chrome扩展的popup原生默认行为就是「点击弹窗以外的页面区域时自动关闭」，不需要额外写代码实现这个效果，只需要注意两点即可：

• 不要在popup的window.onblur等失去焦点事件里主动加window.close()逻辑
• 不要给手动关闭按钮以外的元素绑定触发window.close()的事件

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