Chrome浏览器扩展Manifest V3版本如何从其他服务器获取JSON数据？

核心逻辑说明 #

扩展上下文（popup、后台Service Worker、扩展自有页面）的请求只要配置了对应域名权限，就不受CORS限制；注入到网页的content script会受页面CORS限制，所以请求要放到扩展的后台Service Worker中执行。Manifest V3并没有取消后台逻辑支持，只是把原来的持久化后台页替换成了更轻量的Service Worker，完全可以满足后台定时更新的需求。

步骤1：配置manifest.json #

需要新增的配置项如下：

{
  "manifest_version": 3,
  "permissions": ["alarms", "storage"],
  "host_permissions": ["https://my.server.domain/*"],
  "background": {
    "service_worker": "background.js"
  }
}

参数说明：

• host_permissions：配置你要请求的服务器域名，授权后扩展上下文发起该域名的请求不会触发CORS限制
• alarms：定时触发权限，用于实现定期更新，比setTimeout更稳定，不会因为Service Worker休眠失效
• storage：扩展存储权限，替代原来的localStorage，Service Worker环境不支持localStorage，且chrome.storage.local支持跨扩展上下文同步数据

步骤2：编写后台Service Worker逻辑（background.js） #

代码示例：

// 扩展安装时注册定时任务，示例为每6小时触发一次更新
chrome.runtime.onInstalled.addListener(() => {
  // 首次安装立刻执行一次更新
  updateCurrencyData();
  // 注册周期闹钟，单位为分钟
  chrome.alarms.create('update_currency', { periodInMinutes: 360 });
});

// 监听闹钟触发事件
chrome.alarms.onAlarm.addListener(alarm => {
  if (alarm.name === 'update_currency') {
    updateCurrencyData();
  }
});

// 监听来自content script/popup的主动拉取请求
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.type === 'get_currency') {
    updateCurrencyData().then(data => sendResponse({ success: true, data })).catch(e => sendResponse({ success: false, msg: e.message }));
    // 异步返回需要返回true保持消息通道开放
    return true;
  }
});

// 实际更新逻辑
async function updateCurrencyData() {
  // 注意检查你的请求地址拼写，你给出的示例中多了一个h前缀
  const resp = await fetch('https://my.server.domain/currency.txt');
  const currencyData = await resp.json();
  // 存储到扩展本地存储
  await chrome.storage.local.set({ currencyData });
  return currencyData;
}

步骤3：其他场景获取数据 #

• popup中可以直接调用chrome.storage.local.get('currencyData')读取数据，也可以发消息给后台主动触发更新
• content script如果需要用数据，可以通过chrome.runtime.sendMessage向后台请求，不会触发CORS问题

注意事项 #

不要用localStorage存储数据，Service Worker环境没有localStorageAPI，chrome.storage.local是扩展专用的存储方案，支持所有扩展上下文访问，容量限制也远高于localStorage。

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