如何实现Chrome扩展与网页的双向通信并等待响应？

要解决window.postMessage单向通信无法等待响应的问题，可以通过给每个请求添加唯一标识，结合Promise实现请求-响应模式，具体实现如下：

Content Script 端代码 #

// 存储待处理的请求，key是请求ID，value是对应的resolve函数
const pendingRequests = new Map();

// 生成唯一请求ID
function generateRequestId() {
  return `req_${Date.now()}_${Math.random().toString(36).slice(2)}`;
}

// 监听网页发来的消息（响应）
window.addEventListener('message', function(event) {
  // 验证消息来源（建议替换为目标网页域名，提升安全性）
  if (event.origin !== '*' && !event.origin.includes('你的目标域名')) return;
  
  const { type, requestId, responseData } = event.data;
  // 如果是响应消息，找到对应的resolve函数并触发
  if (type === 'page_response' && pendingRequests.has(requestId)) {
    const resolve = pendingRequests.get(requestId);
    resolve(responseData);
    pendingRequests.delete(requestId);
  }
});

// 封装带响应的消息发送函数
async function sendMessageToPage(data) {
  const requestId = generateRequestId();
  return new Promise((resolve) => {
    // 存储resolve函数，等待响应触发
    pendingRequests.set(requestId, resolve);
    // 发送请求，带上唯一ID
    window.postMessage({
      type: 'content_script_request',
      requestId,
      requestData: data
    }, '*'); // 建议替换为目标网页的具体域名，比如'https://example.com'
  });
}

// 使用示例
async function testRequest() {
  console.log('cs sending request');
  try {
    const response = await sendMessageToPage({ text: 'Hello from content_script.js!' });
    console.log('cs got response:', response);
  } catch (error) {
    console.error('cs request failed:', error);
  }
}

setTimeout(testRequest, 1000);

网页端代码 #

window.addEventListener('message', function(event) {
  // 验证消息来源（Chrome扩展的content script的origin是chrome-extension://[你的扩展ID]）
  if (!event.origin.startsWith('chrome-extension://')) return;
  
  const { type, requestId, requestData } = event.data;
  // 如果是来自content script的请求，处理后回复
  if (type === 'content_script_request') {
    console.log('page got request:', requestData);
    // 模拟处理逻辑
    const responseData = {
      text: `Hello from page! Received: ${requestData.text}`
    };
    // 回复消息，带上相同的requestId
    window.postMessage({
      type: 'page_response',
      requestId,
      responseData
    }, event.origin);
  }
});

关键说明 #

• 唯一请求ID：确保每个请求都有唯一标识，让发送方能准确匹配对应的响应。
• Promise封装：通过Promise把异步的消息响应转化为同步写法（async/await），实现"等待响应"的效果。
• 安全校验：务必替换代码中的targetOrigin和消息来源校验逻辑，避免恶意网站的消息干扰，提升通信安全性。

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