Firefox扩展：如何从Popup读取后台脚本变量？

开发者阿泽

2026-6-29

三种实现textVar传递给popup.html的方法

方法一：使用浏览器消息传递

popup加载后主动向background请求数据：

在popup的JS文件（比如popup.js）中添加：

document.addEventListener('DOMContentLoaded', async () => {
  const response = await browser.runtime.sendMessage({ action: 'getTextVar' });
  console.log(response.text); // 此处可获取textVar的值
});

在background_script.js中添加消息监听逻辑：

// 保留原有的textVar定义及菜单创建代码
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'getTextVar') {
    sendResponse({ text: textVar });
  }
});

方法二：利用浏览器本地存储

将textVar存入浏览器本地存储，popup直接读取：

在background_script.js中初始化存储：

const textVar = "some text";
// 存入browser.storage.local（跨上下文场景下比localStorage更可靠）
browser.storage.local.set({ textVar: textVar });

在popup.js中读取存储的数据：

document.addEventListener('DOMContentLoaded', async () => {
  const result = await browser.storage.local.get('textVar');
  console.log(result.textVar); // 获取textVar的值
});

注意：使用browser.storage需要在manifest.json中声明"storage"权限。

方法三：打开popup时通过URL传参

打开弹窗时将textVar作为URL参数附加到popup.html后：

修改background_script.js中的windows.create代码：

browser.windows.create({
  url: `popup.html?text=${encodeURIComponent(textVar)}`,
  type: "popup",
  width: 500,
  height: 400,
  left: 200,
  top: 200,
});

在popup.js中解析URL参数：

document.addEventListener('DOMContentLoaded', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const text = urlParams.get('text');
  console.log(text); // 获取解码后的textVar值
});