Chrome扩展右键菜单开发：如何向popup.html传递变量？

嘿，你现在已经搞定了右键菜单唤起popup的功能，要把变量传递过去其实有几个实用的方案，我结合你的代码场景给你拆解下：

方法一：URL参数传递（适合简单小数据） #

这种方法最直接，把要传递的参数拼到popup.html的URL后面，popup页面加载时直接解析就能拿到数据。

修改你创建窗口的代码（就在fetch成功的回调里）：

// 把responseText转成JSON字符串并编码，避免URL乱码
const encodedData = encodeURIComponent(JSON.stringify(responseText));
var popup_url = `popup.html?data=${encodedData}`;
var createData = { "url": popup_url, "type": "popup", "top": 5, "left": 5, "width": 500, "height": 500 };
chrome.windows.create(createData, function(){});

然后在popup.html对应的JS文件（比如popup.js）里解析参数：

document.addEventListener('DOMContentLoaded', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const rawData = urlParams.get('data');
  const data = JSON.parse(decodeURIComponent(rawData));
  // 现在就能用data变量啦，比如打印出来或者渲染到页面上
  console.log('从背景脚本拿到的数据：', data);
});

小提醒：如果数据体积比较大，URL参数会有长度限制，这种情况就别用这个方法了。

方法二：chrome.storage临时存储（适合复杂/大数据） #

Chrome扩展的storage API可以临时存数据，popup打开后再读取，用完删掉就不会占用空间，很适合数据量大的场景。

先在你的背景脚本（右键菜单的回调里）存储数据：

// 生成一个唯一的存储key，避免和其他数据冲突
const tempKey = `temp_popup_data_${Date.now()}`;
// 把responseText存到local storage
chrome.storage.local.set({ [tempKey]: responseText }, () => {
  // 存储成功后，把key通过URL传给popup
  var popup_url = `popup.html?key=${tempKey}`;
  var createData = { "url": popup_url, "type": "popup", "top": 5, "left": 5, "width": 500, "height": 500 };
  chrome.windows.create(createData, function(){});
});

然后在popup.js里读取并清理临时数据：

document.addEventListener('DOMContentLoaded', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const tempKey = urlParams.get('key');
  chrome.storage.local.get(tempKey, (result) => {
    const data = result[tempKey];
    console.log('拿到的存储数据：', data);
    // 用完记得删掉，避免占空间
    chrome.storage.local.remove(tempKey);
  });
});

方法三：消息通信（适合实时交互场景） #

如果popup打开后需要主动从背景脚本拉取数据，可以用Chrome的消息通信API，这种方式不需要持久化数据，实时性更好。

首先在背景脚本里监听popup的消息请求，同时把fetch到的数据临时存在全局变量里：

// 临时存数据的全局变量
let tempResponse = null;

// 右键菜单点击的回调（你的原有代码）
chrome.contextMenus.onClicked.addListener((clickData) => {
  const url = 'http://localhost:5000/api/v1/players/' + fixedEncodeURI(clickData.selectionText);
  fetch(url, myInit)
    .then(response => response.json())
    .then(responseText => {
      tempResponse = responseText;
      var popup_url = 'popup.html';
      var createData = { "url": popup_url, "type": "popup", "top": 5, "left": 5, "width": 500, "height": 500 };
      chrome.windows.create(createData, function(){});
    });
});

// 监听来自popup的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'getPopupData') {
    sendResponse(tempResponse);
    // 发送后清空变量，避免残留
    tempResponse = null;
  }
});

然后在popup.js里发送消息请求数据：

document.addEventListener('DOMContentLoaded', () => {
  chrome.runtime.sendMessage({ action: 'getPopupData' }, (response) => {
    console.log('通过消息拿到的数据：', response);
    // 这里处理你的数据逻辑
  });
});

你可以根据自己的数据类型和大小选合适的方法：小数据用URL参数，大数据用storage，需要实时交互就用消息通信。

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