Code now reflects newer versions of browser.menus API (#523)

* Extension now is up-to-date with the Menus API

In the previous version of this extension, the author used a comment to
explain that the `browser.menus.onClicked.addListener` event listener
doesn't pass the current check state of a checkbox menu.

To solve this, an additional variable checkedState was used to keep
track of the current value of the context menu.

But now, this function is supported by the menus API in Firefox.

I changed the code to reflect how you would use it with the recent
versions, making it easier for new developers to learn this
functionality.

* Comment now reflects new function body

Author: aug-dev

menu-demo/background.js

@@ -77,14 +77,12 @@ browser.menus.create({
   contexts: ["all"]
 }, onCreated);
 
-let checkedState = true;
-
 browser.menus.create({
   id: "check-uncheck",
   type: "checkbox",
   title: browser.i18n.getMessage("menuItemUncheckMe"),
   contexts: ["all"],
-  checked: checkedState
+  checked: true,
 }, onCreated);
 
 browser.menus.create({
@@ -116,15 +114,9 @@ function borderify(tabId, color) {
 }
 
 /*
-Toggle checkedState, and update the menu item's title
-appropriately.
-
-Note that we should not have to maintain checkedState independently like
-this, but have to because Firefox does not currently pass the "checked"
-property into the event listener.
+Update the menu item's title according to current "checked" value.
 */
-function updateCheckUncheck() {
-  checkedState = !checkedState;
+function updateCheckUncheck(checkedState) {
   if (checkedState) {
     browser.menus.update("check-uncheck", {
       title: browser.i18n.getMessage("menuItemUncheckMe"),
@@ -156,7 +148,7 @@ browser.menus.onClicked.addListener((info, tab) => {
       borderify(tab.id, green);
       break;
     case "check-uncheck":
-      updateCheckUncheck();
+      updateCheckUncheck(info.checked);
       break;
     case "open-sidebar":
       console.log("Opening my sidebar");