Chrome扩展：如何在内容脚本外发起API调用并以扩展为请求源？

你遇到的问题根源在于：通过main.js注入到网页DOM的content.js属于网页上下文，和当前访问的网页共享执行环境，所以发起的fetch请求会以网页的域名作为请求源。而扩展的background.js运行在扩展独立的后台上下文，请求源自然是chrome-extension://你的扩展ID，这也是之前测试时能达到预期效果的原因。

核心解决方案是：把API调用逻辑移到background.js中，通过Chrome扩展的消息通信机制，让网页中的按钮触发后台脚本执行API请求，再将结果返回给前端处理UI。

1. 在background.js中编写API请求逻辑 #

把原本放在注入脚本里的API请求代码移到后台脚本，并监听来自内容脚本的消息：

// background.js
// 监听内容脚本的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // 判断消息类型，执行对应逻辑
  if (request.action === 'fetchApiData') {
    // 发起API请求，替换成你的实际API地址和配置
    fetch('https://your-target-api.com/endpoint', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(res => res.json())
    .then(data => {
      // 将请求结果返回给内容脚本
      sendResponse({ success: true, data });
    })
    .catch(err => {
      sendResponse({ success: false, error: err.message });
    });
    // 返回true表示异步发送响应（否则sendResponse会失效）
    return true;
  }
});

2. 在扩展内容脚本（main.js）中触发请求并处理结果 #

如果你的按钮是通过main.js插入到网页的，直接在main.js中监听按钮点击，发送消息给后台：

// main.js
// 假设你已经将按钮插入到网页DOM中
const extensionButton = document.querySelector('#your-extension-button');
extensionButton.addEventListener('click', () => {
  // 发送消息给后台脚本
  chrome.runtime.sendMessage({ action: 'fetchApiData' }, (response) => {
    if (response.success) {
      // 拿到数据后更新网页UI，比如展示数据
      console.log('API返回数据:', response.data);
      // 这里可以直接操作DOM更新内容
    } else {
      console.error('API请求失败:', response.error);
    }
  });
});

3. 若需保留注入到DOM的content.js模块 #

如果你必须使用注入到DOM的content.js模块处理按钮逻辑，可以通过window.postMessage在注入脚本和扩展内容脚本之间传递消息，再转发给后台：

注入的content.js： #

// 注入到网页DOM的content.js
const extensionButton = document.querySelector('#your-extension-button');
extensionButton.addEventListener('click', () => {
  // 向扩展内容脚本发送请求信号
  window.postMessage({ type: 'EXTENSION_REQUEST_API' }, '*');
});

// 监听来自扩展内容脚本的结果返回
window.addEventListener('message', (e) => {
  if (e.source !== window || e.data.type !== 'EXTENSION_API_RESULT') return;
  const { success, data, error } = e.data.payload;
  if (success) {
    console.log('获取到API数据:', data);
    // 更新网页UI
  } else {
    console.error('请求失败:', error);
  }
});

扩展内容脚本main.js： #

// main.js
// 监听注入脚本的消息
window.addEventListener('message', (e) => {
  if (e.source !== window || e.data.type !== 'EXTENSION_REQUEST_API') return;
  // 转发消息给后台脚本
  chrome.runtime.sendMessage({ action: 'fetchApiData' }, (response) => {
    // 将结果返回给注入脚本
    window.postMessage({
      type: 'EXTENSION_API_RESULT',
      payload: response
    }, '*');
  });
});

关键说明 #

• 扩展的后台脚本（background.js）运行在独立的沙箱环境，拥有扩展的权限，发起的请求会自动以chrome-extension://你的扩展ID作为请求源。
• 避免在注入到网页DOM的脚本中直接发起API请求，这类脚本属于网页上下文，无法使用扩展的权限，请求源会被识别为当前网页。

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