How swapniel99/video-mark works
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 Extension content script · content.css Annotation styling
Components 10
YouTube interaction
- Extension content script
content.js - Annotation styling
content.css
Annotation workflow
- Seekbar pips and menus
content.js - Note editor
content.js - Edit and delete
content.js
Data exchange
- Browser local storage
- Annotation file
- Browser download
Other components
- Viewer
- YouTube video page
Connections 14
- 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