# ckckh2023/tsinghuaelt-vmic architecture

> Architecture diagram of the GitHub repository ckckh2023/tsinghuaelt-vmic, 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/ckckh2023/tsinghuaelt-vmic
- Repository: https://github.com/ckckh2023/tsinghuaelt-vmic

## Overview

VMIC is a Chrome extension that substitutes locally selected audio for microphone input on matching assessment pages. Users import files or capture page audio, choose a library item, and the extension supplies it as a media stream; settings control playback, monitoring, delay, looping, and noise. Source excerpts establish the background message handling, storage, bridge, capture, and audio-injection links. Other manifest-level wiring and unsampled implementation details are not inferred.

Main entry points: [`background/background.js`](https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/background/background.js) (Extension service worker), [`content/content-main.js`](https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/content/content-main.js) (Audio injector), [`content/content-capture.js`](https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/content/content-capture.js) (Capture overlay), [`content/content-bridge.js`](https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/content/content-bridge.js) (Extension-page bridge)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Extension controls"]
  node_popup["Popup controls<br/>[popup.js]"]
  node_picker["File picker<br/>[picker.js]"]
  node_settings["Audio settings<br/>[settings.js]"]
end

subgraph group_library["Audio library"]
  node_background["Extension service worker<br/>[background.js]"]
  node_idb["IndexedDB helpers<br/>[idb.js]"]
  node_audio_db[("Audio library store")]
  node_noise_assets["Built-in noise tracks"]
  node_common["Shared utilities<br/>[common.js]"]
end

subgraph group_capture["Page audio capture"]
  node_capture_ui["Capture overlay<br/>[content-capture.js]"]
  node_capture_proxy["Capture page proxy"]
end

subgraph group_injection["Microphone injection"]
  node_bridge["Extension-page bridge<br/>[content-bridge.js]"]
  node_injector["Audio injector<br/>[content-main.js]"]
end

node_user(("User"))
node_assessment_page(("Assessment webpage"))
node_browser_audio["Browser media APIs"]

node_user -->|"controls playback"| node_popup
node_user -->|"imports audio"| node_picker
node_user -->|"changes settings"| node_settings
node_user -->|"captures audio"| node_capture_ui
node_popup -->|"sends commands"| node_background
node_picker -->|"manages library"| node_background
node_picker -->|"writes audio"| node_idb
node_settings -->|"updates state"| node_background
node_background -->|"reads and writes"| node_idb
node_idb -->|"persists records"| node_audio_db
node_background -->|"loads noise"| node_noise_assets
node_background -->|"uses utilities"| node_common
node_background -->|"broadcasts page sync"| node_bridge
node_bridge -->|"requests state and audio"| node_background
node_bridge -->|"forwards page data"| node_injector
node_injector -->|"requests sync and noise"| node_bridge
node_injector -->|"builds audio stream"| node_browser_audio
node_assessment_page -->|"requests microphone"| node_injector
node_injector -->|"provides substituted stream"| node_assessment_page
node_assessment_page -->|"plays page audio"| node_capture_ui
node_capture_ui -->|"requests fetch or preview"| node_capture_proxy
node_capture_proxy -->|"returns fetch result"| node_capture_ui
node_capture_ui -->|"adds captured audio"| node_background

click node_popup "https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/popup/popup.js"
click node_picker "https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/picker/picker.js"
click node_settings "https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/settings/settings.js"
click node_background "https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/background/background.js"
click node_idb "https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/lib/idb.js"
click node_noise_assets "https://github.com/ckckh2023/tsinghuaelt-vmic/tree/main/assets/whitevoice"
click node_common "https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/lib/common.js"
click node_capture_ui "https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/content/content-capture.js"
click node_capture_proxy "https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/content/content-capture-main.js"
click node_bridge "https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/content/content-bridge.js"
click node_injector "https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/content/content-main.js"

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_popup,node_picker,node_settings,node_user,node_browser_audio toneBlue
class node_background,node_idb,node_audio_db,node_noise_assets,node_common toneAmber
class node_capture_ui,node_capture_proxy toneMint
class node_bridge,node_injector toneRose
class node_assessment_page toneIndigo
```

## Components

### Extension controls

- [Popup controls](https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/popup/popup.js): `popup/popup.js`
- [File picker](https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/picker/picker.js): `picker/picker.js`
- [Audio settings](https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/settings/settings.js): `settings/settings.js`

### Audio library

- [Extension service worker](https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/background/background.js): `background/background.js`
- [IndexedDB helpers](https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/lib/idb.js): `lib/idb.js`
- **Audio library store**
- [Built-in noise tracks](https://github.com/ckckh2023/tsinghuaelt-vmic/tree/main/assets/whitevoice): `assets/whitevoice`
- [Shared utilities](https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/lib/common.js): `lib/common.js`

### Page audio capture

- [Capture overlay](https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/content/content-capture.js): `content/content-capture.js`
- [Capture page proxy](https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/content/content-capture-main.js): `content/content-capture-main.js`

### Microphone injection

- [Extension-page bridge](https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/content/content-bridge.js): `content/content-bridge.js`
- [Audio injector](https://github.com/ckckh2023/tsinghuaelt-vmic/blob/main/content/content-main.js): `content/content-main.js`

### Other components

- **User**
- **Assessment webpage**
- **Browser media APIs**

## Connections

- User → Popup controls: controls playback
- User → File picker: imports audio
- User → Audio settings: changes settings
- User → Capture overlay: captures audio
- Popup controls → Extension service worker: sends commands
- File picker → Extension service worker: manages library
- File picker → IndexedDB helpers: writes audio
- Audio settings → Extension service worker: updates state
- Extension service worker → IndexedDB helpers: reads and writes
- IndexedDB helpers → Audio library store: persists records
- Extension service worker → Built-in noise tracks: loads noise
- Extension service worker → Shared utilities: uses utilities
- Extension service worker → Extension-page bridge: broadcasts page sync
- Extension-page bridge → Extension service worker: requests state and audio
- Extension-page bridge → Audio injector: forwards page data
- Audio injector → Extension-page bridge: requests sync and noise
- Audio injector → Browser media APIs: builds audio stream
- Assessment webpage → Audio injector: requests microphone
- Audio injector → Assessment webpage: provides substituted stream
- Assessment webpage → Capture overlay: plays page audio
- Capture overlay → Capture page proxy: requests fetch or preview
- Capture page proxy → Capture overlay: returns fetch result
- Capture overlay → Extension service worker: adds captured audio