Firefox浏览器扩展如何保存textarea输入数据？

开发者阿泽

2026-8-21

实现Firefox扩展弹窗textarea内容留存功能

步骤1：修改弹窗HTML文件

在popup/popup.html中添加脚本引用，让我们能通过JS操作存储和textarea：

<textarea id="InputListOfURLs" cols="75" rows="30" style="white-space: pre; overflow-wrap: normal; overflow-x: scroll;"></textarea>
<!-- 添加这行，引入后续要写的JS逻辑文件 -->
<script src="popup.js"></script>

步骤2：创建弹窗逻辑JS文件

在popup文件夹下新建popup.js文件，写入以下代码：

// 获取页面中的textarea元素
const inputTextarea = document.getElementById('InputListOfURLs');

// 弹窗加载完成后，读取之前保存的内容
document.addEventListener('DOMContentLoaded', async () => {
  // 从本地存储中获取名为savedText的数据
  const savedData = await browser.storage.local.get('savedText');
  // 如果有保存的内容，填充到textarea里
  if (savedData.savedText) {
    inputTextarea.value = savedData.savedText;
  }
});

// 监听用户输入，实时保存内容到本地存储
inputTextarea.addEventListener('input', async () => {
  // 将当前textarea的内容存入本地存储，键名为savedText
  await browser.storage.local.set({ savedText: inputTextarea.value });
});

代码说明

browser.storage.local是Firefox扩展提供的本地存储API，你的manifest已经申请了storage权限，所以可以直接使用。这个存储是跨页面、跨网站持久保存的，只要扩展不卸载就会保留内容。
DOMContentLoaded事件确保页面元素加载完成后再执行读取操作，避免出现找不到textarea的情况。
input事件会在用户每输入一个字符时触发，实时保存内容，就算弹窗意外关闭，输入的内容也不会丢失。