如何在Chrome开发者工具控制台批量打开页面链接至新标签页

假设某网站包含以下链接：

<a href="https://www.google.com">google</a>
<a href="https://www.yahoo.com">yahoo</a>
<a href="https://www.bing.com">bing</a>

我希望通过Chrome开发者工具控制台将每个链接都在新标签页中打开。

我尝试在控制台运行以下代码实现该需求：

const as = document.querySelectorAll('a');
as.forEach(a => a.setAttribute('target', '_blank'));
as.forEach(a => a.click())

但该代码仅打开第一个链接后就停止执行。

我还尝试使用window.open方法：

[...document.querySelectorAll('a')].map(a => a.href).forEach(window.open)

或

[...document.querySelectorAll('a')].map(a => a.href).forEach(href => window.open(href, '_blank'));

这两种写法同样仅打开第一个链接，其余链接无法打开。

请问如何在Chrome开发者工具控制台中批量打开页面所有链接至新标签页或窗口？

问题原因 #

Chrome的弹窗拦截机制会阻止非用户主动触发的批量弹窗，只有第一个触发的操作会被判定为用户交互允许，后续自动触发的请求会被拦截。

可行解决方案 #

方案1：延迟分批触发（控制台执行） #

通过给每个链接的打开操作添加微小延迟，同时确保执行前页面处于用户交互状态（比如先点击控制台区域）：

const links = [...document.querySelectorAll('a')].map(a => a.href);
links.forEach((href, index) => {
  setTimeout(() => {
    window.open(href, '_blank');
  }, index * 100); // 每个链接间隔100ms打开
});

方案2：修改属性后手动触发 #

先给所有链接添加target="_blank"属性，再通过用户主动选中链接的方式批量打开：

document.querySelectorAll('a').forEach(a => a.setAttribute('target', '_blank'));

执行完代码后，用鼠标拖动选中页面上的所有链接文本，按下回车键，所有链接会在新标签页打开，完全规避弹窗拦截。

方案3：书签脚本触发 #

将代码封装为书签脚本，点击书签时触发（属于用户主动操作，不会被拦截）：

javascript:(()=>{const links=[...document.querySelectorAll('a')].map(a=>a.href);links.forEach((href,i)=>setTimeout(()=>window.open(href,'_blank'),i*100))})();

将这段代码保存为浏览器书签，点击书签即可批量打开当前页面所有链接。

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