#1254 contextMenu toggle

src/_locales/en/optionsPage.json

@@ -10,6 +10,7 @@
   "optionsAddAnotherDevice": "Add another device",
   "optionsLogsLabel": "Approve 2FAS Browser Extension logs",
   "optionsLogsDesc": "Help us improve our browser extension by approving anonymous logs from your browser regarding 2FAS Browser Extension errors only.",
+  "optionsContextMenuLabel": "Show 2FAS Browser Extension option in context menu",
   "optionsPushDesc": "Choose a notification mechanism which will prompt you about communication with the 2FAS mobile app when you use this browser extension.",
   "optionsPushCustom": "2FAS Custom Notifications",
   "optionsPushNative": "Native Browser's Notifications",

src/background/functions/createContextMenus.js

@@ -18,25 +18,39 @@
 //
 
 const browser = require('webextension-polyfill');
+const { loadFromLocalStorage, saveToLocalStorage } = require('../../localStorage');
 
 const createContextMenus = () => {
-  const options = {
-    title: browser.i18n.getMessage('shortcutDesc'),
-    id: 'twofas-context-menu',
-    contexts: ['page', 'editable'],
-    enabled: true,
-    type: 'normal',
-    visible: true
-  };
+  return loadFromLocalStorage(['contextMenu'])
+    .then(storage => {
+      if (!('contextMenu' in storage)) {
+        return saveToLocalStorage({ contextMenu: true }, storage);
+      }
 
-  if (process.env.EXT_PLATFORM === 'Firefox' || process.env.EXT_PLATFORM === 'Safari') {
-    options.icons = {
-      16: '/images/icons/icon16.png',
-      32: '/images/icons/icon32.png'
-    };
-  }
-
-  browser.contextMenus.create(options);
+      return storage;
+    })
+    .then(storage => {
+      if (storage.contextMenu) {
+        const options = {
+          title: browser.i18n.getMessage('shortcutDesc'),
+          id: 'twofas-context-menu',
+          contexts: ['page', 'editable'],
+          enabled: true,
+          type: 'normal',
+          visible: true
+        };
+      
+        if (process.env.EXT_PLATFORM === 'Firefox' || process.env.EXT_PLATFORM === 'Safari') {
+          options.icons = {
+            16: '/images/icons/icon16.png',
+            32: '/images/icons/icon32.png'
+          };
+        }
+      
+        browser.contextMenus.create(options);
+      }
+    })
+    .catch(() => {});
 };
 
 module.exports = createContextMenus;

src/background/functions/generateDefaultStorage.js

