为插件/侧边栏实现跟随宿主语言偏好的国际化方案：模块级 t(…

# Chrome 插件多语言 t() 方案（中/英/日 + 英文回退）

一、设计思路

• 维护三份语言包（en/zh/ja），t() 按 key 取值
• 语言来源优先级：用户手动设置 > 浏览器语言（chrome.i18n.getUILanguage() 或 navigator.language）
• 任一层级未命中，逐级回退到英文，英文兜底 key 本身

二、语言包结构

```js

// locales/en.js

export default {

hello: "Hello",

settings: "Settings"

};

// locales/zh.js

export default { hello: "你好", settings: "设置" };

// locales/ja.js

export default { hello: "こんにちは", settings: "設定" };

```

建议英文语言包 key 最全，其他语言缺失时自然走英文。

三、核心 t() 实现

```js

const packs = {

en: (await import("./locales/en.js")).default,

zh: (await import("./locales/zh.js")).default,

ja: (await import("./locales/ja.js")).default,

};

// 浏览器语言 → 归一化为 en/zh/ja

function detectLocale() {

const raw = (chrome?.i18n?.getUILanguage?.() || navigator.language || "en").toLowerCase();

if (raw.startsWith("zh")) return "zh";

if (raw.startsWith("ja")) return "ja";

return "en";

}

// 支持用户手动切换覆盖

function getLocale() {

return localStorage.getItem("locale") || detectLocale();

}

const interpolate = (str, params) =>

params ? str.replace(/\{(\w+)\}/g, (_, k) => params[k] ?? {${k}}) : str;

export function t(key, params) {

const locale = getLocale();

return (

interpolate(packs[locale]?.[key], params) ??

interpolate(packs.en[key], params) ??

key // 最终兜底：直接显示 key

);

}

```

四、侧边栏接入要点

• Side Panel 是独立 HTML 页面，navigator.language 可直接用；若用了 _locales + manifest default_locale，可改用 chrome.i18n.getMessage，但自定义 t() 更灵活（支持插值、运行时切换）
• 切换语言后需刷新 UI：可派发自定义事件或让 React/Vue 的 store 触发重渲染

五、常见坑

• zh-TW/zh-HK 归一化：需细化时单独建 zh-TW 包，否则并入 zh
• 插值 {name} 占位符统一规范，避免各语