如何开发Chrome扩展实现Hover显示Vue项目翻译JSON键名？

一、将本地 JSON 翻译文件关联到扩展 #

1. 扩展目录结构调整 #

把项目里的 src/translations/en-gb.json 复制到你的 Chrome 扩展目录中，建议创建专门的 translations 文件夹存放：

chrome-extension/
├─ manifest.json
├─ content.js       # 处理页面交互的内容脚本
└─ translations/
   └─ en-gb.json

2. 配置 Manifest 文件 #

在 manifest.json 中声明可访问的资源和内容脚本匹配规则（以 Manifest V3 为例）：

{
  "manifest_version": 3,
  "name": "Vue I18n Key Hover",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["http://localhost:*/*", "https://your-vue-app-domain.com/*"], // 替换为你的 Vue 应用域名
      "js": ["content.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["translations/en-gb.json"],
      "matches": ["http://localhost:*/*", "https://your-vue-app-domain.com/*"]
    }
  ]
}

3. 在内容脚本中加载 JSON #

通过 chrome.runtime.getURL 获取扩展内 JSON 文件的路径，再用 fetch 加载并存储：

let translationData = null;
// 加载翻译数据
fetch(chrome.runtime.getURL('translations/en-gb.json'))
  .then(res => res.json())
  .then(data => {
    translationData = data;
  });

二、实现悬停显示翻译键功能 #

核心思路 #

有两种方案实现元素与翻译键的对应，优先推荐方案一（准确性更高）：

方案一：Vue 模板添加自定义属性（推荐）

修改 Vue 项目的模板，给使用 $t 的元素添加自定义属性，直接标记翻译键：

<p data-i18n-key="table.title">{{ $t('table.title') }}</p>
<label data-i18n-key="form.name">{{ $t('form.name') }}</label>

然后在内容脚本中直接读取该属性显示：

// 创建悬浮弹窗
const tooltip = document.createElement('div');
Object.assign(tooltip.style, {
  position: 'fixed',
  background: '#333',
  color: '#fff',
  padding: '4px 8px',
  borderRadius: '4px',
  fontSize: '12px',
  zIndex: '9999',
  display: 'none'
});
document.body.appendChild(tooltip);

// 监听悬停事件
document.addEventListener('mouseover', (e) => {
  const target = e.target;
  if (['P', 'LABEL'].includes(target.tagName)) {
    const key = target.dataset.i18nKey;
    if (key) {
      tooltip.textContent = key;
      tooltip.style.display = 'block';
      tooltip.style.left = `${e.clientX + 10}px`;
      tooltip.style.top = `${e.clientY + 10}px`;
    }
  }
});

// 监听移出事件
document.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

方案二：文本反向匹配 JSON（无需修改 Vue 项目）

如果无法修改 Vue 项目代码，可以通过渲染后的文本反向查找对应的翻译键（注意：文本重复时会显示所有匹配的键）：

// 递归查找文本对应的所有键路径
function findKeysByValue(obj, targetText, currentPath = '') {
  const matchedKeys = [];
  for (const key in obj) {
    const fullPath = currentPath ? `${currentPath}.${key}` : key;
    if (typeof obj[key] === 'object') {
      matchedKeys.push(...findKeysByValue(obj[key], targetText, fullPath));
    } else if (obj[key].trim() === targetText.trim()) {
      matchedKeys.push(fullPath);
    }
  }
  return matchedKeys;
}

// 替换悬停事件逻辑
document.addEventListener('mouseover', (e) => {
  const target = e.target;
  if (['P', 'LABEL'].includes(target.tagName) && translationData) {
    const text = target.textContent.trim();
    if (text) {
      const keys = findKeysByValue(translationData, text);
      if (keys.length > 0) {
        tooltip.textContent = keys.join(', ');
        tooltip.style.display = 'block';
        tooltip.style.left = `${e.clientX + 10}px`;
        tooltip.style.top = `${e.clientY + 10}px`;
      }
    }
  }
});

三、Chrome 扩展更新相关问题 #

1. 自动更新（发布到 Chrome Web Store） #

• Chrome 浏览器默认每 5 小时检查一次扩展更新，只要你在 Web Store 上传新版本，用户浏览器会自动下载并更新扩展。
• 更新时需注意：如果 JSON 翻译文件有修改，新版本扩展会加载新的文件，无需额外处理缓存（Chrome 会自动区分版本资源）。

2. 本地开发更新（开发者模式加载） #

• 打开 Chrome 扩展管理页面（chrome://extensions/），找到你的扩展，点击「重新加载」按钮即可更新本地修改的代码和资源。
• 若遇到缓存问题，可以勾选「开发者模式」下的「允许访问文件网址」，或在 fetch 请求中添加缓存控制：

  fetch(chrome.runtime.getURL('translations/en-gb.json'), { cache: 'no-store' })
  

3. 更新注意事项 #

• 扩展版本号必须递增（比如从 1.0 改为 1.1），否则 Chrome 不会识别为新版本。
• 如果扩展依赖的翻译文件结构有重大变化，建议在内容脚本中添加版本判断，清空旧的缓存数据后重新加载新文件。

内容的提问来源于stack exchange，提问作者R-b-n