Chrome Apps中background.js获取的Google Sheets数据如何传递至popup.js？

嘿，这个问题我熟！Chrome Apps里的background.js和popup.js是完全独立的执行上下文，内存不互通，所以你直接在background里拿到的response变量，popup根本访问不到。不过别担心，Chrome提供了两种靠谱的方式来实现数据传递，我给你详细讲：

方法一：使用Chrome Runtime消息传递（实时通信首选） #

这种方式适合每次打开popup都需要最新数据的场景，原理是popup主动向background发送请求，background处理API调用后把数据返回给popup。

步骤1：在popup.js中发送请求并接收数据 #

当popup加载完成后，向background发送消息请求数据：

// popup.js
document.addEventListener('DOMContentLoaded', () => {
  // 向background发送获取表格数据的请求
  chrome.runtime.sendMessage({ action: 'fetchSheetsData' }, (response) => {
    if (response.error) {
      console.error('获取数据失败:', response.error);
      return;
    }
    // 这里拿到background返回的数据，随便你怎么用
    console.log('成功拿到表格数据:', response.data);
    // 示例：把数据渲染到popup页面的元素里
    document.getElementById('data-display').textContent = JSON.stringify(response.data, null, 2);
  });
});

步骤2：在background.js中监听消息并返回数据 #

把你原来的API调用逻辑封装一下，监听popup的消息请求，处理后返回数据：

// background.js
// 先封装获取Google Sheets数据的异步函数（把原来的同步XHR改成异步，同步请求在Chrome里不推荐）
function getSheetsData(token) {
  return new Promise((resolve, reject) => {
    const requestURL = `https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${range}`;
    const xhr = new XMLHttpRequest();
    
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject(new Error(`请求失败，状态码：${xhr.status}`));
        }
      }
    };
    
    xhr.open('GET', requestURL, true);
    xhr.setRequestHeader('Authorization', `Bearer ${token}`);
    xhr.send();
  });
}

// 监听来自popup的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // 判断请求类型
  if (request.action === 'fetchSheetsData') {
    // 获取授权token
    chrome.identity.getAuthToken({ interactive: true }, async (token) => {
      // 处理授权错误
      if (chrome.runtime.lastError) {
        sendResponse({ error: chrome.runtime.lastError.message });
        return;
      }
      
      try {
        // 调用API获取数据
        const sheetsData = await getSheetsData(token);
        // 把数据返回给popup
        sendResponse({ data: sheetsData });
      } catch (err) {
        sendResponse({ error: err.message });
      }
    });
    
    // 必须返回true，告诉Chrome等待异步的sendResponse调用
    return true;
  }
});

方法二：使用Chrome本地存储（缓存数据首选） #

如果你的数据不需要每次都实时拉取，或者想减少API调用次数，可以把background拿到的数据存在Chrome的本地存储里，popup直接从存储读取。

步骤1：在background.js中存储数据 #

当API调用成功后，把数据存入chrome.storage.local：

// background.js
chrome.identity.getAuthToken({ 'interactive': true }, function(token) { 
  const requestURL = `https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${range}`;
  const xhr = new XMLHttpRequest();
  
  xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4 && xhr.status == 200) { 
      const responseData = JSON.parse(xhr.responseText);
      // 把数据存入本地存储
      chrome.storage.local.set({ 'cachedSheetsData': responseData }, () => {
        console.log('数据已缓存到本地');
      });
    } 
  }; 
  
  xhr.open("GET", requestURL, true); 
  xhr.setRequestHeader('Authorization', 'Bearer ' + token); 
  xhr.send(); 
});

步骤2：在popup.js中读取存储的数据 #

popup加载时，从本地存储读取数据：

// popup.js
document.addEventListener('DOMContentLoaded', () => {
  chrome.storage.local.get('cachedSheetsData', (result) => {
    if (result.cachedSheetsData) {
      console.log('从缓存拿到的数据:', result.cachedSheetsData);
      // 处理数据
      document.getElementById('data-display').textContent = JSON.stringify(result.cachedSheetsData, null, 2);
    } else {
      console.log('缓存中没有数据，需要触发background拉取');
      // 这里可以调用方法一的消息传递，请求background获取数据
    }
  });
});

额外注意事项 #

1. 权限配置：确保你的manifest.json里已经添加了必要的权限：

"permissions": [
  "identity",
  "storage", // 用方法二的话需要加这个
  "https://sheets.googleapis.com/*"
],
"oauth2": {
  "client_id": "你的OAuth客户端ID",
  "scopes": [
    "https://www.googleapis.com/auth/spreadsheets.readonly" // 如果需要修改表格，改成"https://www.googleapis.com/auth/spreadsheets"
  ]
}

2. 避免同步XHR：你原来的代码用了同步XMLHttpRequest，这在Chrome里是不推荐的，甚至会被限制，所以一定要改成异步的（上面的示例已经改好了）。

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