# vrinda0211/codedistill architecture

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

- Interactive diagram: https://gitdiagram.com/vrinda0211/codedistill
- Repository: https://github.com/vrinda0211/codedistill

## Overview

CodeDistill is a Chrome extension for turning selected web text into copyable executable code. The user selects text and chooses either rule-based cleaning or AI cleaning from the context menu; the background handler processes that choice and copies the result. A popup lets users save a Gemini API key locally. The README documents both cleaning modes; the sampled source shows their handling in background.js and key management in popup.js. The graph omits manifest wiring and other unsampled implementation details.

Main entry points: [`background.js`](https://github.com/vrinda0211/codedistill/blob/main/background.js) (Background handler), [`popup.js`](https://github.com/vrinda0211/codedistill/blob/main/popup.js) (API key settings)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interaction["User interaction"]
  node_webpage["Selected webpage text"]
  node_menu["Context menu<br/>[background.js]"]
  node_background["Background handler<br/>[background.js]"]
  node_popup["API key settings<br/>[popup.js]"]
end

subgraph group_processing["Code cleaning"]
  node_ruleclean["Rule-based cleaning<br/>[background.js]"]
  node_aiclean["AI cleaning request<br/>[background.js]"]
end

subgraph group_integrations["Browser and AI"]
  node_storage[("Local key storage")]
  node_gemini["Gemini API"]
  node_clipboard["Clipboard"]
end

node_user(("User"))

node_user -->|"selects text"| node_webpage
node_user -->|"opens menu"| node_menu
node_menu -->|"dispatches choice"| node_background
node_background -->|"reads selection"| node_webpage
node_background -->|"runs cleaning"| node_ruleclean
node_ruleclean -->|"copies result"| node_clipboard
node_background -->|"reads key"| node_storage
node_popup -->|"reads and writes key"| node_storage
node_background -->|"starts AI cleaning"| node_aiclean
node_aiclean -->|"sends selected text"| node_gemini
node_aiclean -->|"copies response"| node_clipboard

click node_menu "https://github.com/vrinda0211/codedistill/blob/main/background.js"
click node_background "https://github.com/vrinda0211/codedistill/blob/main/background.js"
click node_popup "https://github.com/vrinda0211/codedistill/blob/main/popup.js"
click node_ruleclean "https://github.com/vrinda0211/codedistill/blob/main/background.js"
click node_aiclean "https://github.com/vrinda0211/codedistill/blob/main/background.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_webpage,node_menu,node_background,node_popup,node_user toneBlue
class node_ruleclean,node_aiclean toneAmber
class node_storage,node_gemini,node_clipboard toneMint
```

## Components

### User interaction

- **Selected webpage text**
- [Context menu](https://github.com/vrinda0211/codedistill/blob/main/background.js): `background.js`
- [Background handler](https://github.com/vrinda0211/codedistill/blob/main/background.js): `background.js`
- [API key settings](https://github.com/vrinda0211/codedistill/blob/main/popup.js): `popup.js`

### Code cleaning

- [Rule-based cleaning](https://github.com/vrinda0211/codedistill/blob/main/background.js): `background.js`
- [AI cleaning request](https://github.com/vrinda0211/codedistill/blob/main/background.js): `background.js`

### Browser and AI

- **Local key storage**
- **Gemini API**
- **Clipboard**

### Other components

- **User**

## Connections

- User → Selected webpage text: selects text
- User → Context menu: opens menu
- Context menu → Background handler: dispatches choice
- Background handler → Selected webpage text: reads selection
- Background handler → Rule-based cleaning: runs cleaning
- Rule-based cleaning → Clipboard: copies result
- Background handler → Local key storage: reads key
- API key settings → Local key storage: reads and writes key
- Background handler → AI cleaning request: starts AI cleaning
- AI cleaning request → Gemini API: sends selected text
- AI cleaning request → Clipboard: copies response