扩展开发中不使用fs模块如何将数据保存到本地JSON文件

以下方案适配不同扩展开发场景，可根据你的实际开发环境选择：

浏览器扩展（Chrome/Edge等Chromium内核扩展通用） #

• 方案1：触发浏览器下载直接生成本地JSON文件
  把要存储的JSON数据转为Blob对象后通过扩展的下载API触发保存，用户选择本地路径即可生成JSON文件，示例代码如下：

  // 要保存的JSON数据
  const targetData = {
    name: "测试数据",
    count: 10,
    list: [1, 3, 5, 7]
  }
  // 转为Blob对象
  const dataBlob = new Blob([JSON.stringify(targetData, null, 2)], {type: 'application/json'})
  const blobUrl = URL.createObjectURL(dataBlob)
  // 调用扩展下载API
  chrome.downloads.download({
    url: blobUrl,
    filename: 'export-data.json',
    saveAs: true // 开启后会弹出窗口让用户自选保存位置
  }, () => URL.revokeObjectURL(blobUrl))
  

  注意：需要在扩展的manifest.json配置文件中声明downloads权限才能正常调用API
• 方案2：用扩展内置存储持久化JSON数据
  如果你不需要用户直接访问本地JSON文件，只是扩展本身需要持久化存储JSON结构的数据，可以直接用浏览器扩展自带的存储API，支持直接存取JSON可序列化对象，不需要手动做格式转换：

  // 存储数据
  await chrome.storage.local.set({customData: targetData})
  // 读取数据
  const storageRes = await chrome.storage.local.get("customData")
  console.log(storageRes.customData)
  

VS Code扩展 #

如果是VS Code扩展场景无法直接引入node原生fs模块，可以直接用VS Code封装好的跨平台文件操作API：

const vscode = require('vscode')
const targetData = {key: "value"}
// 生成目标文件的URI
const fileUri = vscode.Uri.file('你要保存的本地路径/data.json')
// 写入文件
await vscode.workspace.fs.writeFile(fileUri, Buffer.from(JSON.stringify(targetData, null, 2)))

通用交互导出方案 #

如果你的扩展场景支持触发页面交互，还可以用a标签模拟下载实现导出，不需要申请任何宿主API权限：

const targetData = {key: "value"}
const dataBlob = new Blob([JSON.stringify(targetData, null, 2)], {type: 'application/json'})
const blobUrl = URL.createObjectURL(dataBlob)
const aTag = document.createElement('a')
aTag.href = blobUrl
aTag.download = 'data.json'
aTag.click()
URL.revokeObjectURL(blobUrl)

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