make customizable keyboard shortcuts chrome extensions

Question

I am making a chrome extension with a keyboard shortcut to open a pop-up and the code below works fine. It's just that I want the user to be able to specify the keyboard shortcut to open the browser action via the options.html page. How might I go about this?

• Note: I am not open to using Jquery, other 3rd party plugins, or content-scripts.

I would prefer to use a dropdown w/ the allowed shortcut keys (Ctrl+Shift+Alt, Ctrl+Shift, Ctrl+Alt, Ctrl, & Alt) mixed with a textbox only allowing one key to be entered.

That last part is a sub-question, but the main thing here is:

How Can I make Customizable Keyboard shortcuts within options page?

Manifest.json:

|  ...  |
"browser_action": {
  "default_icon": "png/Icon-128.png",
  "default_title": "Gamez.io",  
  "default_popup": "popup.html"
},
"background": {
  "scripts": ["background.js"],
  "persistent": false
},
"permissions": [
   "activeTab",
    "tabs"
],
"commands": {
  "_execute_browser_action": {
    "suggested_key": {
      "windows": "Alt+X",
      "mac": "Alt+X",
      "chromeos": "Alt+X",
      "linux": "Alt+X"
    }
  }
}

Answer 1

I figured out a way... Well kind of...

Steps:

1. Create a content.js file and list it in your manifest.
2. Then add the following code to your content.js file:

content.js:

window.onkeyup = function(e) {
  if (e.which == 69) {
    window.alert('You pressed \'e\' !');
  }
};

Then see Here on how to make custom keyboard-shortcuts using JS.

3. Use JSON Files and chrome.setlocalstorage(something along those lines [still working on it] ) to save the users input from options.html.

My current Question: Here How the heck do I trigger the Browser_Action!?

Answer 2

There is no clean/ideal way to customize shortcuts thru an extension since those are set thru the manifest and not alterable programmatically. However the shortcuts you described in your manifest can be manually modified by the user in the chrome://extensions page.