The GIF above may not reflect the latest set of features. For example, currently, a decoration for showing if the video element is the active element extists. Check the table of shortcuts below for more info.
Table of Contents
An extension to make navigating possible with only the keyboard.
Much of the inspiration for this extension comes from the
web-search-navigatorextension. Though not that well-known, theweb-search-navigatoris probably the most useful extension I have. Theweb-search-navigatorextension does offer some of this extension's features, but not all — and anything beyond Google is experimental there.
Do you have any complaints? Or suggestions for improvements? Then create an issue for this project. Don't forget that YouTube, like Twitter, Reddit and others, already offers some shortcuts. Just press Shift + ? on YouTube to check out all of the native shortcuts.
Currently, this extension is in its alpha stage. Basically, only the first sketch is available to a small amount of users. I expect that, in 1-2 weeks, we will be able to enter a beta; and, hopefully, in a month, a first public release on the Chrome Firefox and Edge's extension stores.
You can directly download this extension's files from the Releases page.
Choose one of the links below:
| Browser Extension Store |
|---|
| Chrome |
| Firefox |
| Edge |
- Unzip the extension in a local folder.
- Go to chrome://extensions/
- Activate Developer mode on the upper-right corner.
- Click on Load unpacked and choose the folder where you unzipped the extension.
- Go to about:debugging
- Click on This Firefox.
- Click on Load Temporary Add-on... and load the zip file directly.
- Unzip the extension in a local folder.
- Go to edge://extensions
- Activate Developer mode on the lower-left corner.
- Click on Load unpacked and choose the folder where you unzipped the extension.
If you're a Mac user, replace Ctrl by ⌘ — i.e. command.
If, due to a mistake, the table below isn't working as expected, go to the lib/src/kbd.dart file and examine the switch statement to truly get a hold of what's going on.
| Shortcut | Action |
|---|---|
| Ctrl + / | Toggle the whole extension7 |
| z | Cycle forwards on the thumbnails |
| x | Cycle backwards on the thumbnails |
| Enter | Navigate to the selected thumbnail |
| Ctrl + Enter | Open a new tab for the selected thumbnail |
| q | YouTube Home |
| Ctrl + q | New Tab to YouTube Home |
| h | YouTube History |
| Ctrl + h | New Tab to YouTube History |
| e | Toggle subscription to the channel1 |
| v | Like the video1 |
| n | Dislike the video1 |
| b | Copies the shortened URL of the video2 |
| y | Opens the notification pop-up |
| Ctrl + y | Add video to the watch later6 playlist |
| Ctrl + [ | Focuses on the comment box2 | 3 |
| Ctrl + ] | Toggles the expansion of the description2 |
| ; | Go to the channel's page4 |
| Ctrl + ; | Go to the channel's page on a new tab4 |
| = | Go to the video's channel2 |
| Ctrl + = | Go to the video's channel on a new tab2 |
| \ | Toggle the video player's focus5 |
| w | Toggle Picture-in-Picture (PIP) mode |
| . | Go to the Watch Later playlist8 |
| Ctrl + . | Go to the Watch Later playlist in a new tab8 |
1: Only works when signed-in and on a video page.
2: Only works when on a video page.
3: The comment section needs to be loaded for this to work.
4: Since YouTube doesn't expose the channel's link when you're on a video page, this shortcut won't work on video pages.
5: Changes the decoration of the video player.
6: You actually have to press it twice, once for the popup and another when the popup is on the screen.
7: The extension logo appears right next to YouTube's when the extension is enabled.
8: Once in the Watch Later playlist page, press . again to play the videos.
| Shortcut | Action |
|---|---|
| Toggle play/pause | k |
| Rewind 10 seconds | j |
| Fast forward 10 seconds | l |
| Previous Video | P (Shift + p) |
| Next Video | N (Shift + n) |
| Previous Frame (while paused) | , |
| Next frame (while paused) | . |
| Decrease playback rate | < (Shift + ,) |
| Increase playback rate | > (Shift + .) |
| Seek to specific point in the video (7 advances to 70% duration) | 0...9 |
| Shortcut | Action |
|---|---|
| Toggle full screen | f |
| Toggle theater mode | t |
| Toggle miniplayer | i |
| Close miniplayer or current dialog | Esc |
| Toggle mute | m |
| Shortcut | Action |
|---|---|
| If the video supports captions, toggle captions ON/OFF | c |
| Rotate through different text opacity levels | o |
| Rotate through different window opacity levels | w |
| Rotate through font sizes (increasing) | + |
| Rotate thorugh font sizes (decreasing) | - |
| Shortcut | Action |
|---|---|
| Pan up | w |
| Pan left | a |
| Pan down | s |
| Pan right | d |
| Zoom in | + on numpad or ] |
| Zoom out | - on numpad or ] |
- Add driver tests to the
Kbdclass.- The webdriver package will probably be necessary.
Originally, I was using the webdev with the discontinued webext, but they both add way too much stuff to something that should be way simpler.
If you have uploaded a local zip of a build to Firefox, rebuilding will probably give back an error because Firefox will deny overwrites or deletions of the previous build.
Basically, a JS browser extension consists of very few specific JS files, so, when using Dart, the only things you will end up needing to do are:
- Use
dart2jsto convert Dart to JS.- For example:
dart2js --csp -On -o build/content.dart.js web/content.dart
- The
-O{0|1|2|3|4}argument refers to the optimizationsdart2jsis allowed to do. The higher the more aggressive — which might cause problems. Refer todart2jsdocs for more info. - The
--cspoption: disables dynamic generation of code in the generated output. This is necessary to satisfy CSP restrictions. Check out thedart2jsdocs for more info.
- The
- For example:
- Pack it into a zip file.
- For example, in Powershell:
$compress = @{ Path = "build/*" CompressionLevel = "Fastest" DestinationPath = "build/build.zip" } Compress-Archive @compress
- For example, in Powershell:
The script(s) to create the build are all in the tool folder*.
* : The shell (build.sh) version hasn't yet been tested.
The UML diagram at the root of the project has been generated with the the help of the — great — dcdg Dart package. The standard output is based on the PlantUML standard and, if you use VS Code, you can visualize it by installing GraphViz and the PlantUML VS Code Extension.
Activate dcdg with:
pub global activate dcdg # only necessary onceThen generate the UML diagram with:
pub global run dcdg -o uml.puml