如何在Chrome扩展中根据用户输入切换不同语言版本的popup

你可以按以下步骤实现，全程不需要修改现有两个popup文件夹的内部文件逻辑：

1. 调整目录结构 #

将两个语言的popup文件夹以对应语言标识命名，示例结构如下：

├── popup/
│   ├── zh-CN/ // 中文popup文件夹
│   │   ├── popup.html
│   │   ├── popup.css
│   │   └── popup.js
│   └── en/ // 英文popup文件夹
│       ├── popup.html
│       ├── popup.css
│       └── popup.js
├── background.js
└── manifest.json

2. 配置manifest.json（以Manifest V3为例） #

移除action字段的默认popup配置，同时声明storage权限用于存储用户的语言选择：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["storage"],
  "action": {}, // 不要写默认popup配置
  "background": {
    "service_worker": "background.js"
  }
}

3. 后台监听点击事件动态加载对应popup #

在background.js中监听扩展图标点击事件，每次点击时读取用户存储的语言设置，动态指定要打开的popup路径：

chrome.action.onClicked.addListener(async () => {
  // 读取用户设置的语言，未设置时默认用中文
  const { lang = 'zh-CN' } = await chrome.storage.local.get('lang');
  // 动态设置popup路径
  await chrome.action.setPopup({ popup: `popup/${lang}/popup.html` });
  // 触发popup打开
  chrome.action.openPopup();
});

注意：chrome.action.openPopup方法需要Chrome 120及以上版本支持，如果需要兼容更低版本，可以省略这行代码，用户下次点击扩展图标时会自动加载新语言的popup

4. 实现用户语言切换逻辑 #

在任意popup中加入语言切换按钮，用户点击时将选择的语言存入本地存储即可，示例代码：

// 切换为英文的逻辑，写在中文popup的js文件中即可
document.querySelector('#switchToEnBtn').addEventListener('click', async () => {
  await chrome.storage.local.set({ lang: 'en' });
  // 可选：切换后立刻刷新当前popup，无需用户手动关闭重开
  window.location.href = chrome.runtime.getURL('popup/en/popup.html');
});

• 如果你使用的是Manifest V2版本，只需将上述代码中的chrome.action替换为chrome.browserAction，background改用对应background page配置即可
• 该方案完全保留两个popup文件夹的独立结构，互相不会产生逻辑干扰

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