Update the commands sample to have 2 commands

Before the change, the sample showed how to add one command, and how to
update it, reset it, and respond to it. But usually the extension
developer needs to configure more than one command, and the code was not
readily usable for such a need.

After this patch, the developer can easily see what are the different
places they need to make conditional decisions, to add a new command to
the extension.

This patch also includes some cosmetic changes, like wrapping the long
lines of the README.md, as intended by the authors of Markdown syntax.
If desirable, I can put such cosmetic changes in a separate commit.

commands/README.md

@@ -1,8 +1,20 @@
 # commands
 
-This extension shows how to use the `commands` manifest key to register keyboard shortcuts for your extension.
+This extension shows how to use the `commands` manifest key to register keyboard
+shortcuts for your extension.
 
-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 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".
+The extension has another command, that opens the https://addons.mozilla.org in
+a new tab. This command does not have a predefined shortcut assigned to it. The
+user can assign a shortcut of her choosing to this command.
+
+It also adds an [options page][] to the extension, which enables the user to
+change the registered shortcuts for the extension. Just open the options page,
+then type a new value into the textboxes (for example: "Ctrl+Shift+O") and press
+"Update keyboard shortcuts". To reset all the shortcuts to thier original value,
+press "Reset keyboard shortcuts".
+
+[options page]: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Options_pages

commands/background.js

@@ -2,19 +2,29 @@
  * Returns all of the registered extension commands for this extension
  * and their shortcut (if active).
  *
- * Since there is only one registered command in this sample extension,
- * the returned `commandsArray` will look like the following:
- *    [{
- *       name: "toggle-feature",
- *       description: "Send a 'toggle-feature' event to the extension"
- *       shortcut: "Ctrl+Shift+U"
- *    }]
+ * Since there are 2 registered commands in this extension, the returned
+ * `commandsArray` will look like the following:
+ *    [
+ *      {
+ *        name: "Command 1",
+ *        description: "Send a 'Command 1' event to the extension"
+ *        shortcut: "Ctrl+Shift+U"
+ *      },
+ *      {
+ *        name: "Command 2",
+ *        description: "Send a 'Command 2' event to the extension"
+ *        shortcut: ""
+ *      }
+ *    ]
  */
 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
-    // not the regular Web console.
+  /*
+   * Note that this sends message to the Add-on Debugger's console, and not the
+   * regular Web console.
+   * See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging
+   */
     console.log(command);
   }
 });
@@ -26,5 +36,17 @@ gettingAllCommands.then((commands) => {
  * On Mac, this command will automatically be converted to "Command+Shift+U".
  */
 browser.commands.onCommand.addListener((command) => {
-  browser.tabs.create({url: "https://developer.mozilla.org"});
+
+  if (command === 'Command 1'){
+    browser.tabs.create({url: "https://developer.mozilla.org"});
+  } else if (command === 'Command 2'){
+    browser.tabs.create({url: "https://addons.mozilla.org"});
+  } else {
+    /*
+     * Note that this sends message to the Add-on Debugger's console, and not
+     * the regular Web console.
+     * See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging
+     */
+    console.log("Unexpected command: ", command);
+  }
 });

commands/manifest.json

@@ -17,9 +17,13 @@
   },
 
   "commands": {
-    "toggle-feature": {
+    "Command 1": {
       "suggested_key": { "default": "Ctrl+Shift+U" },
-      "description": "Send a 'toggle-feature' event to the extension"
+      "description": "Send a 'Command 1' event to the extension"
+    },
+    "Command 2": {
+      "suggested_key": { "default": null },
+      "description": "Send a 'Command 2' event to the extension"
     }
   },
 

commands/options.html

@@ -7,10 +7,21 @@
 
 <body>
   <form>
-      <label>Keyboard shortcut</label>
-      <input type="text" id="shortcut" >
-      <button id="update">Update keyboard shortcut</button>
-      <button id="reset">Reset  keyboard shortcut</button>
+      <label>Shortcut 1</label>
+      <input type="text" id="shortcut1" >
+      <input type="text" id="description1" value="Hello">
+      <br/>
+
+      <label>Shortcut 2</label>
+      <input type="text" id="shortcut2" >
+      <input type="text" id="description2" value="World">
+      <br/>
+
+      <button id="update">Update keyboard shortcuts</button>
+      <br/>
+
+      <button id="reset">Reset keyboard shortcuts</button>
+      <br/>
   </form>
   <script src="options.js"></script>
 </body>

commands/options.js

@@ -1,32 +1,45 @@
-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;
+      if (command.name === 'Command 1') {
+        document.querySelector('#shortcut1').value = command.shortcut;
+        document.querySelector('#description1').value = command.description;
+      } else if (command.name === 'Command 2') {
+        document.querySelector('#shortcut2').value = command.shortcut;
+        document.querySelector('#description2').value = command.description;
+      }
     }
   }
 }
 
 /**
  * Update the shortcut based on the value in the textbox.
  */
-async function updateShortcut() {
+async function updateShortcuts() {
   await browser.commands.update({
-    name: commandName,
-    shortcut: document.querySelector('#shortcut').value
+    name: 'Command 1',
+    shortcut: document.querySelector('#shortcut1').value,
+    description: document.querySelector('#description1').value
+  });
+
+  await browser.commands.update({
+    name: 'Command 2',
+    shortcut: document.querySelector('#shortcut2').value,
+    description: document.querySelector('#description2').value
   });
 }
 
 /**
  * Reset the shortcut and update the textbox.
  */
-async function resetShortcut() {
-  await browser.commands.reset(commandName);
+async function resetShortcuts() {
+  await browser.commands.reset('Command 1');
+  await browser.commands.reset('Command 2');
+
+  // Refresh the UI
   updateUI();
 }
 
@@ -38,5 +51,5 @@ document.addEventListener('DOMContentLoaded', updateUI);
 /**
  * Handle update and reset button clicks
  */
-document.querySelector('#update').addEventListener('click', updateShortcut)
-document.querySelector('#reset').addEventListener('click', resetShortcut)
+document.querySelector('#update').addEventListener('click', updateShortcuts)
+document.querySelector('#reset').addEventListener('click', resetShortcuts)