NattyNote

Take time-stamped YouTube notes

📦 Installation

• Firefox
• Chrome
• Microsoft Edge

⭐ Overview

NattyNote is a powerful yet minimalist, keyboard-centric browser extension. It enables keyboard-savvy users to take time-stamped notes while watching YouTube videos, and easily copy it to their preferred note-taking/knowledge base app.

Features

• Lightweight. (~20kb)
• Automatically pause/play the video while and after taking notes.
• Take video snapshots.
• Custumizable shortcuts.
• Custumizable templates.
• Caption autocomplete.
• Auto save.
• Clickable timestamps.
• RTL support.

⚙️ How it works

• Pause and capture: Quickly capture key points by pressing Alt+P to pause the video, write your note, and save it with Alt+Enter. Timestamped notes will appear below the video for easy reference.
• On-the-fly capture: Use Alt+U to take notes directly without pausing the video.
• Snapshots?: Press Shift with any of the commands above to automatically take a snapshot of the video alongside your note.

👀 Preview

Tutorial

Keyboard bindings

You can customize keybindings (shortcuts) via NattyNote Icon ➡️ Settings ➡️ Keybindings.

Below are the default used keybindings:

Name	Keybinding	Description
Prompt+Toggle	ALT+P	Shows the note prompt and toggles the player; stops it if it is playing and starts it if it is stopped.
Prompt	ALT+U	Shows the note prompt without toggling the player; if the player is playing it won't be paused and vice versa.
Prompt+Toggle+Snapshot	SHIFT+ALT+P	Same behavior as Prompt+Toggle but also takes a snapshot of the video.
Prompt+Snapshot	SHIFT+ALT+U	Same behavior as Prompt but also takes a snapshot of the video.
Exit prompt	None	Close the prompt, discarding current note. Optional since it can always be called by Escape.
Deck focus	ALT+K	Focus on the notes deck.
Deck blur	ALT+K	Removes focus from the notes deck and places it at the video player. It's optional since it can always be called by Escape
Copy deck content	ALT+C	Copies the entire deck to clipboard in HTML format (plaintext in Firefox). A combination of CTRL+A and CTRL+C is preferred in Firefox

Templates and variables

Templates allow you to fine-tune the output of the notes in HTML, with useful variables. You can customize the templates via NattyNote Icon ➡️ Settings ➡️ Templates.

There are 3 templates

Name	Description	Default value	Example
Deck initialization template	When you first take a note for the first time, this string will be added at the top of your notes. Useful to add metadata about the video.	(%NOW%) <strong>(%VID_TITLE%)</strong> (%CH_NAME%)
Snapshot template	Describe how to wrap the base64 encoded image when a snapshot is created.	<img src="(%SCREENSHOT_SRC%)"/>
Note template	Describe how to format a note when it is comitted. Note that SCREENSHOT_FORMATTED might be empty and will be substited with the Snapshot template desribed above.	<p><a href="https://www.youtube.com/watch?v=(%VID_ID%)&t=(%TS_RAW%)s">(%TS_FORMATTED%)</a>(%NOTE%)</p>(%SCREENSHOT_FORMATTED%)

Variables:

Name	Code	Description	Example
Video ID	VID_ID	Stores YouTube unique video ID	iw97uvIge7c
Raw timestamp	TS_RAW	A in double-precision floating-point value that represents the timestamp in in seconds at which a particular note has been taken.	47.543641
Formatted timestamp	TS_FORMATTED	Human-friendly representaiton of the raw timestamp	00:46
Note	NOTE	This is the actual note taken by the user	This is a note with a snapshot!
Formatted snapshot	SCREENSHOT_FORMATTED	*A substitution for the Snapshot template desribed above. It might be empty (null) in case no snapshots were taken.	<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQA.../>
Snapshot sourcecode	SCREENSHOT_SRC	A representaiton of a snapshot endeded in base64	data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQA..
Current date and time	NOW	Current date and time	2/15/2024, 3:59:33 PM
Video title	VID_TITLE	Video title	Using Caffeine to Optimize...
Channel name	CH_NAME	Channel name	Andrew Huberman

Auto-completion

To enable caption auto-completion:

1. Turn-on YouTube captions, hit c (YouTube shortcut) or click the CC icon to activate closed captions.
2. Captions will appear faintly within the NattyNote prompt.
3. Auto-fill with Tab or Enter and it will insert the current caption text into prompt.

🌱 Contribution

Please open an issue to:

• Add / suggest a feature.
• Report an issue.
• Improve code quality.

Manual build

git clone https://github.com/ahmedelq/NattyNote.git
cd NattyNote/src
npm install
npm run serve:firefox
#Or, with chrome:
#npm run serve:chrome

🛣️ Future plans

• Add i18n support.
• Generalize to every video platform.
• Rewrite in TypeScript.

📜 License

NattyNote is released under GPL-3.0 License. Check the LICENSE file for details.