Skip to content

Shadou1/shortcuts-for-sites

Repository files navigation

Shortcuts For Sites

WebExtension that adds keyboard shortcuts for easier navigation on popular websites.

Available for Firefox on Firefox Add-ons.

Available for Chrome (Manual installation only).

Description

This extension adds various keyboard shortcuts to some popular websites. You will be able to browse these websites with just your keyboard without relying too much on the Tab key.

Other methods of navigating websites with keyboard (besides using the Tab key) include using browser features like find, quick find, and quick find within link-text only (Ctrl+f, /, and ' shortcuts in Firefox). These will move focus to the found element, without you having to Tab manually to it. But sometimes using Tab is unavoidable, and searching for elements every time can become old.

Some websites also have native shortcuts (usually displayed by pressing the ? key). This extension complements or completely rewrites those shortcuts. For example, on Reddit (new Reddit) there are j/k shortcuts to go to the next/previous post/comment, but they work kind of poorly. This extension rewrites these shortcuts and adds other shortcuts to interact with the focused post (like open post's subreddit or open post's image).

Useful tips

  • Pressing Alt+k will display shortcuts for the current website.
  • $\textcolor{green}{\text{Green outline}}$ means that the shortcut is usable right now.
  • To use shortcuts that open links in new tabs (like Reddit's g open post image), you will need to allow the website to open pop-ups.
  • On some websites, pressing ? will display already available shortcuts.
  • You can rebind shortcuts on extension's options page (preferences page).
  • Press Tab once to force browser to draw focus outline.
  • On Reddit, without logging in shortcuts will work poorly.
  • Check out your browser's keyboard shortcuts (Firefox).

Note

If you are using Google Search or Google Translate on domains other than .com, enable allow add-on to run on all Google domains on add-on's options page.

Popup

Popup preview

Demonstration

https://youtu.be/9MR6KKRwTP0

Chrome manual installation

  1. Go to Add-on Releases.
  2. Download the latest chrome release (it should end in .chromium.zip).
  3. Go to chrome://extensions and enable developer mode (top right corner).
  4. Drag .zip file onto Chrome browser, this will install the extension.
  5. Disable developer mode.

Note

Google Search and Google Translate shortcuts will only work on .com domains, enabling allow add-on to run on all Google domains won't work in Chrome.

How it works

Extension loads content script into sites that it has shortcuts for (defined in manifest.json). Content script listens for keydown events and executes corresponding shortcut events. Shortcut events define what should happen when the user presses the shortcut's key. These events do a wide range of things: focusing and clicking elements, going to next/previous elements, opening menus (settings menus), navigating to different site sections, controlling video players, and more.

Note

Because sites can update their structure, be it html or javascript, shortcuts might break or stop working. If they did break, it means that I haven't updated the extension yet. Submit a new issue if shortcuts have been broken for some time.

Building

Requirements

  • Node.js 18 or later

In root directory run:

npm install

Building for Firefox

npm run build

Compiled code is in dist folder, zipped version is in web-ext-artifacts folder.

Building for Chrome

npm run build-chromium

Compiled code is in dist-chromium folder, zipped version is in web-ext-artifacts-chromium folder.

Running developer version

Running in Firefox

  • Run npm run watch.
  • Or go to about:debugging, select This Firefox, click Load Temporary Add-on, choose manifest.json file in the dist folder.

Running in chrome

  • Run npm run watch-chromium.
  • Or go to chrome://extensions, enable Developer mode, click Load unpacked and select dist folder, or drag .zip file from web-ext-artifacts-chromium onto chrome browser.

Issues

  • Focus outline won't render on some pages if the user hasn't pressed Tab at least once while on a page.
  • On Twitch, d shortcut to scroll to stream description will work incorrectly the first time.
  • On Youtube, going to channel videos/playlists from /watch will sometimes play channel's autoplay video in background.
  • On Reddit, shortcuts work poorly without logging in.

Full list of available shortcuts

Google Search
Shortcut Description
Search modes
a Go to all search results
i Go to images
v Go to videos
n Go to news
Search
j Focus next search result / image
k Focus previous search result / image
K (Shift+k) Focus first search result / image
J (Shift+j) Focus last search result / image
] Go to next search page
[ Go to previous search page
o Focus next suggested search

Google Translate
Shortcut Description
Translate
j Focus translate-from box
Escape Unfocus translate-from box
u Focus source languages
o Focus translation languages
i Swap languages
Details
k Listen to source text
l Listen to translation
d Show/hide definitions
e Show/hide examples
t Show/hide translations

Reddit
Shortcut Description
Navigation
o Go to home
u Go to popular
Posts
j Next post or comment
k Previous post or comment
K (Shift+k) First post or comment
J (Shift+j) Last post or comment
Enter Collapse/expand comment
Post
b Go to post's subreddit (new tab)
g Open post image (new tab)
l Open post link (new tab)
B (Shift+b) Go to post's subreddit (this tab)
G (Shift+g) Open post image (this tab)
L (Shift+l) Open post link (this tab)
f Focus post on comments page
Posts filters
1 Hot posts
2 New posts
3 Top posts
4 Rising posts
t Filter/sort posts/comments
Video
; Pause/resume
[ Rewind
] Fast forward
m Mute
+ Volume up
- Volume down

Twitch
Shortcut Description
Sidebar
E (Shift+e) Expand/collapse left sidebar
u Focus followed channels
r Focus recommended channels
Relevant content (stream, video...)
] Focus next relevant
[ Focus previous relevant
{ Focus first relevant
} Focus last relevant
\ Show more / all
Navigation
o Go to home
U (Shift+u) Go to following
b Browse categories
B (Shift+b) Browse live channels
i Filter/sort by
Stream
s Open settings
q Open quality settings
C (Shift+c) Go to stream category
d Scroll to description/video
Chat
c Chat
e Expand/collapse chat
Channel
h Go to online/offline channel sections
v Go to channel videos
S (Shift+s) Go to channel schedule
Mini player
x Expand mini player
X (Shift+x) Close mini player

Youtube
Shortcut Description
Navigation
e Expand/Collapse guide sidebar
o Go to Home
u Go to Subscriptions
U (Shift+u) Focus subscribed channels
Videos
] Focus next video
[ Focus previous video
{ Focus first video
} Focus last video
Video Player
s Open settings
q Open quality settings
; Focus video player / show progress bar
d Scroll to description/video
n Comment
Channel
h Go to channel home
v Go to channel videos
p Go to channel playlists
H (Shift+h) Go to channel (new tab)
Playlist
, Focus first video in playlist
. Focus last video in playlist
Premiere/Stream
E (Shift+e) Hide/Show chat
b Chat
S (Shift+s) Skip ahead to live broadcast