如何修复Chrome/Firefox浏览器扩展中TypeError: browser.storage未定义问题？

嘿，针对你在Firefox扩展里跨HTML文件设置textarea值的需求，用本地存储同步数据确实是个靠谱的思路，我帮你把代码逻辑补全并梳理清楚，确保能顺利跑起来：

1. 先把数据存入本地存储 #

首先得把要设置的内容存到localStorage里，如果是扩展内部的不同UI页面（比如popup和选项页），它们共享同一个localStorage上下文，直接存就行：

// 示例：在任意扩展页面存储摘要内容
function saveSummaryToStorage(summary) {
  localStorage.setItem('savedSummary', summary);
  console.log('已将内容存入本地存储:', summary);
}

2. 完善你的createSummaryBox函数 #

你写的createSummaryBox需要从本地存储取数，还要确保DOM加载完成后再执行，不然可能找不到textarea元素：

function createSummaryBox() {
  console.log("开始设置textarea内容...");
  // 从本地存储取出保存的内容
  const savedSummary = localStorage.getItem('savedSummary');
  
  // 替换成你实际的textarea选择器（比如id或者class）
  const textarea = document.getElementById('summaryTextarea');
  
  if (textarea && savedSummary) {
    textarea.value = savedSummary;
    console.log("textarea内容设置成功:", savedSummary);
  } else if (!textarea) {
    console.error("找不到目标textarea！请检查DOM选择器是否正确");
  } else {
    console.log("本地存储里还没有保存的内容哦");
  }
}

// 一定要等DOM加载完成再执行函数！
document.addEventListener('DOMContentLoaded', createSummaryBox);

3. 跨场景同步的注意事项 #

如果是内容脚本和扩展UI页面之间同步数据，内容脚本不能直接访问扩展的localStorage，这时候得用扩展的消息传递机制：

// 内容脚本里发消息给扩展后台
browser.runtime.sendMessage({type: 'saveSummary', summary: '你的目标内容'});

// 扩展后台里监听消息并存储
browser.runtime.onMessage.addListener((message) => {
  if (message.type === 'saveSummary') {
    localStorage.setItem('savedSummary', message.summary);
  }
});

Chrome扩展的话，只需要把browser换成chrome就行，逻辑完全一致

4. 调试小技巧 #

• 打开扩展的开发者工具（Firefox里可以在about:debugging中找到对应扩展并打开调试面板），看Console日志确认数据是否存对、取对。
• 去Storage面板里查看localStorage，确认savedSummary这个键是否存在，值是不是你要的内容。

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