Add context-menu item for generating QR code for the current page (#321)

CONTRIBUTORS.md

@@ -16,6 +16,7 @@
 - Metta Ong ([@ongspxm](https://github.com/ongspxm))
 - Michael Corwin ([@mcorwin22](https://github.com/mcorwin22))
 - Pradyumna Mahajan ([@pradyumnamahajan](https://github.com/pradyumnamahajan))
+- Mahmoud Ayesh ([@mahmoudhusam](https://github.com/mahmoudhusam))
 
 ## Translators
 

src/_locales/de/messages.json

@@ -186,6 +186,14 @@
     "message": "&QR-Code aus Link",
     "description": "The context menu entry shown for generating QR codes from a selected link with an access key."
   },
+  "contextMenuItemConvertPageURL": {
+    "message": "Generiere QR-Code für diese Seite",
+    "description": "Context menu item title for generating a QR code for the current page URL."
+  },
+  "contextMenuItemConvertPageURLAccessKey": {
+    "message": "&Generiere QR-Code für diese Seite",
+    "description": "Context menu item title for generating a QR code for the current page URL with an access key."
+  },
   "contextMenuSaveImageCanvas": {
     "message": "QR-Code als Bild speichern…",
     "description": "The context menu entry shown for saving SVG images in the popup."
@@ -241,6 +249,14 @@
     "message": "Zeigt ein farbiges Icon anstatt eines schwarz/weißen Icons in der Toolbar.",
     "description": "This is an option shown in the add-on settings. It describes the optionPopupIconColored setting in more details."
   },
+  "optionContextMenuEnabled": {
+    "message": "Zeige allgemeinen QR-Code-Generierungs-Kontextmenü-Eintrag",
+    "description": "This label refers to an option in the add-on settings. It allows users to toggle the visibility of the context menu item for generating a QR code from the current page."
+  },
+  "optionContextMenuEnabledDescr": {
+    "message": "Zeigt einen Kontextmenü-Eintrag um QR-Codes für die aktuelle Seite zu erstellen, zusätzlich zu denen für Links und ausgewählten Text.",
+    "description": "This is the helper text for the context menu toggle option. It explains that enabling this option will show the QR code generation context menu for the current page."
+  },
 
   "subtitleQrCodeSize": {
     "message": "QR-Code-Größe",

src/_locales/en/messages.json

@@ -186,6 +186,14 @@
     "message": "&QR code from link",
     "description": "The context menu entry shown for generating QR codes from a selected link with an access key."
   },
+  "contextMenuItemConvertPageURL": {
+    "message": "Generate QR code for this page",
+    "description": "Context menu item title for generating a QR code for the current page URL."
+  },
+  "contextMenuItemConvertPageURLAccessKey": {
+    "message": "&Generate QR code for this page",
+    "description": "Context menu item title for generating a QR code for the current page URL with an access key."
+  },
   "contextMenuSaveImageCanvas": {
     "message": "Save QR code as an image…",
     "description": "The context menu entry shown for saving PNG images (from a canvas) in the popup."
@@ -242,6 +250,14 @@
     "message": "Shows a colored icon instead of the black/white icon in the toolbar.",
     "description": "This is an option shown in the add-on settings. It describes the optionPopupIconColored setting in more details."
   },
+  "optionContextMenuEnabled": {
+    "message": "Show general QR code generation context menu item",
+    "description": "This label refers to an option in the add-on settings. It allows users to toggle the visibility of the context menu item for generating a QR code from the current page."
+  },
+  "optionContextMenuEnabledDescr": {
+    "message": "Shows a context menu item to create QR code for the current page, in addition to links and text selections.",
+    "description": "This is the helper text for the context menu toggle option. It explains that enabling this option will show the QR code generation context menu for the current page."
+  },
 
   "subtitleQrCodeSize": {
     "message": "QR code size",

src/background/modules/ContextMenu.js

@@ -4,6 +4,7 @@ import { createMenu } from "/common/modules/ContextMenu.js";
 const CONVERT_TEXT_SELECTION = "qr-convert-text-selection";
 const CONVERT_LINK_TEXT_SELECTION = "qr-convert-link-text-selection";
 const OPEN_OPTIONS = "qr-open-options";
+const CONVERT_PAGE_URL = "qr-convert-page-url";
 
 const MESSAGE_RESENT_TIMEOUT = 200; // ms
 const MESSAGE_RESENT_MAX = 9;
@@ -55,12 +56,17 @@ function createItems() {
         contexts: ["link"]
     });
 
+    const pageMenu = createMenu("contextMenuItemConvertPageURL", {
+        id: CONVERT_PAGE_URL,
+        contexts: ["page"]
+    });
+
     browser.menus.refresh();
 
     // if listener is set, because items were hidden -> remove it
     browser.menus.onHidden.removeListener(createItems);
 
-    return Promise.all([selectionMenu, linkMenu]);
+    return Promise.all([selectionMenu, linkMenu, pageMenu]);
 }
 
 /**
@@ -88,6 +94,13 @@ function menuClicked(event) {
             sendQrCodeText(event.linkUrl);
         });
         break;
+    case CONVERT_PAGE_URL:
+        browser.browserAction.openPopup().then(() => {
+            messageResentCount = 0;
+            // Send the current page URL to the popup explicitly to overwrite any setting that may use a different string
+            sendQrCodeText(event.pageUrl);
+        });
+        break;
     case OPEN_OPTIONS:
         browser.runtime.openOptionsPage();
         break;
@@ -119,6 +132,7 @@ function menuShown(info) {
 
     browser.menus.remove(CONVERT_TEXT_SELECTION);
     browser.menus.remove(CONVERT_LINK_TEXT_SELECTION);
+    browser.menus.remove(CONVERT_PAGE_URL);
 
     browser.menus.refresh();
 }
@@ -135,5 +149,15 @@ export function init() {
     return createItems().then(() => {
         browser.menus.onClicked.addListener(menuClicked);
         browser.menus.onShown.addListener(menuShown);
+        browser.runtime.onMessage.addListener((message) => {
+            if (message.action === "enableContextMenu") {
+                browser.menus.update(CONVERT_PAGE_URL, { visible: true });
+                console.log("Context menu enabled");
+            } else if (message.action === "disableContextMenu") {
+                browser.menus.update(CONVERT_PAGE_URL, { visible: false });
+                console.log("Context menu disabled");
+            }
+            browser.menus.refresh();
+        });    
     });
 }

src/common/modules/data/DefaultSettings.js

@@ -17,6 +17,7 @@ const isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
 const defaultSettings = Object.freeze({
     debugMode: false,
     popupIconColored: false,
+    contextMenuEnabled: true,
     qrColor: "#0c0c0d",
     qrBackgroundColor: (isDarkTheme ? "#d7d7db" : "#ffffff"), // dark uses Firefox Photon's grey-30
     qrErrorCorrection: "Q",

src/options/modules/CustomOptionTriggers.js

@@ -72,6 +72,26 @@ function applyPopupIconColor(optionValue) {
     IconHandler.changeIconIfColored(optionValue);
 }
 
+/**
+ * Adjusts UI based on the state of context menu enabled option.
+ *
+ * @function
+ * @private
+ * @param {boolean} optionValue
+ * @returns {void}
+ */
+function applyContextMenuEnabled(optionValue) {
+    if (optionValue) {
+        console.log("Context menu is enabled");
+        // Call the logic to enable the context menu
+        browser.runtime.sendMessage({ action: "enableContextMenu" });
+    } else {
+        console.log("Context menu is disabled");
+        // Call the logic to disable the context menu
+        browser.runtime.sendMessage({ action: "disableContextMenu" });
+    }
+}
+
 /**
  * Adjust UI if QR code size option is changed.
  *
@@ -254,10 +274,14 @@ export function registerTrigger() {
     AutomaticSettings.Trigger.registerSave("qrBackgroundColor", applyQrCodeColors);
     AutomaticSettings.Trigger.registerSave("qrQuietZone", updateQrQuietZoneStatus);
 
+    // Register trigger for contextMenuEnabled
+    AutomaticSettings.Trigger.registerSave("contextMenuEnabled", applyContextMenuEnabled);
+    AutomaticSettings.Trigger.registerUpdate("contextMenuEnabled", applyContextMenuEnabled);
+
     AutomaticSettings.Trigger.registerUpdate("qrColor", applyQrCodeColors);
     AutomaticSettings.Trigger.registerUpdate("qrBackgroundColor", applyQrCodeColors);
 
     // handle loading of options correctly
     AutomaticSettings.Trigger.registerBeforeLoad(resetOnBeforeLoad);
     AutomaticSettings.Trigger.registerAfterLoad(AutomaticSettings.Trigger.RUN_ALL_SAVE_TRIGGER);
-}
+}

src/options/options.html

@@ -64,6 +64,15 @@ <h1 data-i18n="__MSG_titleGeneral__">Add-on</h1>
 							<span class="helper-text" data-i18n="__MSG_optionPopupIconColoredDescr__">Shows a colored icon instead of the black/white icon in the toolbar.</span>
 						</div>
 					</li>
+					<li>
+						<div class="line">
+							<input class="setting save-on-change" type="checkbox" id="contextMenuEnabled" name="contextMenuEnabled">
+							<label data-i18n="__MSG_optionContextMenuEnabled__" for="contextMenuEnabled">Show general QR code generation context menu item</label>							
+						</div>
+						<div class="line indent">
+							<span class="helper-text" data-i18n="__MSG_optionContextMenuEnabledDescr__">Shows a context menu item to create QR code for the current page, in addition to links and text selections.</span>
+						</div>
+					</li>
 				</ul>
 			</section>