How to add custom keyboard shortcuts to any website

To add a custom keyboard shortcut to any website, install a browser extension that intercepts keypresses on the page, then map a key to an action — open a link, expand text, click an element, or run a script. With HotKeyNavigator you bind your first shortcut in about two minutes, and it works on sites that ship no shortcuts of their own.

The web apps you live in all day — your CRM, inbox, ticketing tool, internal dashboards — ship a handful of keyboard shortcuts at best, and almost none let you add your own. This guide covers what a custom shortcut actually is, every way to create one, and how to map a shortcut that chains several actions together on any page. It is one piece of the bigger picture in how to automate repetitive browser tasks without code.

What counts as a custom keyboard shortcut

A custom keyboard shortcut is a key or key combination you define yourself that triggers an action the website did not build in. Unlike a site’s native shortcuts, a custom one is yours: you choose the key, the action, and the pages it runs on, and you can change it whenever your workflow changes.

Native shortcuts are frozen by whoever built the app. Custom shortcuts flip that around — the trigger and the action are both under your control, so you map the browser to the way you work instead of memorising someone else’s key map.

The ways to add shortcuts to a website

There are five common ways to add keyboard shortcuts to a website, and they trade off sharply on effort and power. Native shortcuts and the HTML accesskey attribute need no tools but barely exist on most sites; bookmarklets and DIY scripts work but demand code; a dedicated extension is the only no-code option that runs anywhere.

For a developer automating one personal task, a userscript is fine. For anyone who wants shortcuts across many sites without maintaining code, a dedicated extension is the practical choice — it handles keypress capture, conflict detection, and per-site scoping so you never touch the plumbing.

How to map your first shortcut

You map your first custom shortcut in four steps: open the command palette on the target page, pick a trigger key, choose the action to bind, and save. Conflict detection warns you before a key clashes with the site or another shortcut, so nothing breaks silently.

1. Open the command palette on the page you want to automate.
2. Pick a trigger — a single key, a combo, or a short prefix for text.
3. Choose the action: open a link, expand a snippet, click an element, or run JavaScript.
4. Save, then press the key on the page to confirm it fires.

Start with one action you reach for constantly — the record you open twenty times a day, or the reply you retype every hour. Once it is muscle memory, mapping the next one takes seconds.

Go beyond a single action

A single custom shortcut can do far more than open a link — it can run a whole workflow. HotKeyNavigator lets one key expand a text template, click through a sequence, and run your own JavaScript in order, so a multi-step task collapses into a single press without leaving the keyboard.

Text templates with variables

Bind a short prefix to a text template that fills placeholders like {{name}} and {{company}} at expansion time. One trigger drops a personalised message where your cursor is, so canned outreach and support replies stop being retyped from scratch. Add {{#if}} branches and one template covers several cases — the full approach is in text expansion with variables and conditional logic.

Recorded click sequences

Record a sequence of clicks, focus changes, and form fills once, then replay it from a key with DOM click macros. Per-step delays let the macro wait for slow pages, so a repetitive UI flow runs the same way every time. See record and replay clicks on a web page for the full method.

Your own JavaScript

When a task needs real logic, bind a key to your own JavaScript function. It runs in the page context with the current URL, title, selected text, and active element passed in, so it can read and rewrite the page directly — no extension to build or package. Walk through it in run custom JavaScript with a keyboard shortcut.

Scope shortcuts to the right sites

The same key can mean different things on different sites when you scope shortcuts with dynamic profiles. A profile is a key map tied to a domain, so your Salesforce layout loads on Salesforce and your Gmail layout loads on Gmail — the right shortcuts appear automatically, without you switching anything.

This matters once you map more than a handful of shortcuts. Without profiles, every binding is global and the good single-letter keys run out fast. With them, a key like g can jump to your inbox on one site and a CRM queue on another, because the two never load at the same time. Profiles also keep a site’s own shortcuts from clashing with yours, since a binding only exists where you scoped it.

Avoid shortcut conflicts

Shortcut conflicts happen when your key collides with the website’s own binding or the browser’s. HotKeyNavigator detects clashes as you map a key and flags them before you save, and dynamic profiles load a different key map per domain so a shortcut that fits your inbox never fights with your CRM.

Conflicts are the main reason people abandon custom shortcuts, so it is worth handling them deliberately. Reserve a leader key or a two-key prefix for the actions you add, and let conflict detection catch the rest as you go. When a site genuinely needs its own key back, disable your binding on that domain instead of remapping everything — each shortcut is individually toggleable per site.

• Conflict detection warns you the moment a trigger overlaps another action.
• Per-domain profiles keep site-specific maps from stepping on each other.
• Every binding is individually remappable and can be disabled per site.

Real workflows to map first

The best first shortcuts are the actions you repeat without thinking. These map cleanly to a single key and pay back the two minutes of setup within a day.

• One-key deep links into the CRM record, queue, or dashboard you open constantly.
• A text template with variables for the outreach or reply you send hourly.
• A recorded click sequence that logs an activity or advances a ticket.
• A JavaScript shortcut that reads fields off the page and reformats them.

A worked example: one key, five steps

To see why chaining matters, take a task an SDR does dozens of times a day — open a lead, log an outreach touch, and move on — and collapse it into a single shortcut. Each step below is a capability covered above; the point is that one key runs all of them in order.

1. Deep-link straight to the next lead in today’s queue.
2. Wait for the record to finish loading.
3. Expand a personalised opener with {{name}} and {{company}} filled in.
4. Click through the activity-logging flow with a recorded macro.
5. Run a one-line script that copies the lead’s email for the next tab.

Mapped by hand, that is a menu hunt, a retype, and a copy-paste every single time. Mapped once as a chained shortcut, it is a keystroke — which is exactly the workflow walked through in the SDR’s guide to automating Salesforce data entry. Whatever your role, the pattern is the same: find the procedure you repeat, then map it end to end.

Start with one shortcut you reach for constantly. Once the first key is muscle memory, you will want everything mapped — and every action on every site becomes a keystroke away.