Merge pull request #105 from twofas/feature/1.7.3

v1.7.3

.nvmrc

@@ -1 +1 @@
-v20.11.1
+v20.17.0

2FAS - Two factor authentication/2FAS - Two Factor Authentication.xcodeproj/project.pbxproj

@@ -220,7 +220,7 @@
 			attributes = {
 				BuildIndependentTargetsInParallel = 1;
 				LastSwiftUpdateCheck = 1340;
-				LastUpgradeCheck = 1500;
+				LastUpgradeCheck = 1600;
 				TargetAttributes = {
 					3719091F28C5F9940088849E = {
 						CreatedOnToolsVersion = 13.4.1;
@@ -431,7 +431,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 60;
+				CURRENT_PROJECT_VERSION = 63;
 				DEAD_CODE_STRIPPING = YES;
 				DEVELOPMENT_TEAM = ZY8UR5ADFW;
 				ENABLE_HARDENED_RUNTIME = YES;
@@ -445,7 +445,7 @@
 					"@executable_path/../../../../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 11.0;
-				MARKETING_VERSION = 1.7.2;
+				MARKETING_VERSION = 1.7.3;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,
@@ -467,7 +467,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 60;
+				CURRENT_PROJECT_VERSION = 63;
 				DEAD_CODE_STRIPPING = YES;
 				DEVELOPMENT_TEAM = ZY8UR5ADFW;
 				ENABLE_HARDENED_RUNTIME = YES;
@@ -481,7 +481,7 @@
 					"@executable_path/../../../../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 11.0;
-				MARKETING_VERSION = 1.7.2;
+				MARKETING_VERSION = 1.7.3;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,
@@ -499,13 +499,12 @@
 		3719095A28C5F9940088849E /* Debug */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
-				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				CODE_SIGN_ENTITLEMENTS = "macOS (App)/2FAS - Two factor authentication.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 60;
+				CURRENT_PROJECT_VERSION = 63;
 				DEAD_CODE_STRIPPING = YES;
 				DEVELOPMENT_TEAM = ZY8UR5ADFW;
 				ENABLE_HARDENED_RUNTIME = YES;
@@ -519,7 +518,7 @@
 					"@executable_path/../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 11.0;
-				MARKETING_VERSION = 1.7.2;
+				MARKETING_VERSION = 1.7.3;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,
@@ -538,14 +537,13 @@
 		3719095B28C5F9940088849E /* Release */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
-				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				CODE_SIGN_ENTITLEMENTS = "macOS (App)/2FAS - Two factor authentication.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Distribution";
 				"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 60;
+				CURRENT_PROJECT_VERSION = 63;
 				DEAD_CODE_STRIPPING = YES;
 				DEVELOPMENT_TEAM = ZY8UR5ADFW;
 				ENABLE_HARDENED_RUNTIME = YES;
@@ -559,7 +557,7 @@
 					"@executable_path/../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 11.0;
-				MARKETING_VERSION = 1.7.2;
+				MARKETING_VERSION = 1.7.3;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,

2FAS - Two factor authentication/2FAS - Two Factor Authentication.xcodeproj/xcshareddata/xcschemes/2FAS - Two Factor Authentication (macOS).xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1500"
+   LastUpgradeVersion = "1600"
    version = "1.7">
    <BuildAction
       parallelizeBuildables = "YES"

package.json

@@ -1,9 +1,9 @@
 {
   "name": "2fas-browser-extension",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "This is the official Browser Extension for the Open Source 2FAS project.",
   "engines": {
-    "node": "20.11.1"
+    "node": "20.17.0"
   },
   "scripts": {
     "clean": "npx -y rimraf --glob ./public/*",
@@ -61,7 +61,7 @@
     "babel-plugin-transform-minify-booleans": "^6.9.4",
     "babel-plugin-transform-remove-debugger": "^6.9.4",
     "babel-preset-minify": "^0.5.2",
-    "browserslist": "^4.23.1",
+    "browserslist": "^4.23.3",
     "copy-webpack-plugin": "^12.0.2",
     "cross-env": "^7.0.3",
     "crypto-browserify": "^3.12.0",
@@ -69,12 +69,12 @@
     "css-minimizer-webpack-plugin": "^7.0.0",
     "dotenv": "^16.4.5",
     "dotenv-webpack": "^8.1.0",
-    "eslint": "9.5.0",
+    "eslint": "^8.0.1",
     "eslint-config-standard": "^17.1.0",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^17.9.0",
-    "eslint-plugin-promise": "^6.2.0",
+    "eslint-plugin-n": "^16.0.0",
+    "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-standard": "^5.0.0",
     "eslint-webpack-plugin": "^4.2.0",
     "exports-loader": "^5.0.0",
@@ -89,14 +89,14 @@
     "postcss-sass": "^0.5.0",
     "precss": "^4.0.0",
     "require-dir": "^1.2.0",
-    "rimraf": "^5.0.5",
+    "rimraf": "^6.0.1",
     "sass": "^1.77.6",
-    "sass-loader": "^14.2.1",
+    "sass-loader": "^16.0.2",
     "source-map-loader": "^5.0.0",
     "stream-browserify": "^3.0.0",
     "streamify": "^1.0.0",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.6.1",
+    "stylelint": "^16.9.0",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-webpack-plugin": "^5.0.1",
     "svg-inline-loader": "^0.8.2",
@@ -112,6 +112,7 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "qrcode": "^1.5.3",
+    "slim-select": "^2.9.0",
     "uuid": "^10.0.0"
   }
 }

src/_locales/en/general.json

@@ -19,6 +19,8 @@
   "add": "Add",
   "cancel": "Cancel",
   "shortcut": "Shortcut",
+  "icon": "Icon",
+  "options": "Options",
   "neverShowAgain": "Never show again",
   "isNotSupportedByExt": "is not supported by 2FAS Extension",
   "shortcutSetDesc": "Set a shortcut to open the 2FAS Browser Extension on any page.",

src/_locales/en/optionsPage.json

@@ -41,5 +41,6 @@
   "optionsDomainRequired": "Domain is required",
   "optionsDomainTooLong": "Domain is too long",
   "optionsDomainIncorrect": "Domain is not correct",
-  "optionsDomainExists": "Domain exists on excluded list"
+  "optionsDomainExists": "Domain exists on excluded list",
+  "optionsIconDesc": "Choose an icon for the 2FAS Browser Extension to personalize its appearance in your browser."
 }

src/background/background.js

@@ -18,7 +18,7 @@
 //
 
 const browser = require('webextension-polyfill');
-const { onConnect, onCommand, onContextMenuClick, onInstalled, getBrowserInfo, onMessage, onStartup, browserAction, createContextMenus, dummyGetLocalStorage } = require('./functions');
+const { onConnect, onCommand, onContextMenuClick, onInstalled, getBrowserInfo, onMessage, onStartup, browserAction, createContextMenus, dummyGetLocalStorage, setIcon } = require('./functions');
 const { onTabRemoved, onTabUpdated, onTabActivated } = require('./tabs');
 
 const browserInfo = getBrowserInfo();
@@ -47,3 +47,5 @@ browser.tabs.onActivated.addListener(onTabActivated);
 setInterval(() => {
   return dummyGetLocalStorage();
 }, 25 * 1000);
+
+setIcon(null, false, false);

src/background/functions/checkTabCS.js

@@ -36,7 +36,7 @@ const checkTabCS = async tabId => {
     return;
   }
 
-  const tabUrl = tabInfo.url ? tabInfo.url : tabInfo.pendingUrl;
+  const tabUrl = tabInfo?.url ? tabInfo.url : (tabInfo?.pendingUrl ? tabInfo.pendingUrl : '');
   const extUrl = browser.runtime.getURL('');
   let urlObj;
 

src/background/functions/createContextMenus.js

@@ -19,6 +19,7 @@
 
 const browser = require('webextension-polyfill');
 const { loadFromLocalStorage, saveToLocalStorage } = require('../../localStorage');
+const createFirefoxOptionsMenu = require('./createFirefoxOptionsMenu');
 
 const createContextMenus = () => {
   return loadFromLocalStorage(['contextMenu'])
@@ -50,6 +51,8 @@ const createContextMenus = () => {
         browser.contextMenus.removeAll();
         browser.contextMenus.create(options);
       }
+
+      createFirefoxOptionsMenu();
     })
     .catch(() => {});
 };

