如何通过chrome.i18n Web扩展API一次性获取message.json全部内容

chrome.i18n 官方API没有提供一次性获取全量本地化消息的内置方法，目前有两种成熟的实现方式，可根据项目场景选择：

方案1：运行时直接读取本地化文件 #

扩展自身的运行上下文（popup、后台服务worker、内容脚本）都可以直接请求扩展包内的资源，不需要额外配置权限，也不需要手动维护消息名列表：

// 处理语言码格式：Chrome返回的BCP47格式带横杠，对应_locales下的目录名用下划线
const currentLang = chrome.i18n.getUILanguage().replace('-', '_');
// 拼接messages.json的访问路径
const messagesPath = chrome.runtime.getURL(`_locales/${currentLang}/messages.json`);
// 默认语言兜底，根据自己扩展的默认配置修改即可
const fallbackPath = chrome.runtime.getURL('_locales/en/messages.json');

async function loadAllMessages() {
  let res;
  try {
    res = await fetch(messagesPath);
    // 当前语言文件不存在时用兜底语言
    if (!res.ok) res = await fetch(fallbackPath);
  } catch (e) {
    res = await fetch(fallbackPath);
  }
  const rawMsgMap = await res.json();
  const finalMsgMap = {};
  for (const key of Object.keys(rawMsgMap)) {
    // 跳过Chrome内置的@@开头的特殊系统字段
    if (key.startsWith('@@')) continue;
    // 走原生getMessage处理，自动兼容占位符、复数规则
    finalMsgMap[key] = chrome.i18n.getMessage(key);
  }
  return finalMsgMap;
}

// 使用：拿到全量消息后直接更新UI
const allMessages = await loadAllMessages();
Object.entries(allMessages).forEach(([key, text]) => {
  // 通用UI更新示例：给页面上带data-i18n属性、属性值等于消息key的元素赋值
  const el = document.querySelector(`[data-i18n="${key}"]`);
  if (el) el.textContent = text;
});

注意点：

• 如果你的扩展做了语言分包，或者部分语言没有做全量翻译，一定要加兜底逻辑，避免请求失败导致UI文本缺失
• 不要直接使用json文件里的message原始字段，通过chrome.i18n.getMessage做一层转换可以自动处理占位符替换、区域规则适配，省去自己写兼容逻辑的成本

方案2：构建阶段自动生成消息key列表 #

如果是用Vite、Webpack等构建工具开发的工程化扩展项目，可以在打包环节写个简单的Node脚本，直接读取_locales目录下的messages.json文件，自动提取所有消息key生成常量文件，代码里直接导入使用即可。
这种方式不需要运行时发额外的fetch请求，性能更好，也不会出现语言码格式不匹配、路径404的问题，适合正式发布的项目使用。

你之前用的手动维护消息名列表的方式本身没有功能问题，只是新增本地化字段时容易漏改列表，上面两种方案都可以彻底解决这个维护成本问题。

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