Manifest V3版Chrome扩展问题：调用谷歌翻译执行脚本遇权限错误

1. Background.js能否访问外部网站？ #

完全可以。只要在manifest.json的host_permissions中声明目标外部域名，Background脚本就能发起跨域请求，不受浏览器同源策略限制。

2. 权限错误的原因与修复 #

你遇到的Cannot access contents of the page错误，本质是向translate.google.com标签注入脚本时，未正确配置对应主机权限，且新开标签页后立即执行脚本可能因页面未完全加载导致权限校验失败。

更优的方案是跳过新开标签页+注入脚本的冗余逻辑，直接在Background中调用谷歌翻译的公共接口获取结果，既避免权限问题，又提升效率。

3. 无需自建后端的翻译实现方案 #

你可以直接调用谷歌翻译的公共接口（适合个人非商用场景），无需自建后端，同时支持自动检测源语言。以下是完整修正方案：

第一步：更新manifest.json权限 #

确保配置以下权限：

{
  "manifest_version": 3,
  "permissions": ["contextMenus", "storage"],
  "host_permissions": ["https://translate.googleapis.com/*"],
  "background": {
    "service_worker": "background.js"
  }
}

第二步：重写background.js逻辑 #

去掉新开标签页的操作，直接用fetch请求翻译接口：

// 初始化右键菜单
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "translateToEnglish",
    title: "翻译为英文",
    contexts: ["selection"]
  });
  chrome.contextMenus.create({
    id: "translateToChinese",
    title: "翻译为中文",
    contexts: ["selection"]
  });
});

chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  if (!["translateToEnglish", "translateToChinese"].includes(info.menuItemId)) return;

  const word = info.selectionText.trim();
  if (!word) return;

  const targetLang = info.menuItemId === "translateToEnglish" ? "en" : "zh-CN";
  try {
    // 调用谷歌翻译公共接口，自动检测源语言
    const response = await fetch(`https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${targetLang}&dt=t&q=${encodeURIComponent(word)}`);
    const data = await response.json();
    
    // 提取翻译结果
    const translation = data[0][0][0];
    console.log(`翻译结果（${targetLang === "en" ? "英文" : "中文"}）：`, translation);

    // 将翻译对存入Chrome本地存储
    chrome.storage.local.get({ translationPairs: [] }, (result) => {
      const updatedPairs = [...result.translationPairs, { word, translation, targetLang, timestamp: Date.now() }];
      chrome.storage.local.set({ translationPairs: updatedPairs }, () => {
        console.log("翻译记录已保存");
      });
    });
  } catch (error) {
    console.error("翻译请求失败：", error);
  }
});

关键说明 #

• 该公共接口无需API密钥，适合个人使用；若用于商用，建议使用谷歌官方Cloud Translation API（含免费额度）。
• 直接在Background中请求接口，彻底避免标签页注入脚本的权限问题，逻辑更简洁高效。
• 翻译记录存入本地存储时，注意控制数据量（10MB足够存储大量文本翻译对），可按需定期清理旧记录。

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