{"id":13649649,"url":"https://github.com/ahmedelq/NattyNote","last_synced_at":"2025-04-22T15:30:30.855Z","repository":{"id":40499807,"uuid":"441933276","full_name":"ahmedelq/NattyNote","owner":"ahmedelq","description":"Take time-stamped YouTube notes","archived":false,"fork":false,"pushed_at":"2024-02-16T17:34:08.000Z","size":11209,"stargazers_count":81,"open_issues_count":6,"forks_count":5,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-08-03T02:02:50.047Z","etag":null,"topics":["browser-extension","chome-extension","chrome","edge-extension","firefox","firefox-addon","web-extension","youtube"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ahmedelq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"ahmelq","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://www.buymeacoffee.com/aheq","https://paypal.me/ahmelq"]}},"created_at":"2021-12-26T16:17:27.000Z","updated_at":"2024-07-29T19:39:33.000Z","dependencies_parsed_at":"2024-05-29T16:12:26.527Z","dependency_job_id":"18c54512-556d-43bb-b19d-74e9d770f674","html_url":"https://github.com/ahmedelq/NattyNote","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmedelq%2FNattyNote","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmedelq%2FNattyNote/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmedelq%2FNattyNote/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmedelq%2FNattyNote/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahmedelq","download_url":"https://codeload.github.com/ahmedelq/NattyNote/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223900372,"owners_count":17222028,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser-extension","chome-extension","chrome","edge-extension","firefox","firefox-addon","web-extension","youtube"],"created_at":"2024-08-02T02:00:21.753Z","updated_at":"2024-11-10T00:31:32.523Z","avatar_url":"https://github.com/ahmedelq.png","language":"JavaScript","readme":"\u003ch1 align=\"center\"\u003eNattyNote\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"200px\" src=\"/media/nattynote.png\" alt=\"NattyNote logo\"\u003e\u003c/img\u003e\n  \u003cp align=\"center\"\u003e\u003cstrong\u003eTake time-stamped YouTube notes\u003c/strong\u003e\u003c/p\u003e\n\u003c/p\u003e\n\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://addons.mozilla.org/firefox/addon/nattynote/\" target=\"_blank\"\u003e\u003cimg alt=\"GitHub Issues\" src=\"https://img.shields.io/amo/stars/nattynote?label=Firefox\u0026style=for-the-badge\u0026logo=firefox\u0026logoColor=5B4636\u0026color=F4ECD8\u0026labelColor=dcd4c2\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://chrome.google.com/webstore/detail/nattynote/lgopopmbcfmojhfmnlbhjhgepclocphh\" target=\"_blank\"\u003e\u003cimg alt=\"Chrome rating\" src=\"https://img.shields.io/amo/stars/nattynote?label=Chrome\u0026style=for-the-badge\u0026logo=Google+Chrome\u0026logoColor=5B4636\u0026color=F4ECD8\u0026labelColor=dcd4c2\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ahmedelq/NattyNote/blob/main/LICENSE\" target=\"_blank\"\u003e\u003cimg alt=\"GitHub license\" src=\"https://img.shields.io/github/license/ahmedelq/NattyNote?=\u0026style=for-the-badge\u0026logo=GitHub\u0026logoColor=5B4636\u0026color=F4ECD8\u0026labelColor=dcd4c2\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ahmedelq/NattyNote/issues\" target=\"_blank\"\u003e\u003cimg alt=\"GitHub Issues\" src=\"https://img.shields.io/github/issues/ahmedelq/NattyNote?=\u0026style=for-the-badge\u0026logo=GitHub\u0026logoColor=5B4636\u0026color=F4ECD8\u0026labelColor=dcd4c2\" /\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n## 📦 Installation\n\n- [Firefox](https://addons.mozilla.org/firefox/addon/nattynote/)\n- [Chrome](https://chrome.google.com/webstore/detail/nattynote/lgopopmbcfmojhfmnlbhjhgepclocphh)\n- [Microsoft Edge](https://microsoftedge.microsoft.com/addons/detail/nattynote/gmooiijhebkgflcopagccaajmafoobbi)\n\n## ⭐ Overview\n**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. \n\n### Features\n\n- Lightweight. (~20kb)\n- Automatically pause/play the video while and after taking notes.\n- Take video snapshots.\n- Custumizable shortcuts.\n- Custumizable templates.\n- Caption autocomplete.\n- Auto save.\n- Clickable timestamps.\n- RTL support.\n\n## ⚙️ How it works\n\n- **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.\n- **On-the-fly capture**: Use `Alt+U` to take notes directly without pausing the video.\n- **Snapshots?**: Press `Shift` with any of the commands above to automatically take a snapshot of the video alongside your note.\n\n![NattyNote preview](https://github.com/ahmedelq/NattyNote/blob/main/preview.gif)\n\n\n## 👀 Preview\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"75%\" src=\"/media/1.png\" alt=\"How it works 1\"\u003e\u003c/img\u003e\n  \u003cimg width=\"75%\" src=\"/media/2.png\" alt=\"How it works 2\"\u003e\u003c/img\u003e\n  \u003cimg width=\"75%\" src=\"/media/3.png\" alt=\"How it works 3\"\u003e\u003c/img\u003e\n  \u003cimg width=\"75%\" src=\"/media/4.png\" alt=\"How it works 4\"\u003e\u003c/img\u003e\n  \u003cimg width=\"75%\" src=\"/media/5.png\" alt=\"How it works 5\"\u003e\u003c/img\u003e\n  \u003cimg width=\"75%\" src=\"/media/6.png\" alt=\"How it works 6\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\n\n## Tutorial\n\n### Keyboard bindings\nYou can customize keybindings (shortcuts) via `NattyNote Icon` ➡️ `Settings`  ➡️ `Keybindings`.\n\nBelow are the default used keybindings:\n\n\n| Name | Keybinding | Description |\n|---|---|---|\n| 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. |\n| Prompt | `ALT+U` | Shows the note prompt without toggling the player; if the player is playing it won't be paused and vice versa. |\n| Prompt+Toggle+Snapshot | `SHIFT+ALT+P` | Same behavior as `Prompt+Toggle` but also takes a snapshot of the video. |\n| Prompt+Snapshot | `SHIFT+ALT+U` | Same behavior as `Prompt` but also takes a snapshot of the video. |\n| Exit prompt | None | Close the prompt, discarding current note. Optional since it can always be called by `Escape`. |\n| Deck focus | `ALT+K` | Focus on the notes deck. |\n| 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` |\n| 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 |\n\n### Templates and variables\nTemplates allow you to fine-tune the output of the notes in `HTML`, with useful variables.\nYou can customize the templates via `NattyNote Icon` ➡️ `Settings`  ➡️ `Templates`.\n\nThere are 3 templates\n| Name | Description | Default value | Example |\n|---|---|---|---|\n| 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%) \u003cstrong\u003e(%VID_TITLE%)\u003c/strong\u003e (%CH_NAME%)` | ![Template init](https://github.com/ahmedelq/NattyNote/blob/main/media/tutorial_init_template.png) |\n| Snapshot template | Describe how to wrap the `base64` encoded image when a snapshot is created. | `\u003cimg src=\"(%SCREENSHOT_SRC%)\"/\u003e` | ![Template snapshot](https://github.com/ahmedelq/NattyNote/blob/main/media/tutorial_snapshot_template.png) |\n| 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.  | `\u003cp\u003e\u003ca href=\"https://www.youtube.com/watch?v=(%VID_ID%)\u0026t=(%TS_RAW%)s\"\u003e(%TS_FORMATTED%)\u003c/a\u003e(%NOTE%)\u003c/p\u003e(%SCREENSHOT_FORMATTED%)` | ![Template note](https://github.com/ahmedelq/NattyNote/blob/main/media/tutorial_note_template.png) |\n\n**Variables**:\n| Name | Code | Description | Example |\n|---|---|---|---|\n| Video ID | `VID_ID` | Stores YouTube unique video ID | `iw97uvIge7c` |\n| 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` |\n| Formatted timestamp | `TS_FORMATTED` | Human-friendly representaiton of the raw timestamp | `00:46` |\n| Note | `NOTE` | This is the actual note taken by the user | `This is a note with a snapshot!` |\n| Formatted snapshot | `SCREENSHOT_FORMATTED` | *A substitution for the `Snapshot template` desribed above. It might be empty (null) in case no snapshots were taken. | `\u003cimg src=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQA.../\u003e` |\n| Snapshot sourcecode | `SCREENSHOT_SRC` | A representaiton of a snapshot endeded in `base64` | `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQA..` |\n| Current date and time | `NOW` | Current date and time | `2/15/2024, 3:59:33 PM` |\n| Video title | `VID_TITLE` | Video title |  `Using Caffeine to Optimize...` |\n| Channel name | `CH_NAME` | Channel name | `Andrew Huberman` |\n\n\n### Auto-completion\n![NattyNote Auto-completion](https://github.com/ahmedelq/NattyNote/blob/main/media/tutorial-inserting-caption.gif)\n\nTo enable caption auto-completion:\n1. Turn-on YouTube captions, hit `c` (YouTube shortcut) or click the `CC` icon to activate closed captions.\n2. Captions will appear faintly within the NattyNote prompt.\n3. Auto-fill with `Tab` or `Enter` and it will insert the current caption text into prompt. \n\n\n## 🌱 Contribution\n\nPlease open an issue to:\n\n- Add / suggest a feature.\n- Report an issue.\n- Improve code quality.\n\n### Manual build\n\n```bash\ngit clone https://github.com/ahmedelq/NattyNote.git\ncd NattyNote/src\nnpm install\nnpm run serve:firefox\n#Or, with chrome:\n#npm run serve:chrome\n```\n\n### 🛣️ Future plans\n\n- Add i18n support.\n- Generalize to every video platform.\n- Rewrite in TypeScript.\n\n## 📜 License\n\nNattyNote is released under [GPL-3.0 License](https://github.com/ahmedelq/NattyNote/blob/main/LICENSE). Check the LICENSE file for details.\n","funding_links":["https://ko-fi.com/ahmelq","https://www.buymeacoffee.com/aheq","https://paypal.me/ahmelq"],"categories":["[↑](#-contents) Free or Open Source","JavaScript","Open Source"],"sub_categories":["Web UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmedelq%2FNattyNote","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahmedelq%2FNattyNote","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmedelq%2FNattyNote/lists"}