Firefox浏览器扩展中如何存储可改写的用户数据至JSON文件？

一、用浏览器存储实现数据递增 #

Firefox扩展推荐使用browser.storage.local做持久化本地存储，数据会保留在用户浏览器中（除非手动清除扩展数据）。每次触发扩展时，按以下流程更新数据：

1. 读取当前存储的计数（默认值设为0）
2. 对计数执行递增操作
3. 将更新后的计数存回存储

示例代码：

async function incrementCount() {
  // 读取现有计数
  const { count } = await browser.storage.local.get('count');
  // 递增，无初始值则从0开始
  const newCount = (count || 0) + 1;
  // 保存更新后的数据
  await browser.storage.local.set({ count: newCount });
}

你可以把这个函数绑定到扩展的触发事件上，比如点击扩展图标、页面加载完成等。

二、导出JSON文件供用户查看 #

由于浏览器安全限制，扩展无法直接写入用户本地文件系统，需通过browser.downloads.download() API生成并触发下载，让用户保存JSON文件：

1. 读取存储中的数据
2. 转换为格式化的JSON字符串
3. 创建Blob对象并生成临时下载链接
4. 调用下载API让用户保存文件

示例代码：

async function exportToJSON() {
  // 读取存储数据
  const storedData = await browser.storage.local.get('count');
  // 生成格式化的JSON字符串
  const jsonContent = JSON.stringify(storedData, null, 2);
  // 创建Blob对象
  const blob = new Blob([jsonContent], { type: 'application/json' });
  // 生成临时URL
  const downloadUrl = URL.createObjectURL(blob);
  
  // 触发下载
  await browser.downloads.download({
    url: downloadUrl,
    filename: 'extension-count-data.json',
    saveAs: true // 让用户选择保存路径
  });
  
  // 释放临时URL资源
  URL.revokeObjectURL(downloadUrl);
}

三、配置扩展权限 #

在manifest.json中添加必要的权限，确保存储和下载API能正常使用：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["storage", "downloads"],
  "action": {
    "default_popup": "popup.html"
  }
}

四、实际使用示例 #

比如在扩展弹窗（popup.html）中添加按钮，点击时触发递增和导出：

<!-- popup.html -->
<button id="incrementBtn">计数+1</button>
<button id="exportBtn">导出数据</button>
<script src="popup.js"></script>

// popup.js
document.getElementById('incrementBtn').addEventListener('click', incrementCount);
document.getElementById('exportBtn').addEventListener('click', exportToJSON);

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