如何通过Chrome扩展实现两个已打开标签页之间的字符串传递？

该需求完全可实现，你提到的chrome.tabs API本身就是为扩展侧调用设计的，正是实现该功能的核心依赖，不存在技术壁垒。

核心实现逻辑 #

扩展分为三个核心模块配合完成全流程：

• 内容脚本（Content Script）：注入到所有指定页面，负责执行DOM读取、数据写入操作
• 后台服务工作线程（Service Worker）：负责标签页状态监听、数据中转存储
• 弹窗页面（Popup）：可选，用于给用户提供手动触发操作的入口

具体代码实现 #

以下为Manifest V3版本的完整实现代码（Manifest V2已逐步停止支持，推荐直接用V3版本）：

1. 扩展配置文件 manifest.json #

{
  "manifest_version": 3,
  "name": "跨站自动填数工具",
  "version": "1.0",
  "permissions": ["tabs", "activeTab", "storage"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

可将matches字段的值替换为你实际用到的源站、目标站域名，缩小权限范围提升安全性。

2. 内容脚本 content-script.js #

该文件会被注入到所有匹配的页面，负责和页面DOM交互：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // 处理提取数据请求
  if(request.type === 'EXTRACT_DATA') {
    // 替换为源站需要提取的DOM节点选择器
    const targetNode = document.querySelector('#source-node-selector');
    sendResponse(targetNode ? targetNode.textContent.trim() : '');
    return true;
  }
  // 处理填入数据请求
  if(request.type === 'FILL_DATA') {
    // 替换为目标站需要填入的输入框选择器
    const inputNode = document.querySelector('#target-input-selector');
    if(inputNode) inputNode.value = request.value;
  }
});

3. 手动触发用弹窗页面 #

如果需要手动控制提取、填入时机，添加popup.html和popup.js：

popup.html

<body style="width: 200px;padding: 10px;">
  <button id="extractBtn" style="width: 100%;margin-bottom: 8px;">提取当前页数据</button>
  <button id="fillBtn" style="width: 100%;">填入到当前页</button>
  <script src="popup.js"></script>
</body>

popup.js

// 提取数据逻辑
document.querySelector('#extractBtn').addEventListener('click', async () => {
  // 获取当前激活标签页ID，就是你需要的tabs.id来源
  const [activeTab] = await chrome.tabs.query({active: true, currentWindow: true});
  const extractedVal = await chrome.tabs.sendMessage(activeTab.id, {type: 'EXTRACT_DATA'});
  await chrome.storage.local.set({cacheData: extractedVal});
  window.close();
});

// 填入数据逻辑
document.querySelector('#fillBtn').addEventListener('click', async () => {
  const [activeTab] = await chrome.tabs.query({active: true, currentWindow: true});
  const {cacheData} = await chrome.storage.local.get('cacheData');
  if(cacheData) {
    await chrome.tabs.sendMessage(activeTab.id, {type: 'FILL_DATA', value: cacheData});
  }
  window.close();
});

4. 全自动触发逻辑（无需手动点击） #

如果不需要手动控制，希望打开对应页面自动执行操作，在background.js中添加如下代码即可：

chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
  // 等待页面加载完成再执行操作
  if(changeInfo.status !== 'complete') return;
  // 匹配源站URL自动提取数据
  if(tab.url.includes('你的源站域名关键字')) {
    const extractedVal = await chrome.tabs.sendMessage(tabId, {type: 'EXTRACT_DATA'});
    await chrome.storage.local.set({cacheData: extractedVal});
  }
  // 匹配目标站URL自动填入数据
  if(tab.url.includes('你的目标站域名关键字')) {
    const {cacheData} = await chrome.storage.local.get('cacheData');
    if(cacheData) {
      await chrome.tabs.sendMessage(tabId, {type: 'FILL_DATA', value: cacheData});
    }
  }
});

优化建议 #

• 可将不同站点的DOM选择器配置存储在扩展的storage中，后续修改规则不需要重新打包扩展
• 可在manifest中添加commands配置项，设置全局快捷键触发提取/填入操作，使用效率更高
• 如果需要处理多组不同的数据传递规则，可给每个规则加唯一标识区分即可

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