src/background/functions/createFirefoxOptionsMenu.js

@@ -0,0 +1,35 @@
+//
+//  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 createFirefoxOptionsMenu = () => {
+  if (process.env.EXT_PLATFORM === 'Firefox') {
+    browser.contextMenus.create({
+      title: browser.i18n.getMessage('options'),
+      id: 'twofas-firefox-options-menu',
+      contexts: ['browser_action'],
+      enabled: true,
+      type: 'normal',
+      visible: true
+    });
+  }
+};
+
+module.exports = createFirefoxOptionsMenu;

src/background/functions/generateDefaultStorage.js

@@ -61,7 +61,8 @@ const generateDefaultStorage = browserInfo => {
         extensionVersion: config.ExtensionVersion,
         autoSubmitEnabled: false,
         autoSubmitExcludedDomains: defaultAutoSubmitExcludedDomains,
-        attempt: attempt + 1
+        attempt: attempt + 1,
+        extIcon: 0 // 0 - default
       });
     })
     .then(storage => {

src/background/functions/index.js

@@ -27,6 +27,7 @@ exports.checkTabCS = require('./checkTabCS');
 exports.closeRequest = require('./closeRequest');
 exports.closeWSChannel = require('./closeWSChannel');
 exports.createContextMenus = require('./createContextMenus');
+exports.createFirefoxOptionsMenu = require('./createFirefoxOptionsMenu');
 exports.Crypt = require('./Crypt');
 exports.dummyGetLocalStorage = require('./dummyGetLocalStorage');
 exports.generateDefaultStorage = require('./generateDefaultStorage');

src/background/functions/onContextMenuClick.js

@@ -17,9 +17,15 @@
 //  along with this program. If not, see <https://www.gnu.org/licenses/>
 //
 
+const browser = require('webextension-polyfill');
 const browserAction = require('./browserAction');
+const openBrowserPage = require('./openBrowserPage');
 
 const onContextMenuClick = (info, tab) => {
+  if (info?.menuItemId === 'twofas-firefox-options-menu') {
+    return openBrowserPage(browser.runtime.getURL('/optionsPage/optionsPage.html'));
+  }
+
   if (info?.menuItemId === 'twofas-context-menu') {
     return browserAction(tab);
   }

src/background/functions/setIcon.js

@@ -18,46 +18,68 @@
 //
 
 const browser = require('webextension-polyfill');
+const loadFromLocalStorage = require('../../localStorage/loadFromLocalStorage');
 
-const setIcon = async (tabId, active = true, changeTitle = false) => {
-  const option = process.env.EXT_PLATFORM === 'Safari' ? 'safari' : '';
+const getIconObj = async (tabID, isActive) => {
+  const MAX_TYPE = 2;
+  const isSafari = process.env.EXT_PLATFORM === 'Safari';
+  
+  let type = 0;
+  let typeFilename = '';
+  let iconFileName = '';
 
-  const iconObj =
-    active
-      ? {
-        path: {
-          16: browser.runtime.getURL(`images/icons/icon16${option}.png`),
-          32: browser.runtime.getURL(`images/icons/icon32${option}.png`),
-          48: browser.runtime.getURL(`images/icons/icon48${option}.png`),
-          96: browser.runtime.getURL(`images/icons/icon96${option}.png`),
-          128: browser.runtime.getURL(`images/icons/icon128${option}.png`)
-        },
-        tabId
+  if (isSafari) {
+    iconFileName = isActive ? 'safari' : 'safarigray';
+  } else {
+    const storage = await loadFromLocalStorage(['extIcon']);
+
+    if (storage && storage?.extIcon && !isNaN(storage.extIcon)) {
+      type = parseInt(storage.extIcon, 10);
+
+      if (type > MAX_TYPE) {
+        type = 0;
       }
-      : {
-        path: {
-          16: browser.runtime.getURL('images/icons/icon16gray.png'),
-          32: browser.runtime.getURL('images/icons/icon32gray.png'),
-          48: browser.runtime.getURL('images/icons/icon48gray.png'),
-          96: browser.runtime.getURL('images/icons/icon96gray.png'),
-          128: browser.runtime.getURL('images/icons/icon128gray.png')
-        },
-        tabId
-      };
-    
-  const iconTitle = active ? '2FAS - Two Factor Authentication' : browser.i18n.getMessage('inActiveTabInfo');
+    }
+  
+    if (type !== 0) {
+      typeFilename = `_${type}`;
+    }
+
+    iconFileName = isActive ? typeFilename : `${typeFilename}gray`;
+  }
+
+  const iconObj = {
+    path: {
+      16: browser.runtime.getURL(`images/icons/icon16${iconFileName}.png`),
+      32: browser.runtime.getURL(`images/icons/icon32${iconFileName}.png`),
+      48: browser.runtime.getURL(`images/icons/icon48${iconFileName}.png`),
+      96: browser.runtime.getURL(`images/icons/icon96${iconFileName}.png`),
+      128: browser.runtime.getURL(`images/icons/icon128${iconFileName}.png`)
+    }
+  };
+
+  if (tabID) {
+    iconObj.tabId = tabID;
+  }
+
+  return iconObj;
+};
+
+const setIcon = async (tabID, isActive = true, changeTitle = false) => {
+  const iconObj = await getIconObj(tabID, isActive);
+  const iconTitle = isActive ? '2FAS - Two Factor Authentication' : browser.i18n.getMessage('inActiveTabInfo');
 
   if (process.env.EXT_PLATFORM === 'Firefox' || process.env.EXT_PLATFORM === 'Safari') {
     browser.browserAction.setIcon(iconObj);
 
-    if (active || (!active && changeTitle)) {
-      await browser.browserAction.setTitle({ tabId, title: iconTitle });
+    if (isActive || (!isActive && changeTitle)) {
+      await browser.browserAction.setTitle({ tabId: tabID, title: iconTitle });
     }
   } else {
     browser.action.setIcon(iconObj);
 
-    if (active || (!active && changeTitle)) {
-      await browser.action.setTitle({ tabId, title: iconTitle });
+    if (isActive || (!isActive && changeTitle)) {
+      await browser.action.setTitle({ tabId: tabID, title: iconTitle });
     }
   }
 };

src/config.js

@@ -23,7 +23,7 @@ const t = require('./_locales/en/notifications.json');
 const config = {
   WebSocketTimeout: 3, // in minutes
   ResendPushTimeout: 10, // in seconds
-  ExtensionVersion: '1.7.2',
+  ExtensionVersion: '1.7.3',
 
   Texts: {
     Error: {

src/content/styles/content_script.scss

@@ -78,7 +78,16 @@
       appearance: none !important;
       background: transparent !important;
       border: 0 !important;
+      border-radius: 0 !important;
+      box-shadow: none !important;
       cursor: pointer !important;
+      line-height: 1 !important;
+      margin-bottom: 0 !important;
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+      margin-top: 0 !important;
+      min-height: 0 !important;
+      min-width: 0 !important;
       padding: 0 !important;
       position: absolute !important;
       right: 2px !important;
@@ -105,15 +114,24 @@
       width: 100% !important;
 
       button {
+        appearance: none !important;
         background: transparent !important;
         border: 0 !important;
+        border-radius: 0 !important;
         color: $theme-color !important;
         cursor: pointer !important;
+        display: inline-block !important;
         font-family: 'Montserrat', sans-serif !important;
         font-size: 12px !important;
         font-weight: 700 !important;
+        line-height: 1 !important;
+        margin-bottom: 0 !important;
         margin-right: 8px !important;
+        margin-top: 0 !important;
+        min-height: 0 !important;
+        min-width: 0 !important;
         padding: 0 !important;
+        position: static !important;
         transition: color .2s ease-in-out !important;
 
         &:last-of-type {
@@ -253,6 +271,14 @@
     }
     /* ProtonMail FIX */
 
+    button {
+      &:hover,
+      &:focus,
+      &:active {
+        outline: none !important;
+      }
+    }
+
     h3,
     p {
       font-family: 'Montserrat', sans-serif !important;

src/global-styles/_variables.scss

@@ -37,6 +37,8 @@ $input-color: #000;
 $input-color-dark: #fff;
 $button-bg: $input-bg;
 $button-bg-dark: $input-bg-dark;
+$select-option-selected: #d3d4e2;
+$select-option-selected-dark: #272931;
 
 // OPTIONS PAGE
 $op-rwd-height: 575px;

src/manifest/chrome.json

@@ -3,7 +3,7 @@
   "name": "2FAS - Two Factor Authentication",
   "short_name": "2FAS",
   "author": "Two Factor Authentication Service, Inc.",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "__MSG_appDesc__",
   "default_locale": "en",
   "icons": {

src/manifest/edge.json

@@ -3,7 +3,7 @@
   "name": "2FAS - Two Factor Authentication",
   "short_name": "2FAS",
   "author": "Two Factor Authentication Service, Inc.",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "__MSG_appDesc__",
   "default_locale": "en",
   "icons": {

src/manifest/firefox.json

@@ -3,7 +3,7 @@
   "name": "2FAS - Two Factor Authentication",
   "short_name": "2FAS",
   "author": "Two Factor Authentication Service, Inc.",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "applications": {
     "gecko": {
       "id": "admin@2fas.com",

src/manifest/opera.json

@@ -3,7 +3,7 @@
   "name": "2FAS - Two Factor Authentication",
   "short_name": "2FAS",
   "author": "Two Factor Authentication Service, Inc.",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "__MSG_appDesc__",
   "default_locale": "en",
   "icons": {

src/manifest/safari.json

@@ -3,7 +3,7 @@
   "name": "2FAS - Two Factor Authentication",
   "short_name": "2FAS",
   "author": "Two Factor Authentication Service, Inc.",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "__MSG_appDesc__",
   "default_locale": "en",
   "icons": {

src/optionsPage/functions/index.js

@@ -53,6 +53,7 @@ exports.setExtNameUpdateForm = require('./setExtNameUpdateForm');
 exports.setExtVersion = require('./setExtVersion');
 exports.setPinInfoBtns = require('./setPinInfoBtns');
 exports.setHamburger = require('./setHamburger');
+exports.setIconSelect = require('./setIconSelect');
 exports.setImportDefaultExcludedDomains = require('./setImportDefaultExcludedDomains');
 exports.setLoggingToggle = require('./setLoggingToggle');
 exports.setMenuLinks = require('./setMenuLinks');

src/optionsPage/functions/setIconSelect.js

@@ -0,0 +1,67 @@
+//
+//  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 SlimSelect = require('slim-select');
+const browser = require('webextension-polyfill');
+const { loadFromLocalStorage, saveToLocalStorage } = require('../../localStorage');
+const setIcon = require('../../background/functions/setIcon');
+
+const setIconSelect = async () => {
+  const { extIcon } = await loadFromLocalStorage(['extIcon']);
+
+  // eslint-disable-next-line no-new
+  new SlimSelect({
+    select: '#twofas-icon-select',
+    data: [
+      {
+        html: `<span><img src="${browser.runtime.getURL('images/icons/icon128.png')}" alt="Default" /><span>Default</span></span>`,
+        text: 'Default',
+        value: 0,
+        selected: extIcon === 0
+      },
+      {
+        html: `<span><img src="${browser.runtime.getURL('images/icons/icon128_1.png')}" alt="Type1" /><span>Type 1</span></span>`,
+        text: 'Type 1',
+        value: 1,
+        selected: extIcon === 1
+      },
+      {
+        html: `<span><img src="${browser.runtime.getURL('images/icons/icon128_2.png')}" alt="Type1" /><span>Type 2</span></span>`,
+        text: 'Type 2',
+        value: 2,
+        selected: extIcon === 2
+      }
+    ],
+    settings: {
+      showSearch: false,
+      closeOnSelect: true
+    },
+    events: {
+      afterChange: async item => {
+        const tabID = await browser.tabs.query({ active: true, currentWindow: true }).then(tabs => tabs[0].id);
+
+        await saveToLocalStorage({ extIcon: parseInt(item[0].value, 10) });
+        await setIcon(null, false, false);
+        await setIcon(tabID, false, false);
+      }
+    }
+  });
+};
+
+module.exports = setIconSelect;

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, setContextMenuToggle, setPushRadio, setPinInfo, setExtName, setExtNameUpdateForm, setModalsListeners, setAdvanced, setMenuLinks, setPinInfoBtns, setShortcutBox, setHamburger, setExtVersion, generateShortcutBox, generateShortcutLink, showIntegrityError, generateDomainsList, setImportDefaultExcludedDomains, setAutoSubmitSwitch } = require('./functions');
+const { generateDevicesList, setLoggingToggle, setContextMenuToggle, setPushRadio, setPinInfo, setExtName, setExtNameUpdateForm, setModalsListeners, setAdvanced, setMenuLinks, setPinInfoBtns, setShortcutBox, setHamburger, setExtVersion, generateShortcutBox, generateShortcutLink, showIntegrityError, generateDomainsList, setImportDefaultExcludedDomains, setAutoSubmitSwitch, setIconSelect } = require('./functions');
 
 const init = async storage => {
   i18n();
@@ -67,6 +67,7 @@ const init = async storage => {
     .then(setPushRadio)
     .then(setHamburger)
     .then(handleTargetBlank)
+    .then(setIconSelect)
     .then(() => browser.runtime.onMessage.addListener(extPageOnMessage))
     .then(() => hidePreloader());
 };

src/optionsPage/optionsPage.scss

@@ -18,6 +18,7 @@
 //
 
 @import "../global-styles/variables", "../global-styles/global", "../global-styles/input", "../global-styles/buttons", "../global-styles/shortcut", "styles/modal";
+@import url('/node_modules/slim-select/dist/slimselect.css');
 
 .twofas-options-page {
   background-color: $bg;
@@ -39,3 +40,103 @@
 
   @import "styles/menu", "styles/content", "styles/pinInfo", "styles/pushConfig", "styles/socialIcons", "styles/integrityError";
 }
+
+.ss-main {
+  background-color: $input-bg;
+  border: 0;
+  border-radius: 10px;
+  height: 51px;
+  padding: 0 17px;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $input-bg-dark;
+    color: $input-color-dark;
+  }
+
+  @media all and (max-width: 660px) {
+    padding: 0 10px;
+  }
+
+  &:active,
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+.ss-content .ss-list .ss-option,
+.ss-main .ss-single {
+  > span {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: 0 12px;
+
+    > img {
+      height: 24px;
+      width: auto;
+    }
+
+    > span {
+      color: $input-color;
+      font-size: 16px;
+      font-weight: 400;
+
+      @media (prefers-color-scheme: dark) {
+        color: $input-color-dark;
+      }
+    }
+  }
+}
+
+.ss-content {
+  background-color: $color-2;
+  border: 0;
+  border-radius: 10px;
+  box-shadow: rgba($color-header-line-dark, .2) 0 2px 8px 0;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $dark-color;
+    box-shadow: rgba($color, .2) 0 2px 8px 0;
+  }
+
+  &.ss-open-below,
+  &.ss-open-above {
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+
+  .ss-list {
+    border-radius: 10px;
+
+    .ss-option {
+      gap: 0 6px;
+      padding: 6px 12px;
+      transition: background-color .3s ease-in-out, color .3s ease-in-out;
+
+      &:not(.ss-disabled) {
+        &.ss-selected {
+          background-color: $select-option-selected;
+          color: $color-header;
+
+          @media (prefers-color-scheme: dark) {
+            background-color: $select-option-selected-dark;
+            color: $color-2;
+          }
+        }
+      }
+
+      &:hover {
+        background-color: rgba($theme-color, .8);
+        color: $color-2;
+      }
+
+      > span {
+        > span {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}

src/optionsPage/styles/_content.scss

@@ -614,6 +614,22 @@
     }
   }
 
+  &-icon {
+    margin-top: 20px;
+    max-width: 305px;
+
+    &-box {
+      margin-bottom: 10px;
+    }
+
+    p {
+      color: $desc-color;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 18px;
+    }
+  }
+
   &-advanced {
     margin-bottom: 20px;
     margin-top: 40px;

src/optionsPage/styles/_menu.scss

@@ -18,7 +18,7 @@
 //
 
 @use "sass:color";
-@import "src/global-styles/variables";
+@import "../../global-styles/variables";
 
 &-menu {
   // VARIABLES

src/optionsPage/styles/_modal.scss

@@ -18,7 +18,7 @@
 //
 
 @use "sass:color";
-@import "src/global-styles/variables";
+@import "../../global-styles/variables";
 
 .twofas-confirm-modal,
 .twofas-domain-modal {

src/optionsPage/styles/_pushConfig.scss

@@ -18,7 +18,7 @@
 //
 
 @use "sass:color";
-@import "src/global-styles/variables";
+@import "../../global-styles/variables";
 
 &-push-config {
   margin-top: 17px;

src/partials/handleTargetBlank.js

@@ -31,15 +31,13 @@ const handleTargetBlank = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      const url = this.href;
-      const port = browser.runtime.connect({ name: '2FAS' });
+      const url = this?.href;
 
-      port.postMessage({
-        action: 'openBrowserPage',
-        url
-      });
+      if (typeof window === 'undefined' || !url || url.length <= 0) {
+        return;
+      }
 
-      port.disconnect();
+      return browser.tabs.create({ url });
     });
   });
 };

src/views/optionsViews/firefox.html

@@ -42,6 +42,14 @@
   <p data-i18n="shortcutUseDesc" class="js-twofas-shortcut-description">Use this shortcut to open the 2FAS Browser Extension on any page.</p>
 </div>
 
+<div class="twofas-options-page-content-icon">
+  <h2><span data-i18n="icon">Icon</span>:</h2>
+  <div class="twofas-options-page-content-icon-box">
+    <select name="twofas-icon-select" id="twofas-icon-select"></select>
+  </div>
+  <p data-i18n="optionsIconDesc">Choose an icon for the 2FAS Browser Extension to personalize its appearance in your browser.</p>
+</div>
+
 <div class="twofas-options-page-content-advanced">
   <div class="twofas-options-page-content-advanced-header">
     <h2 class="js-twofas-advance-header">

src/views/optionsViews/normal.html

@@ -28,6 +28,14 @@
   <p data-i18n="shortcutUseDesc" class="js-twofas-shortcut-description">Use this shortcut to open the 2FAS Browser Extension on any page.</p>
 </div>
 
+<div class="twofas-options-page-content-icon">
+  <h2><span data-i18n="icon">Icon</span>:</h2>
+  <div class="twofas-options-page-content-icon-box">
+    <select name="twofas-icon-select" id="twofas-icon-select"></select>
+  </div>
+  <p data-i18n="optionsIconDesc">Choose an icon for the 2FAS Browser Extension to personalize its appearance in your browser.</p>
+</div>
+
 <div class="twofas-options-page-content-advanced">
   <div class="twofas-options-page-content-advanced-header">
     <h2 class="js-twofas-advance-header">

webpack/utils/export/messages.json

@@ -19,6 +19,8 @@
   "add": "Add",
   "cancel": "Cancel",
   "shortcut": "Shortcut",
+  "icon": "Icon",
+  "options": "Options",
   "neverShowAgain": "Never show again",
   "isNotSupportedByExt": "is not supported by 2FAS Extension",
   "shortcutSetDesc": "Set a shortcut to open the 2FAS Browser Extension on any page.",
@@ -184,6 +186,7 @@
   "optionsDomainTooLong": "Domain is too long",
   "optionsDomainIncorrect": "Domain is not correct",
   "optionsDomainExists": "Domain exists on excluded list",
+  "optionsIconDesc": "Choose an icon for the 2FAS Browser Extension to personalize its appearance in your browser.",
   "tokenHeader": "Your token",
   "tokenCopy": "Copy",
   "tokenCopied": "Copied",