# chenycl/chrome-extension-udemy-translate architecture

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

- Interactive diagram: https://gitdiagram.com/chenycl/chrome-extension-udemy-translate
- Repository: https://github.com/chenycl/chrome-extension-udemy-translate

## Overview

Universal Subtitle Translator is a Chrome extension that watches configured website subtitle elements, requests translations through a background message handler, and displays bilingual floating subtitles. Options configure domains, providers, prompts, and styling; the popup offers quick controls. The sampled source supports the content/background/API request flow and local settings access. README capabilities such as subtitle download and preset configurations are represented only where the tree provides a corresponding UI or module; implementation details for unsampled pages are uncertain.

Main entry points: [`src/pages/content/index.ts`](https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/content/index.ts) (Subtitle observer), [`src/pages/options/Options.tsx`](https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/options/Options.tsx) (Options settings), [`src/pages/background/index.ts`](https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/background/index.ts) (Message handler), [`src/utils/request.ts`](https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/utils/request.ts) (Translation request)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_configuration["Configuration UI"]
  node_options["Options settings<br/>[Options.tsx]"]
  node_popup["Quick controls<br/>[Popup.tsx]"]
end

subgraph group_runtime["Subtitle Runtime"]
  node_content["Subtitle observer<br/>[index.ts]"]
  node_background["Message handler<br/>[index.ts]"]
  node_subtitle["Floating subtitles<br/>[index.ts]"]
  node_messages["Message types<br/>[DOMMessages.ts]"]
end

subgraph group_translation["Translation Providers"]
  node_request["Translation request<br/>[request.ts]"]
end

subgraph group_inspection["Subtitle Inspection"]
  node_devtools["VTT inspection<br/>[index.ts]"]
  node_panel["Devtools panel<br/>[Panel.tsx]"]
end

node_viewer(("Website viewer"))
node_settings[("Extension settings")]
node_openai{{"OpenAI-compatible API"}}
node_ollama{{"Ollama API"}}

node_viewer -->|"provides DOM"| node_content
node_options -->|"writes settings"| node_settings
node_options -->|"reads settings"| node_settings
node_popup -->|"reads and writes"| node_settings
node_content -->|"reads settings"| node_settings
node_content -->|"requests translation"| node_background
node_background -->|"reads settings"| node_settings
node_background -->|"calls translation"| node_request
node_request -->|"reads provider config"| node_settings
node_request -.->|"sends completion request"| node_openai
node_request -.->|"sends completion request"| node_ollama
node_options -.->|"tests provider"| node_openai
node_options -.->|"tests provider"| node_ollama
node_content -->|"renders translation"| node_subtitle
node_background -->|"broadcasts status"| node_content
node_devtools -->|"registers panel"| node_panel

click node_options "https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/options/Options.tsx"
click node_popup "https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/popup/Popup.tsx"
click node_content "https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/content/index.ts"
click node_background "https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/background/index.ts"
click node_request "https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/utils/request.ts"
click node_subtitle "https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/content/index.ts"
click node_devtools "https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/devtools/index.ts"
click node_panel "https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/panel/Panel.tsx"
click node_messages "https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/types/DOMMessages.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_options,node_popup,node_viewer toneBlue
class node_content,node_background,node_subtitle,node_messages,node_settings toneAmber
class node_request,node_openai,node_ollama toneMint
class node_devtools,node_panel toneRose
```

## Components

### Configuration UI

- [Options settings](https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/options/Options.tsx): `src/pages/options/Options.tsx`
- [Quick controls](https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/popup/Popup.tsx): `src/pages/popup/Popup.tsx`

### Subtitle Runtime

- [Subtitle observer](https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/content/index.ts): `src/pages/content/index.ts`
- [Message handler](https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/background/index.ts): `src/pages/background/index.ts`
- [Floating subtitles](https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/content/index.ts): `src/pages/content/index.ts`
- [Message types](https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/types/DOMMessages.ts): `src/types/DOMMessages.ts`

### Translation Providers

- [Translation request](https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/utils/request.ts): `src/utils/request.ts`

### Subtitle Inspection

- [VTT inspection](https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/devtools/index.ts): `src/pages/devtools/index.ts`
- [Devtools panel](https://github.com/chenycl/chrome-extension-udemy-translate/blob/main/src/pages/panel/Panel.tsx): `src/pages/panel/Panel.tsx`

### Other components

- **Website viewer**
- **Extension settings**
- **OpenAI-compatible API**
- **Ollama API**

## Connections

- Website viewer → Subtitle observer: provides DOM
- Options settings → Extension settings: writes settings
- Options settings → Extension settings: reads settings
- Quick controls → Extension settings: reads and writes
- Subtitle observer → Extension settings: reads settings
- Subtitle observer → Message handler: requests translation
- Message handler → Extension settings: reads settings
- Message handler → Translation request: calls translation
- Translation request → Extension settings: reads provider config
- Translation request → OpenAI-compatible API: sends completion request
- Translation request → Ollama API: sends completion request
- Options settings → OpenAI-compatible API: tests provider
- Options settings → Ollama API: tests provider
- Subtitle observer → Floating subtitles: renders translation
- Message handler → Subtitle observer: broadcasts status
- VTT inspection → Devtools panel: registers panel