Skip to content

FanaroEngineering/youtube_kbd_nav

Repository files navigation

Releases/Downloads Gitter Github CI Codefactor Buy me a coffee! | Sponsor Me!


YouTube Keyboard Navigation Browser Extension

Demo GIF

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


1. For the User

An extension to make navigating possible with only the keyboard.

Much of the inspiration for this extension comes from the web-search-navigator extension. Though not that well-known, the web-search-navigator is probably the most useful extension I have. The web-search-navigator extension 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.

1.1. Releases

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.

1.2. How to install it with a zip file

1.2.1. From the Different Stores

Choose one of the links below:

Browser Extension Store
Chrome
Firefox
Edge

1.2.2. Chrome

  1. Unzip the extension in a local folder.
  2. Go to chrome://extensions/
  3. Activate Developer mode on the upper-right corner.
  4. Click on Load unpacked and choose the folder where you unzipped the extension.

1.2.3. Firefox

  1. Go to about:debugging
  2. Click on This Firefox.
  3. Click on Load Temporary Add-on... and load the zip file directly.

1.2.4. Microsoft Edge

  1. Unzip the extension in a local folder.
  2. Go to edge://extensions
  3. Activate Developer mode on the lower-left corner.
  4. Click on Load unpacked and choose the folder where you unzipped the extension.

1.3. Available Shortcuts

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.

1.4. Natively Available Shortcuts on YouTube

1.4.1. Playback

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

1.4.2. General

Shortcut Action
Toggle full screen f
Toggle theater mode t
Toggle miniplayer i
Close miniplayer or current dialog Esc
Toggle mute m

1.4.3. Subtitle and Closed Captions

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) -

1.4.4. Spherical Videos

Shortcut Action
Pan up w
Pan left a
Pan down s
Pan right d
Zoom in + on numpad or ]
Zoom out - on numpad or ]

2. For the Developer

2.1. Future Improvements (Development)

  • Add driver tests to the Kbd class.

2.2. Building with dart2js

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:

  1. Use dart2js to 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 optimizations dart2js is allowed to do. The higher the more aggressive — which might cause problems. Refer to dart2js docs for more info.
      • The --csp option: disables dynamic generation of code in the generated output. This is necessary to satisfy CSP restrictions. Check out the dart2js docs for more info.
  2. Pack it into a zip file.
    • For example, in Powershell:
      $compress = @{
          Path = "build/*"
          CompressionLevel = "Fastest"
          DestinationPath = "build/build.zip"
      }
      Compress-Archive @compress

The script(s) to create the build are all in the tool folder*.


* : The shell (build.sh) version hasn't yet been tested.

2.3. Visualizing the Extension's Design with UML

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 once

Then generate the UML diagram with:

pub global run dcdg -o uml.puml