如何批量将Chrome所有标签页同步切换至指定URL？

原代码失效原因 #

你之前的代码只能修改当前打开控制台的标签页，核心问题有两个：

1. 浏览器上下文隔离：每个Chrome标签页都是独立进程，普通网页的JS只能访问自身标签的DOM和上下文，无法直接操作其他标签页。
2. Chrome界面权限限制：浏览器的标签栏UI（比如你代码里试图获取的.tab元素）属于chrome://系统界面，普通网页脚本没有权限访问这部分DOM结构，你代码里的querySelectorAll('.tab')其实是在当前网页里找class为tab的元素，根本不是浏览器的标签页。

可行解决方案：Chrome扩展（利用官方Tabs API） #

要实现批量修改所有标签页的URL，必须借助Chrome扩展——只有扩展拥有跨标签操作的权限。以下是具体实现步骤：

1. 创建扩展文件 #

新建一个文件夹，里面放3个文件：

manifest.json（扩展配置文件）

{
  "manifest_version": 3,
  "name": "批量标签跳转",
  "version": "1.0",
  "permissions": ["tabs"],
  "action": {
    "default_popup": "popup.html"
  }
}

popup.html（扩展弹窗界面）

<!DOCTYPE html>
<html>
<body style="width: 250px; padding: 10px;">
  <input type="text" id="urlInput" placeholder="输入目标URL（如https://example.com）" style="width: 100%; margin-bottom: 10px; padding: 5px;">
  <button id="jumpBtn" style="width: 100%; padding: 6px;">批量跳转所有标签</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js（核心逻辑代码）

document.getElementById('jumpBtn').addEventListener('click', async () => {
  const inputUrl = document.getElementById('urlInput').value.trim();
  if (!inputUrl) {
    alert('请输入有效的URL');
    return;
  }
  // 自动补全协议（避免输入纯域名无法跳转）
  const targetUrl = inputUrl.startsWith('http') ? inputUrl : `https://${inputUrl}`;

  try {
    // 获取所有已打开的标签页
    const allTabs = await chrome.tabs.query({});
    // 遍历更新每个标签页的URL
    for (const tab of allTabs) {
      await chrome.tabs.update(tab.id, { url: targetUrl });
    }
    alert('所有标签页已同步跳转');
  } catch (err) {
    console.error('跳转出错:', err);
    alert('跳转失败，请检查控制台日志');
  }
});

2. 安装扩展到Chrome #

• 打开Chrome，输入chrome://extensions/进入扩展管理页面
• 开启右上角的「开发者模式」
• 点击「加载已解压的扩展程序」，选择你刚才创建的文件夹
• 扩展栏会出现这个工具的图标，点击即可打开弹窗

3. 使用方法 #

在弹窗的输入框里填入目标URL，点击「批量跳转所有标签」，所有已打开的Chrome标签页就会同步跳转到新URL，不会新建标签页。

为什么这个方案有效 #

Chrome扩展的Tabs API是官方提供的权限接口，允许扩展获取和修改所有标签页的属性，不受普通网页脚本的同源策略和上下文限制，完美解决跨标签批量操作的需求。

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