如何在Chrome扩展中使用JavaScript读写JSON数据？

嘿，我来帮你搞定这个问题！首先得明确一个关键限制：Chrome扩展无法直接读写打包在扩展目录里的.json文件——因为这个文件属于扩展的静态资源，是只读的。所以我们得结合Chrome提供的存储API来实现数据的读取和持久化修改，下面分步骤给你讲具体操作：

一、读取扩展包内的JSON文件 #

如果你的.json是打包在扩展目录里的（比如命名为data.json），可以用fetch API结合扩展的资源路径来读取它，之后解析JSON就能拿到someValue的值了。

示例代码：

// 读取扩展内的data.json文件
fetch(chrome.runtime.getURL('data.json'))
  .then(response => response.json())
  .then(data => {
    // 提取someValue的值
    const targetValue = data.members.Thing.someValue;
    console.log("someValue的值是：", targetValue); // 控制台会输出"1"
  })
  .catch(error => console.error("读取JSON文件失败：", error));

二、修改数据并持久化保存 #

因为不能直接修改扩展包里的静态JSON文件，我们需要把数据迁移到Chrome的本地存储（chrome.storage.local）中，之后的读写操作都基于这个存储来完成。

步骤1：初始化存储（首次运行时加载初始数据） #

先把扩展内的JSON数据导入到Chrome存储里，这个操作只需要执行一次：

function initAppData() {
  chrome.storage.local.get('appData', (result) => {
    // 如果存储里还没有数据，就导入初始JSON
    if (!result.appData) {
      fetch(chrome.runtime.getURL('data.json'))
        .then(res => res.json())
        .then(initialData => {
          chrome.storage.local.set({ appData: initialData }, () => {
            console.log("初始数据已成功存入本地存储");
          });
        });
    }
  });
}

// 在扩展启动时调用初始化函数（比如在background脚本或popup脚本的入口处）
initAppData();

步骤2：读取并修改数据 #

现在可以从存储里读取数据，修改anotherValue为3，再存回存储：

// 读取存储中的数据并修改
chrome.storage.local.get('appData', (result) => {
  if (result.appData) {
    const appData = result.appData;
    // 修改anotherValue的值为"3"（如果需要数字类型可以直接写3）
    appData.members.Thing.anotherValue = "3";

    // 将修改后的数据存回本地存储
    chrome.storage.local.set({ appData: appData }, () => {
      console.log("数据已更新！anotherValue现在是：", appData.members.Thing.anotherValue);
    });
  }
});

注意：添加存储权限 #

别忘了在你的manifest.json中添加storage权限，否则无法使用Chrome存储API：

{
  "manifest_version": 3, // 如果你使用的是Manifest V3版本
  "permissions": ["storage"],
  // 其他扩展配置项（比如name、version等）...
}

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