# swapniel99/video-mark architecture

> Architecture diagram of the GitHub repository swapniel99/video-mark, 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/swapniel99/video-mark
- Repository: https://github.com/swapniel99/video-mark

## Overview

VideoMark is a Chrome extension for creating and managing timestamped YouTube annotations. The main workflow starts with a seekbar action or keyboard shortcut, edits a color-coded note, saves it locally by video ID, and displays a seekbar pip that can navigate playback. Users can also edit or delete notes and import or export annotation files. The excerpts show these responsibilities concentrated in content.js; links for unsampled implementation details are omitted.

Main entry points: [`content.js`](https://github.com/swapniel99/video-mark/blob/main/content.js) (Extension content script), [`content.css`](https://github.com/swapniel99/video-mark/blob/main/content.css) (Annotation styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interaction["YouTube interaction"]
  node_content["Extension content script<br/>[content.js]"]
  node_styles["Annotation styling<br/>[content.css]"]
end

subgraph group_notes["Annotation workflow"]
  node_seekbar["Seekbar pips and menus<br/>[content.js]"]
  node_note_editor["Note editor<br/>[content.js]"]
  node_note_actions["Edit and delete<br/>[content.js]"]
end

subgraph group_exchange["Data exchange"]
  node_local_storage[("Browser local storage")]
  node_import_file["Annotation file"]
  node_download["Browser download"]
end

node_user(("Viewer"))
node_youtube["YouTube video page"]

node_user -->|"uses"| node_content
node_content -->|"reads video state"| node_youtube
node_content -->|"handles interactions"| node_seekbar
node_content -->|"opens editor"| node_note_editor
node_content -->|"dispatches actions"| node_note_actions
node_content -->|"loads and saves"| node_local_storage
node_content -->|"renders annotations"| node_youtube
node_seekbar -->|"seeks playback"| node_youtube
node_note_editor -->|"saves notes"| node_local_storage
node_note_actions -->|"updates notes"| node_local_storage
node_content -->|"reads import"| node_import_file
node_content -->|"merges imported notes"| node_local_storage
node_content -->|"exports JSON"| node_download
node_styles -->|"styles UI"| node_seekbar

click node_content "https://github.com/swapniel99/video-mark/blob/main/content.js"
click node_styles "https://github.com/swapniel99/video-mark/blob/main/content.css"
click node_seekbar "https://github.com/swapniel99/video-mark/blob/main/content.js"
click node_note_editor "https://github.com/swapniel99/video-mark/blob/main/content.js"
click node_note_actions "https://github.com/swapniel99/video-mark/blob/main/content.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_content,node_styles,node_user toneBlue
class node_seekbar,node_note_editor,node_note_actions toneAmber
class node_local_storage,node_import_file,node_download toneMint
class node_youtube toneIndigo
```

## Components

### YouTube interaction

- [Extension content script](https://github.com/swapniel99/video-mark/blob/main/content.js): `content.js`
- [Annotation styling](https://github.com/swapniel99/video-mark/blob/main/content.css): `content.css`

### Annotation workflow

- [Seekbar pips and menus](https://github.com/swapniel99/video-mark/blob/main/content.js): `content.js`
- [Note editor](https://github.com/swapniel99/video-mark/blob/main/content.js): `content.js`
- [Edit and delete](https://github.com/swapniel99/video-mark/blob/main/content.js): `content.js`

### Data exchange

- **Browser local storage**
- **Annotation file**
- **Browser download**

### Other components

- **Viewer**
- **YouTube video page**

## Connections

- Viewer → Extension content script: uses
- Extension content script → YouTube video page: reads video state
- Extension content script → Seekbar pips and menus: handles interactions
- Extension content script → Note editor: opens editor
- Extension content script → Edit and delete: dispatches actions
- Extension content script → Browser local storage: loads and saves
- Extension content script → YouTube video page: renders annotations
- Seekbar pips and menus → YouTube video page: seeks playback
- Note editor → Browser local storage: saves notes
- Edit and delete → Browser local storage: updates notes
- Extension content script → Annotation file: reads import
- Extension content script → Browser local storage: merges imported notes
- Extension content script → Browser download: exports JSON
- Annotation styling → Seekbar pips and menus: styles UI