[SOLVED] Assign command keyboard shortcut from popup or options

Assign command keyboard shortcut from popup or options

Is it possible with the Chrome API to let users assign a keyboard shortcut from within the extension popup or options page? Without them having to go to extensions page, scroll to the bottom and open keyboard shortcut menu.

Solution

In Chrome there's no method to assign a shortcut key programmatically, but you can add a button or a link in the extension popup that will open the built-in dialog.

popup.html:

<button id="hotkey">Assign a shortcut key</button>
<script src="popup.js"></script>

popup.js:

document.getElementById('hotkey').onclick = () => chrome.tabs.create({
  url: 'chrome://extensions/shortcuts'
});

Notes:

chrome:// URLs can be opened only via chrome/WebExtensions API methods,
but not via <a href="..."> links directly.

You can still use a standard <a> link with a click listener shown above; just don't forget to prevent the default click event to avoid an error in the console:
```
  document.getElementById('hotkey').onclick = event => {
    chrome.tabs.create({url: 'chrome://extensions/shortcuts'});
    event.preventDefault();
  };
```
In Opera browser the URL is opera://settings/configureCommands
You can detect the browser using navigator.userAgent string
Firefox 137 and newer uses a dedicated API: browser.commands.openShortcutSettings() instead of chrome.tabs.create.

In earlier versions you'll have to show an instruction to open about:addons page, click the gear icon, then choose "Manage extension shortcuts". However, Firefox allows setting the hotkeys programmatically using browser.commands.update.