# maboloshi/github-chinese architecture

> Architecture diagram of the GitHub repository maboloshi/github-chinese, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/maboloshi/github-chinese
- Repository: https://github.com/maboloshi/github-chinese

## Overview

这是面向 GitHub 页面和 VS Code 集成浏览器的中文化产品：脚本按 URL 识别页面类型，依据词库和规则翻译界面，并处理动态 DOM、时间及项目描述。用户可通过用户脚本管理器运行，也可由 VS Code 扩展获取脚本并注入浏览器页面。README 还说明了智能正则、持续更新词库和未命中词条管理等能力。主脚本与扩展代码有摘录支持；词库结构及未摘录功能的细节仅按文档和文件路径表示。

Main entry points: [`main.user.js`](https://github.com/maboloshi/github-chinese/blob/gh-pages/main.user.js) (主翻译脚本), [`vscode-extension/src/extension.ts`](https://github.com/maboloshi/github-chinese/blob/gh-pages/vscode-extension/src/extension.ts) (VS Code 扩展), [`locals.js`](https://github.com/maboloshi/github-chinese/blob/gh-pages/locals.js) (简体词库), [`locals_zh-TW.js`](https://github.com/maboloshi/github-chinese/blob/gh-pages/locals_zh-TW.js) (繁体词库)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["页面本地化"]
  node_main["主翻译脚本<br/>[main.user.js]"]
  node_page_detect["页面识别<br/>[main.user.js]"]
  node_dom_translate["DOM 翻译<br/>[main.user.js]"]
  node_react_nav["导航与弹层<br/>[main.user.js]"]
  node_time_localize["时间本地化<br/>[main.user.js]"]
  node_description["描述翻译<br/>[main.user.js]"]
  node_missed_terms["未命中词条<br/>[main.user.js]"]
end

subgraph group_language["语言资源"]
  node_locale["简体词库<br/>[locals.js]"]
  node_locale_tw["繁体词库<br/>[locals_zh-TW.js]"]
end

subgraph group_delivery["浏览器接入"]
  node_manager["用户脚本管理器"]
end

subgraph group_vscode["VS Code 注入"]
  node_vscode["VS Code 扩展<br/>[extension.ts]"]
  node_browser_api["浏览器 CDP<br/>[extension.ts]"]
end

node_user(("GitHub 用户"))
node_github["GitHub 页面"]
node_translation_service["远程翻译服务"]
node_mirror["脚本镜像源"]

node_user -->|"访问页面"| node_github
node_github -->|"运行脚本"| node_manager
node_manager -->|"加载脚本"| node_main
node_main -->|"读取词库"| node_locale
node_main -->|"读取词库"| node_locale_tw
node_main -->|"识别页面"| node_page_detect
node_main -->|"执行翻译"| node_dom_translate
node_main -->|"启动翻译"| node_react_nav
node_main -->|"本地化时间"| node_time_localize
node_main -->|"提供描述翻译"| node_description
node_main -->|"管理词条"| node_missed_terms
node_description -.->|"请求翻译"| node_translation_service
node_vscode -->|"获取脚本与词库"| node_mirror
node_vscode -->|"发送 CDP 命令"| node_browser_api
node_browser_api -->|"注入脚本"| node_github

click node_main "https://github.com/maboloshi/github-chinese/blob/gh-pages/main.user.js"
click node_page_detect "https://github.com/maboloshi/github-chinese/blob/gh-pages/main.user.js"
click node_dom_translate "https://github.com/maboloshi/github-chinese/blob/gh-pages/main.user.js"
click node_react_nav "https://github.com/maboloshi/github-chinese/blob/gh-pages/main.user.js"
click node_time_localize "https://github.com/maboloshi/github-chinese/blob/gh-pages/main.user.js"
click node_description "https://github.com/maboloshi/github-chinese/blob/gh-pages/main.user.js"
click node_missed_terms "https://github.com/maboloshi/github-chinese/blob/gh-pages/main.user.js"
click node_locale "https://github.com/maboloshi/github-chinese/blob/gh-pages/locals.js"
click node_locale_tw "https://github.com/maboloshi/github-chinese/blob/gh-pages/locals_zh-TW.js"
click node_vscode "https://github.com/maboloshi/github-chinese/blob/gh-pages/vscode-extension/src/extension.ts"
click node_browser_api "https://github.com/maboloshi/github-chinese/blob/gh-pages/vscode-extension/src/extension.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_page_detect,node_dom_translate,node_react_nav,node_time_localize,node_description,node_missed_terms toneBlue
class node_locale,node_locale_tw toneAmber
class node_manager toneMint
class node_vscode,node_browser_api toneRose
class node_user,node_github,node_translation_service,node_mirror toneIndigo
```

## Components

### 页面本地化

- [主翻译脚本](https://github.com/maboloshi/github-chinese/blob/gh-pages/main.user.js): `main.user.js`
- [页面识别](https://github.com/maboloshi/github-chinese/blob/gh-pages/main.user.js): `main.user.js`
- [DOM 翻译](https://github.com/maboloshi/github-chinese/blob/gh-pages/main.user.js): `main.user.js`
- [导航与弹层](https://github.com/maboloshi/github-chinese/blob/gh-pages/main.user.js): `main.user.js`
- [时间本地化](https://github.com/maboloshi/github-chinese/blob/gh-pages/main.user.js): `main.user.js`
- [描述翻译](https://github.com/maboloshi/github-chinese/blob/gh-pages/main.user.js): `main.user.js`
- [未命中词条](https://github.com/maboloshi/github-chinese/blob/gh-pages/main.user.js): `main.user.js`

### 语言资源

- [简体词库](https://github.com/maboloshi/github-chinese/blob/gh-pages/locals.js): `locals.js`
- [繁体词库](https://github.com/maboloshi/github-chinese/blob/gh-pages/locals_zh-TW.js): `locals_zh-TW.js`

### 浏览器接入

- **用户脚本管理器**

### VS Code 注入

- [VS Code 扩展](https://github.com/maboloshi/github-chinese/blob/gh-pages/vscode-extension/src/extension.ts): `vscode-extension/src/extension.ts`
- [浏览器 CDP](https://github.com/maboloshi/github-chinese/blob/gh-pages/vscode-extension/src/extension.ts): `vscode-extension/src/extension.ts`

### Other components

- **GitHub 用户**
- **GitHub 页面**
- **远程翻译服务**
- **脚本镜像源**

## Connections

- GitHub 用户 → GitHub 页面: 访问页面
- GitHub 页面 → 用户脚本管理器: 运行脚本
- 用户脚本管理器 → 主翻译脚本: 加载脚本
- 主翻译脚本 → 简体词库: 读取词库
- 主翻译脚本 → 繁体词库: 读取词库
- 主翻译脚本 → 页面识别: 识别页面
- 主翻译脚本 → DOM 翻译: 执行翻译
- 主翻译脚本 → 导航与弹层: 启动翻译
- 主翻译脚本 → 时间本地化: 本地化时间
- 主翻译脚本 → 描述翻译: 提供描述翻译
- 主翻译脚本 → 未命中词条: 管理词条
- 描述翻译 → 远程翻译服务: 请求翻译
- VS Code 扩展 → 脚本镜像源: 获取脚本与词库
- VS Code 扩展 → 浏览器 CDP: 发送 CDP 命令
- 浏览器 CDP → GitHub 页面: 注入脚本