@@ -43,6 +43,7 @@ const generateDefaultStorage = browserInfo => {
         configured: false,
         browserInfo,
         keys,
+        contextMenu: true,
         logging: false,
         notifications: false,
         incognito: false,

src/optionsPage/functions/handleContextMenuChange.js

@@ -0,0 +1,38 @@
+//
+//  This file is part of the 2FAS Browser Extension (https://github.com/twofas/2fas-browser-extension)
+//  Copyright © 2023 Two Factor Authentication Service, Inc.
+//  Contributed by Grzegorz Zając. All rights reserved.
+//
+//  This program is free software: you can redistribute it and/or modify
+//  it under the terms of the GNU General Public License as published by
+//  the Free Software Foundation, either version 3 of the License, or
+//  any later version.
+//
+//  This program is distributed in the hope that it will be useful,
+//  but WITHOUT ANY WARRANTY; without even the implied warranty of
+//  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+//  GNU General Public License for more details.
+//
+//  You should have received a copy of the GNU General Public License
+//  along with this program. If not, see <https://www.gnu.org/licenses/>
+//
+
+const browser = require('webextension-polyfill');
+const saveToLocalStorage = require('../../localStorage/saveToLocalStorage');
+const createContextMenus = require('../../background/functions/createContextMenus');
+
+const handleContextMenuChange = e => {
+  return saveToLocalStorage({ contextMenu: e.currentTarget.checked })
+    .then(storage => {
+      if (storage.contextMenu) {
+        browser.contextMenus.removeAll();
+        createContextMenus();
+      } else {
+        try {
+          browser.contextMenus.remove('twofas-context-menu');
+        } catch {}
+      }
+    });
+};
+
+module.exports = handleContextMenuChange;

src/optionsPage/functions/handleLoggingChange.js

@@ -20,7 +20,7 @@
 const saveToLocalStorage = require('../../localStorage/saveToLocalStorage');
 
 const handleLoggingChange = e => {
-  return saveToLocalStorage({ logging: e.currentTarget.checked })
+  return saveToLocalStorage({ logging: e.currentTarget.checked });
 };
 
 module.exports = handleLoggingChange;

src/optionsPage/functions/index.js

@@ -24,6 +24,7 @@ exports.generateEmptyShortcutBox = require('./generateEmptyShortcutBox');
 exports.generateShortcutBox = require('./generateShortcutBox');
 exports.generateShortcutLink = require('./generateShortcutLink');
 exports.handleAdvancedHeaderClick = require('./handleAdvancedHeaderClick');
+exports.handleContextMenuChange = require('./handleContextMenuChange');
 exports.handleHamburgerClick = require('./handleHamburgerClick');
 exports.handleLoggingChange = require('./handleLoggingChange');
 exports.handleMenuLink = require('./handleMenuLink');
@@ -38,6 +39,7 @@ exports.removeDeviceFromDOM = require('./removeDeviceFromDOM');
 exports.sendTestNotification = require('./sendTestNotification');
 exports.setAdvanced = require('./setAdvanced');
 exports.setExtName = require('./setExtName');
+exports.setContextMenuToggle = require('./setContextMenuToggle');
 exports.setExtNameUpdateForm = require('./setExtNameUpdateForm');
 exports.setExtVersion = require('./setExtVersion');
 exports.setPinInfoBtns = require('./setPinInfoBtns');

src/optionsPage/functions/setAdvanced.js

@@ -20,6 +20,7 @@
 const S = require('../../selectors');
 const handleAdvancedHeaderClick = require('./handleAdvancedHeaderClick');
 const handleLoggingChange = require('./handleLoggingChange');
+const handleContextMenuChange = require('./handleContextMenuChange');
 const handlePushChange = require('./handlePushChange');
 const handleSafariReset = require('./handleSafariReset');
 const sendTestNotification = require('./sendTestNotification');
@@ -29,6 +30,7 @@ const setAdvanced = () => {
   advancedHeader.addEventListener('click', handleAdvancedHeaderClick);
 
   const loggingToggle = document.querySelector(S.optionsPage.logsInput);
+  const contextMenuToggle = document.querySelector(S.optionsPage.contextMenuInput);
   const pushRadios = document.querySelectorAll('input[name="pushConfig"]');
   const testNotificationBtn = document.querySelector(S.optionsPage.testNotification);
   const safariResetBtn = document.querySelector(S.optionsPage.safariReset);
@@ -37,6 +39,10 @@ const setAdvanced = () => {
     loggingToggle.addEventListener('change', handleLoggingChange);
   }
 
+  if (contextMenuToggle) {
+    contextMenuToggle.addEventListener('change', handleContextMenuChange);
+  }
+
   if (pushRadios) {
     Array.from(pushRadios).forEach(radio => radio.addEventListener('change', handlePushChange));
   }

src/optionsPage/functions/setContextMenuToggle.js

@@ -0,0 +1,43 @@
+//
+//  This file is part of the 2FAS Browser Extension (https://github.com/twofas/2fas-browser-extension)
+//  Copyright © 2023 Two Factor Authentication Service, Inc.
+//  Contributed by Grzegorz Zając. All rights reserved.
+//
+//  This program is free software: you can redistribute it and/or modify
+//  it under the terms of the GNU General Public License as published by
+//  the Free Software Foundation, either version 3 of the License, or
+//  any later version.
+//
+//  This program is distributed in the hope that it will be useful,
+//  but WITHOUT ANY WARRANTY; without even the implied warranty of
+//  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+//  GNU General Public License for more details.
+//
+//  You should have received a copy of the GNU General Public License
+//  along with this program. If not, see <https://www.gnu.org/licenses/>
+//
+
+const { loadFromLocalStorage, saveToLocalStorage } = require('../../localStorage');
+
+const setContextMenuToggle = () => {
+  return loadFromLocalStorage(['contextMenu'])
+    .then(storage => {
+      if (!('contextMenu' in storage)) {
+        return saveToLocalStorage({ contextMenu: true }, storage);
+      }
+
+      return storage;
+    })
+    .then(storage => {
+      const contextMenuToggle = document.querySelector('input#twofas-context-menu');
+
+      if (contextMenuToggle) {
+        contextMenuToggle.checked = storage.contextMenu;
+      }
+
+      return Promise.resolve();
+    })
+    .catch(() => {});
+};
+
+module.exports = setContextMenuToggle;

src/optionsPage/optionsPage.js

@@ -25,7 +25,7 @@ const TwoFasNotification = require('../notification');
 const SDK = require('../sdk');
 const extPageOnMessage = require('../partials/extPageOnMessage');
 const { delay, storeLog, handleTargetBlank, hidePreloader, storageValidation } = require('../partials');
-const { generateDevicesList, setLoggingToggle, setPushRadio, setPinInfo, setExtName, setExtNameUpdateForm, setModalListeners, setAdvanced, setMenuLinks, setPinInfoBtns, setShortcutBox, setHamburger, setExtVersion, generateShortcutBox, generateShortcutLink } = require('./functions');
+const { generateDevicesList, setLoggingToggle, setContextMenuToggle, setPushRadio, setPinInfo, setExtName, setExtNameUpdateForm, setModalListeners, setAdvanced, setMenuLinks, setPinInfoBtns, setShortcutBox, setHamburger, setExtVersion, generateShortcutBox, generateShortcutLink } = require('./functions');
 
 const init = async storage => {
   i18n();
@@ -54,6 +54,7 @@ const init = async storage => {
     .then(setShortcutBox)
     .then(setExtVersion)
     .then(setLoggingToggle)
+    .then(setContextMenuToggle)
     .then(setPushRadio)
     .then(setHamburger)
     .then(handleTargetBlank)

src/optionsPage/styles/_content.scss

@@ -371,6 +371,7 @@
   }
 
   &-logs,
+  &-context-menu,
   &-push,
   &-safari-reset {
     margin-top: 40px;
@@ -390,6 +391,14 @@
     }
   }
 
+  &-logs {
+    margin-top: 6px;
+
+    @media all and (max-width: $screen-xs-max) {
+      margin-top: 6px;
+    }
+  }
+
   &-safari-reset {
     border: 2px solid $theme-color;
     border-radius: 16px;

src/selectors.js

@@ -70,6 +70,7 @@ const selectors = {
     },
     menuLink: '.js-twofas-menu-link',
     extVersion: 'span.twofas-ext-version',
+    contextMenuInput: 'input#twofas-context-menu',
     logsInput: 'input#twofas-logs',
     testNotification: '.js-twofas-send-test-notification',
     devicesList: '.js-twofas-device-list',

src/views/optionsViews/firefox.html

@@ -89,6 +89,21 @@
       </div>
     </div>
 
+    <div class="twofas-options-page-content-context-menu">
+      <div class="twofas-toggle">
+        <input type="checkbox" name="twofas-context-menu" id="twofas-context-menu">
+        <label for="twofas-context-menu">
+          <span class="twofas-toggle-box">
+            <span class="twofas-toggle-box-circle"></span>
+          </span>
+
+          <span class="twofas-toggle-text">
+            <span data-i18n="optionsContextMenuLabel">Show 2FAS Browser Extension option in context menu</span>
+          </span>
+        </label>
+      </div>
+    </div>
+
     <div class="twofas-options-page-content-logs">
       <div class="twofas-toggle">
         <input type="checkbox" name="twofas-logs" id="twofas-logs">

src/views/optionsViews/normal.html

@@ -75,6 +75,21 @@
       </div>
     </div>
 
+    <div class="twofas-options-page-content-context-menu">
+      <div class="twofas-toggle">
+        <input type="checkbox" name="twofas-context-menu" id="twofas-context-menu">
+        <label for="twofas-context-menu">
+          <span class="twofas-toggle-box">
+            <span class="twofas-toggle-box-circle"></span>
+          </span>
+
+          <span class="twofas-toggle-text">
+            <span data-i18n="optionsContextMenuLabel">Show 2FAS Browser Extension option in context menu</span>
+          </span>
+        </label>
+      </div>
+    </div>
+
     <div class="twofas-options-page-content-logs">
       <div class="twofas-toggle">
         <input type="checkbox" name="twofas-logs" id="twofas-logs">

src/views/optionsViews/safari.html

@@ -43,6 +43,21 @@
   </div>
 
   <div class="twofas-options-page-content-advanced-content js-twofas-advance-content">
+    <div class="twofas-options-page-content-context-menu">
+      <div class="twofas-toggle">
+        <input type="checkbox" name="twofas-context-menu" id="twofas-context-menu">
+        <label for="twofas-context-menu">
+          <span class="twofas-toggle-box">
+            <span class="twofas-toggle-box-circle"></span>
+          </span>
+
+          <span class="twofas-toggle-text">
+            <span data-i18n="optionsContextMenuLabel">Show 2FAS Browser Extension option in context menu</span>
+          </span>
+        </label>
+      </div>
+    </div>
+
     <div class="twofas-options-page-content-logs">
       <div class="twofas-toggle">
         <input type="checkbox" name="twofas-logs" id="twofas-logs">