Chrome扩展中在注入JS而非内容脚本执行XMLHttpRequest的求助

我懂你遇到的痛点了——注入到页面DOM的app.js属于页面上下文，没有Chrome扩展的权限直接发起XMLHttpRequest，而你的content.js作为content_script有这个权限，但之前用CustomEvent的方式没法传递回调结果，核心问题是普通事件传递是单向的，没法关联请求和对应的响应。下面给你一套完整的解决方案，用带唯一标识的事件+Promise来实现双向通信：

1. 核心思路 #

• app.js发起请求时，生成一个唯一的请求ID，把请求参数和ID通过自定义事件发给content.js
• content.js监听这个事件，代为执行XMLHttpRequest，请求完成后，把结果和对应的请求ID通过另一个自定义事件发回app.js
• app.js通过Promise等待对应ID的响应，拿到结果后完成回调

2. 具体代码实现 #

2.1 app.js（注入到DOM的脚本） #

// 封装一个通过content_script发送请求的函数，返回Promise
function fetchViaContentScript(options) {
  return new Promise((resolve, reject) => {
    // 生成唯一请求ID，用来匹配响应
    const requestId = `req-${Date.now()}-${Math.random().toString(36).slice(2)}`;

    // 监听content_script返回的响应事件
    function handleResponse(event) {
      if (event.detail.requestId === requestId) {
        document.removeEventListener('app-xhr-response', handleResponse);
        if (event.detail.success) {
          resolve(event.detail.data);
        } else {
          reject(new Error(event.detail.error));
        }
      }
    }
    document.addEventListener('app-xhr-response', handleResponse);

    // 发送请求事件给content_script
    document.dispatchEvent(new CustomEvent('app-xhr-request', {
      detail: {
        requestId,
        ...options // 传递请求参数：url, method, body, headers等
      }
    }));
  });
}

// 调用示例：在app.js里用这个函数发起请求
fetchViaContentScript({
  url: 'https://your-target-api.com/data',
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(data => {
  console.log('请求结果：', data);
  // 这里处理你的业务逻辑
})
.catch(error => {
  console.error('请求失败：', error);
});

2.2 content.js（content_script） #

// 监听app.js发来的请求事件
document.addEventListener('app-xhr-request', (event) => {
  const { requestId, url, method = 'GET', body = null, headers = {} } = event.detail;

  // 创建XMLHttpRequest并执行请求
  const xhr = new XMLHttpRequest();
  xhr.open(method, url);

  // 设置请求头
  Object.keys(headers).forEach(key => {
    xhr.setRequestHeader(key, headers[key]);
  });

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // 请求成功，发送响应事件给app.js
      document.dispatchEvent(new CustomEvent('app-xhr-response', {
        detail: {
          requestId,
          success: true,
          data: JSON.parse(xhr.responseText) // 根据实际情况处理响应数据
        }
      }));
    } else {
      // 请求失败，返回错误信息
      document.dispatchEvent(new CustomEvent('app-xhr-response', {
        detail: {
          requestId,
          success: false,
          error: `Request failed with status ${xhr.status}`
        }
      }));
    }
  };

  xhr.onerror = function() {
    document.dispatchEvent(new CustomEvent('app-xhr-response', {
      detail: {
        requestId,
        success: false,
        error: 'Network error occurred'
      }
    }));
  };

  xhr.send(body ? JSON.stringify(body) : null);
});

2.3 确保manifest.json配置正确 #

要确保你的content.js有对应的权限访问目标API，在manifest.json里添加：

{
  "host_permissions": [
    "https://your-target-api.com/*" // 替换成你请求的API域名
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换成你需要注入的页面匹配规则
      "js": ["content.js"]
    }
  ],
  // 其他manifest配置...
}

3. 关键注意点 #

• 请求ID的唯一性：用时间戳+随机字符串生成，确保每个请求都能匹配到对应的响应，避免混乱
• 事件命名区分：请求和响应事件用不同的名称（比如app-xhr-request和app-xhr-response），防止冲突
• 响应数据处理：根据你的API返回格式调整xhr.responseText的解析方式（比如如果是纯文本就不用JSON.parse）
• 内存泄漏预防：app.js里的响应监听器在拿到结果后要及时移除，避免积累无用的监听器

这样就能在app.js里优雅地发起请求并获取结果，完美解决你之前遇到的回调传递问题啦！

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