1、谷歌翻译插件

一、核心实现流程

用户触发翻译 → 获取网页文本 → 调用翻译API → 替换页面内容 → 恢复功能

二、各环节用到的API

1. 用户触发翻译

  • 触发时机
    • chrome.action.onClicked：点击扩展图标弹出翻译面板
    • chrome.contextMenus：右键菜单添加"翻译选中文字"
    • chrome.commands：设置快捷键（如Ctrl+Shift+T）

2. 获取网页文本内容

  • Content Scripts：注入到网页中，通过 documentAPI​ 提取文本
  • document.createTreeWalker()​ 或 querySelectorAll()：遍历DOM节点
  • 过滤逻辑：排除<script>、<style>等不需要翻译的标签

3. 文本分析与处理

  • DOMParser：解析HTML结构
  • RangeAPI：处理选中的文本范围
  • Node.textContent​ 和 Element.innerText：提取纯文本

4. 调用翻译API

  • fetch()​ 或 XMLHttpRequest：调用谷歌翻译API
  • API端点：translate.googleapis.com（免费的公共API）
  • chrome.storage：存储用户选择的语言偏好

5. 替换页面内容

  • DOM操作API：innerHTML、textContent（最安全）、setAttribute等
  • MutationObserver：监听动态加载的内容并翻译
  • chrome.runtime.sendMessage()：Content Script与Background通信

6. 状态管理与恢复

  • chrome.storage.local：保存翻译状态、原文缓存
  • WeakMap​ 或自定义映射表：记录原文与译文的对应关系
最后更新: