如何在浏览器扩展中读写扩展目录内的本地JSON文件？

首先明确浏览器扩展的基础安全限制：扩展安装后会被浏览器打包到专属只读目录，你无法直接通过代码修改原始的dragons.json文件，但可以通过「读取初始JSON + 扩展专属存储持久化修改」的方案实现完全等价的读写效果，全程不需要访问用户本地文件、不需要联网，完全满足个人使用需求。

1. 修改manifest.json配置 #

以当前主流的Manifest V3为例，需要补充两项配置：

• 申请storage权限，用于持久化你对龙数据的修改
• 将dragons.json加入可访问资源列表，允许content script请求读取该文件

配置示例如下，你原有的匹配规则、脚本配置保持不变即可：

{
  "manifest_version": 3,
  "name": "你的龙主题扩展名称",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"]
    }
  ],
  "permissions": ["storage"],
  "web_accessible_resources": [
    {
      "resources": ["dragons.json"],
      "matches": ["<all_urls>"]
    }
  ]
}

2. 实现数据读取逻辑 #

读取逻辑做两层兼容：优先读取扩展本地存储里的修改后数据，如果是首次运行没有存储记录，就读取扩展目录下的初始dragons.json文件，同时把初始数据存入存储方便后续快速读取。
在content-script.js中添加如下代码：

// 读取龙数据
async function getDragonsData() {
  // 先查询本地存储的已修改数据
  const storedData = await chrome.storage.local.get('dragonsData');
  if (storedData.dragonsData) {
    return storedData.dragonsData;
  }
  // 无存储数据时，读取扩展目录下的初始JSON文件
  const fileUrl = chrome.runtime.getURL('dragons.json');
  const res = await fetch(fileUrl);
  const initialData = await res.json();
  // 将初始数据写入存储，后续直接读存储即可
  await chrome.storage.local.set({ dragonsData: initialData });
  return initialData;
}

3. 实现数据写入/修改逻辑 #

所有对龙数据的修改直接写入扩展专属的storage.local即可，这个存储是完全本地的，不会上传数据、不会被其他扩展访问，重启浏览器也不会丢失：

// 保存修改后的龙数据
async function saveDragonsData(newData) {
  await chrome.storage.local.set({ dragonsData: newData });
}

调用示例 #

// 测试读写流程
async function dragonDataTest() {
  // 读取当前数据
  const dragonList = await getDragonsData();
  console.log('当前龙数据：', dragonList);

  // 示例：新增一条龙数据
  dragonList.push({
    name: "墨龙",
    attribute: "水",
    power: 980
  });

  // 保存修改
  await saveDragonsData(dragonList);

  // 再次读取即为修改后的数据
  const updatedList = await getDragonsData();
  console.log('修改后龙数据：', updatedList);
}

dragonDataTest();

注意事项 #

• 如果你手动修改了扩展文件夹里的原始dragons.json初始内容，需要打开浏览器扩展管理页，找到对应扩展点击刷新，同时清除扩展的本地存储数据，才能加载新的初始内容
• 不要尝试用file://协议路径或Node.js的fs模块读取文件，浏览器沙箱会直接拦截这类操作，上述chrome.runtime.getURL+fetch是官方支持的标准扩展资源读取方式
• chrome.storage.local默认配额至少5MB，存储龙相关的自定义数据完全够用，单条数据只要不超过Chrome限制就不会有问题

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