https://github.com/ahmedelq/NattyNote

Take time-stamped YouTube notes
https://github.com/ahmedelq/NattyNote

browser-extension chome-extension chrome edge-extension firefox firefox-addon web-extension youtube

Last synced: 3 months ago
JSON representation

Take time-stamped YouTube notes

• Host: GitHub
• URL: https://github.com/ahmedelq/NattyNote
• Owner: ahmedelq
• License: gpl-3.0
• Created: 2021-12-26T16:17:27.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-16T17:34:08.000Z (9 months ago)
• Last Synced: 2024-05-30T02:47:55.229Z (5 months ago)
• Topics: browser-extension, chome-extension, chrome, edge-extension, firefox, firefox-addon, web-extension, youtube
• Language: JavaScript
• Homepage:
• Size: 10.7 MB
• Stars: 76
• Watchers: 5
• Forks: 5
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-note-taking - NattyNote - A free, open-source browser extension to take time-stamped YouTube notes. (Open Source / Web UI)

README

        
NattyNote



  

  
Take time-stamped YouTube notes














## 📦 Installation

- [Firefox](https://addons.mozilla.org/firefox/addon/nattynote/)

- [Chrome](https://chrome.google.com/webstore/detail/nattynote/lgopopmbcfmojhfmnlbhjhgepclocphh)

- [Microsoft Edge](https://microsoftedge.microsoft.com/addons/detail/nattynote/gmooiijhebkgflcopagccaajmafoobbi)

## ⭐ 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.

![NattyNote preview](https://github.com/ahmedelq/NattyNote/blob/main/preview.gif)

## 👀 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%) (%VID_TITLE%) (%CH_NAME%)` | ![Template init](https://github.com/ahmedelq/NattyNote/blob/main/media/tutorial_init_template.png) |

| Snapshot template | Describe how to wrap the `base64` encoded image when a snapshot is created. | `` | ![Template snapshot](https://github.com/ahmedelq/NattyNote/blob/main/media/tutorial_snapshot_template.png) |

| 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.  | `
(%TS_FORMATTED%)(%NOTE%)
(%SCREENSHOT_FORMATTED%)` | ![Template note](https://github.com/ahmedelq/NattyNote/blob/main/media/tutorial_note_template.png) |


**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. | `