diff --git a/commands/README.md b/commands/README.md
index a718f6a..1f034f9 100644
--- a/commands/README.md
+++ b/commands/README.md
@@ -4,3 +4,5 @@ This extension shows how to use the `commands` manifest key to register keyboard
It registers a shortcut (Ctrl+Shift+U) to send a command to the extension (Command+Shift+U on a Mac).
When the user enters the shortcut, the extension opens a new browser tab and loads https://developer.mozilla.org into it.
+
+It also adds an [options page](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Options_pages) to the extension, which enables the user to change the registered shortcut for the extension. Just open the options page, then type a new value into the textbox (for example: "Ctrl+Shift+O") and press "Update keyboard shortcut". To reset the shortcut to its original value, press "Reset keyboard shortcut".
diff --git a/commands/background.js b/commands/background.js
index ea53455..df72174 100644
--- a/commands/background.js
+++ b/commands/background.js
@@ -10,7 +10,7 @@
* shortcut: "Ctrl+Shift+U"
* }]
*/
-var gettingAllCommands = browser.commands.getAll();
+let gettingAllCommands = browser.commands.getAll();
gettingAllCommands.then((commands) => {
for (let command of commands) {
// Note that this logs to the Add-on Debugger's console: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging
diff --git a/commands/manifest.json b/commands/manifest.json
index 785b9f0..df959c1 100644
--- a/commands/manifest.json
+++ b/commands/manifest.json
@@ -4,6 +4,14 @@
"homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/commands",
"manifest_version": 2,
"version": "1.0",
+
+ "applications": {
+ "gecko": {
+ "id": "commands-demo@mozilla.org",
+ "strict_min_version": "60.0b5"
+ }
+ },
+
"background": {
"scripts": ["background.js"]
},
@@ -13,5 +21,10 @@
"suggested_key": { "default": "Ctrl+Shift+U" },
"description": "Send a 'toggle-feature' event to the extension"
}
+ },
+
+ "options_ui": {
+ "page": "options.html",
+ "browser_style": true
}
}
diff --git a/commands/options.html b/commands/options.html
new file mode 100644
index 0000000..618ab46
--- /dev/null
+++ b/commands/options.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/commands/options.js b/commands/options.js
new file mode 100644
index 0000000..884e48f
--- /dev/null
+++ b/commands/options.js
@@ -0,0 +1,42 @@
+const commandName = 'toggle-feature';
+
+/**
+ * Update the UI: set the value of the shortcut textbox.
+ */
+async function updateUI() {
+ let commands = await browser.commands.getAll();
+ for (command of commands) {
+ if (command.name === commandName) {
+ document.querySelector('#shortcut').value = command.shortcut;
+ }
+ }
+}
+
+/**
+ * Update the shortcut based on the value in the textbox.
+ */
+async function updateShortcut() {
+ await browser.commands.update({
+ name: commandName,
+ shortcut: document.querySelector('#shortcut').value
+ });
+}
+
+/**
+ * Reset the shortcut and update the textbox.
+ */
+async function resetShortcut() {
+ await browser.commands.reset(commandName);
+ updateUI();
+}
+
+/**
+ * Update the UI when the page loads.
+ */
+document.addEventListener('DOMContentLoaded', updateUI);
+
+/**
+ * Handle update and reset button clicks
+ */
+document.querySelector('#update').addEventListener('click', updateShortcut)
+document.querySelector('#reset').addEventListener('click', resetShortcut)