两个独立浏览器窗口的DevTools之间能否实现数据传输？

当然可以实现！虽然Chrome DevTools扩展文档里没有直接点明这一点，但借助Chrome扩展的核心通信机制，完全能做到在两个独立窗口的DevTools之间传输数据。下面是几种实用的方案：

1. 用Chrome扩展消息传递API直接通信 #

如果你的两个DevTools窗口运行的是同一个扩展的实例，最直接的方式就是用chrome.runtime.sendMessage或chrome.runtime.connect：

• chrome.runtime.sendMessage适合一次性发送单条数据，接收方通过chrome.runtime.onMessage.addListener监听即可
• chrome.runtime.connect适合建立持久连接，方便持续传输数据

举个简单的实现示例：
发送方DevTools面板代码：

// 发送数据到其他DevTools实例
chrome.runtime.sendMessage({ 
  type: "devtools-cross-data", 
  payload: "Hello from DevTools Window A" 
});

接收方DevTools面板代码：

// 监听来自其他DevTools的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "devtools-cross-data") {
    console.log("Received data from another DevTools:", message.payload);
  }
});

2. 借助Chrome存储API共享数据 #

你可以把chrome.storage.local（或sync）作为中间数据仓库，一个DevTools窗口写入数据，另一个监听存储变化来获取数据：

发送方代码：

// 将数据写入本地存储
chrome.storage.local.set({ devtoolsSharedData: "Shared content from DevTools A" });

接收方代码：

// 监听存储数据的变化
chrome.storage.onChanged.addListener((changes, namespace) => {
  if (changes.devtoolsSharedData) {
    console.log("Got updated shared data:", changes.devtoolsSharedData.newValue);
  }
});

3. 通过页面postMessage间接传递（适合同源窗口） #

如果两个浏览器窗口属于同一源，你可以走“DevTools → 页面 → 目标页面 → 目标DevTools”的路径：先让发送方DevTools把数据传给当前页面，页面用postMessage发给目标页面，最后目标页面把数据转发给自己的DevTools。不过这种方式相对繁琐，适合特定场景。

需要注意的是，以上所有方案都要求代码运行在DevTools扩展的上下文中——普通的DevTools控制台代码无法直接使用这些Chrome扩展API，必须封装成正式的DevTools扩展才行。

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