Chrome扩展开发：如何读取与修改扩展文件目录下的本地JSON文件？

嘿，这个问题我刚好有实操经验！Chrome扩展里处理自身包内的JSON文件需要注意一个核心点：扩展安装后，其目录内的文件处于浏览器沙箱保护下，是只读状态的——也就是说你没法直接修改原JSON文件，但可以通过「读取原文件+将修改后的内容存入Chrome存储」的方式实现需求，具体步骤如下：

一、读取扩展目录中的JSON文件 #

你可以通过chrome.runtime.getURL()获取扩展内文件的绝对路径，再用fetch请求解析成JSON数据，代码示例如下：

// 异步读取扩展根目录下的data.json文件
async function readExtensionJson() {
  try {
    // 获取目标JSON文件的完整URL
    const fileUrl = chrome.runtime.getURL('data.json');
    const response = await fetch(fileUrl);
    
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    
    const jsonData = await response.json();
    console.log('读取到的原始JSON数据：', jsonData);
    return jsonData;
  } catch (error) {
    console.error('读取JSON文件出错：', error);
  }
}

// 调用读取函数
readExtensionJson();

注意事项： #

• 确保你的JSON文件（比如data.json）放在扩展的可访问路径下（通常是根目录）；
• 如果你用的是Chrome扩展Manifest V3，无需额外配置权限；如果是V2版本，也不需要特殊声明，扩展自身有权限访问内部文件。

二、修改并保存JSON内容（关键：不能直接修改原文件） #

因为原文件是只读的，我们需要先读取原始数据，在内存中修改后，将新数据存入Chrome的storage.local存储API中，后续使用时优先从存储读取，没有再 fallback 到原文件。

1. 修改并保存数据的代码 #

// 修改JSON数据并保存到Chrome存储
async function updateAndSaveJson(newData) {
  try {
    // 先读取原始JSON数据（如果需要基于原始数据修改）
    const originalData = await readExtensionJson();
    // 合并原始数据与新数据（这里的合并逻辑可根据你的需求调整）
    const updatedData = { ...originalData, ...newData };
    
    // 将修改后的数据存入storage.local
    await chrome.storage.local.set({ customJson: updatedData });
    console.log('修改后的JSON已保存到Chrome存储');
    return updatedData;
  } catch (error) {
    console.error('修改并保存JSON出错：', error);
  }
}

// 使用示例：修改JSON中的"username"字段
updateAndSaveJson({ username: 'new_user_001' });

2. 获取最终可用的JSON数据 #

后续使用时，优先读取存储中的修改后数据，没有则读取原始文件：

// 获取最终使用的JSON数据
async function getFinalJson() {
  try {
    const storedResult = await chrome.storage.local.get('customJson');
    if (storedResult.customJson) {
      console.log('从存储读取到修改后的JSON：', storedResult.customJson);
      return storedResult.customJson;
    } else {
      // 存储中无修改数据，返回原始文件数据
      return await readExtensionJson();
    }
  } catch (error) {
    console.error('获取JSON数据出错：', error);
  }
}

3. Manifest配置要求 #

无论你用V2还是V3，都需要在manifest.json中声明storage权限：

{
  "manifest_version": 3, // 如果你用V2就改成2
  "permissions": ["storage"],
  // 其他扩展配置（比如name、version、action等）...
}

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