chore(): general clean-up, typings and update dependencies

package.json

@@ -26,12 +26,12 @@
     "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.140",
+    "@types/chrome": "^0.0.246",
     "@types/jest": "^25.1.4",
     "@types/jquery": "^3.3.33",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@types/webextension-polyfill": "^0.9.1",
+    "@types/webextension-polyfill": "^0.10.4",
     "copy-webpack-plugin": "^6.1.0",
     "css-loader": "^6.8.1",
     "glob": "^7.1.6",
@@ -43,7 +43,7 @@
     "ts-loader": "^6.2.1",
     "typescript": "5.2.2",
     "web-ext": "^7.4.0",
-    "webpack": "5.74.0",
+    "webpack": "5.76.0",
     "webpack-cli": "4.9.1",
     "webpack-merge": "5.9.0"
   }

public/manifest.json

@@ -5,7 +5,7 @@
 	"version": "3.0",
 	"options_ui": {
 		"page": "options.html",
-		"browser_style": true,
+    "browser_style": false,
     "open_in_tab": true
 	},
 	"browser_specific_settings": {

src/api/runtime.ts

@@ -35,7 +35,6 @@ function getBackgroundPage(callback: (backgroundPage: any) => void): void {
  * Open the options page of the extension, if defined in the manifest.
  */
 function openOptionsPage(): void {
-	console.log('here')
 	if (typeof browser !== 'undefined' && browser.runtime) {
 		// Firefox WebExtensions API
 		browser.runtime.openOptionsPage();

src/index.ts

@@ -2,77 +2,60 @@ import TOTP from './lib/TOTP';
 import { copyToClipboard } from './utils/copy-to-clipboard';
 import { fillInput } from './utils/fill-input';
 import { api } from './api';
+import { StorageItems } from './interfaces/storage-items.interface';
+import { RuntimeMessage, RuntimeMessageId } from './interfaces/runtime-message.interface';
 
 // Uncomment this block to reset the secret for debugging purposes
 /*api.storage.setStorageItems({
 	pass: null,
 	secret: null,
 });*/
 
-api.storage.getStorageItems(['popUp'], (key: { popUp: boolean }) => {
-	if (key.popUp) {
+api.storage.getStorageItems(['popUp'], ({ popUp }: StorageItems) => {
+	if (popUp) {
 		api.browserAction.setBrowserActionPopup('../popup.html');
 	} else {
 		api.browserAction.setBrowserActionPopup('');
 	}
 });
 
 api.browserAction.onClicked(() => {
-	let clipboard: boolean;
-	let password: string;
 	let totp: TOTP;
 
 	api.storage.getStorageItems(
 		['secret', 'pass', 'clipboard'],
-		(key: { secret: string; pass: string; clipboard: boolean }) => {
-			if (!key.secret) {
+		({ secret, pass, clipboard }: StorageItems) => {
+			if (!secret) {
 				api.runtime.openOptionsPage();
+				return;
 			}
 
-			clipboard = key.clipboard;
-
-			password = key.pass ? key.pass : '';
-
 			if (!totp) {
-				totp = new TOTP(key.secret);
+				totp = new TOTP(secret);
 			}
 
+			const passWithOtp = (pass ?? '') + totp?.getOTP();
+
 			if (clipboard) {
-				return copyToClipboard(password + totp?.getOTP());
+				copyToClipboard(passWithOtp);
+				return;
 			}
 
-			fillInput(password, totp?.getOTP());
+			fillInput(passWithOtp);
 		}
 	);
 });
 
-api.runtime.onMessage(function (request, sender) {
-	if (request.setting == 'popup') {
-		api.browserAction.setBrowserActionPopup('../popup.html');
-	}
+api.runtime.onMessage(function(request: RuntimeMessage, sender) {
+	if (request.id === RuntimeMessageId.ModeSetting) {
+		if (request.payload.setting == 'popup') {
+			api.browserAction.setBrowserActionPopup('../popup.html');
+		}
 
-	if (request.setting == 'click') {
-		api.browserAction.setBrowserActionPopup('');
+		if (request.payload.setting == 'click') {
+			api.browserAction.setBrowserActionPopup('');
+		}
 	}
-});
-
-api.runtime.onMessage((msg, sender) => {
-	return new Promise((resolve) => {
-		if (msg.user) {
-			const input: HTMLInputElement = document.querySelectorAll("input[type='password']")[0] as HTMLInputElement;
-
-			if (!input) {
-				alert('No he encontrado donde poner la contraseña ☹️');
-				resolve('No input element found');
-			} else {
-				input.value = msg.user.password + msg.user.otp;
-				const form = input.closest('form');
-				form.submit();
 
-				resolve(input?.value);
-			}
-		} else {
-			resolve(null);
-		}
-	});
 });
+

src/interfaces/runtime-message.interface.ts

@@ -0,0 +1,12 @@
+export interface MessageModeSetting {
+	setting: 'popup' | 'click';
+}
+
+export enum RuntimeMessageId {
+	ModeSetting = 'MODE_SETTING',
+}
+
+export interface RuntimeMessage {
+	id: RuntimeMessageId,
+	payload: MessageModeSetting
+}

src/interfaces/storage-items.interface.ts

@@ -0,0 +1,7 @@
+export interface StorageItems {
+	pass: string | undefined;
+	secret: string;
+	clipboard: boolean;
+	popUp: boolean;
+	fillInput: boolean;
+}

src/options.tsx

@@ -4,16 +4,18 @@ import { QrReader } from 'react-qr-reader';
 import { api } from './api';
 import { useTranslation } from 'react-i18next';
 import './i18n/i18n';
+import { StorageItems } from './interfaces/storage-items.interface';
+import { RuntimeMessage, RuntimeMessageId } from './interfaces/runtime-message.interface';
 
 const Options = () => {
 	const toptRegex =
 		'otpauth:\\/\\/([ht]otp)\\/(?:[a-zA-Z0-9%]+:)?([^\\?]+)\\?secret=([0-9A-Za-z]+)(?:.*(?:<?counter=)([0-9]+))?';
 
-	const [pass, setPass] = useState<string>('');
-	const [secret, setSecret] = useState<string>('');
-	const [clipboard, setClipboard] = useState<boolean>(false);
-	const [popUp, setPopUp] = useState<boolean>(false);
-	const [fillInput, setFillInput] = useState<boolean>(!popUp && !clipboard);
+	const [pass, setPass] = useState<StorageItems['pass']>('');
+	const [secret, setSecret] = useState<StorageItems['secret']>('');
+	const [clipboard, setClipboard] = useState<StorageItems['clipboard']>(false);
+	const [popUp, setPopUp] = useState<StorageItems['popUp']>(false);
+	const [fillInput, setFillInput] = useState<StorageItems['fillInput']>(!popUp && !clipboard);
 
 	const [status, setStatus] = useState<string>('');
 	const [displayQr, setDisplayQr] = useState<boolean>(false);
@@ -26,7 +28,7 @@ const Options = () => {
 	useEffect(() => {
 		api.storage.getStorageItems(
 			['secret', 'pass', 'clipboard', 'popUp'],
-			(key: { secret: string; pass: string; clipboard: boolean; popUp: boolean }) => {
+			(key: StorageItems) => {
 				if (!secret) {
 					setPass(key.pass ? key.pass : '');
 					setSecret(key.secret ? key.secret : '');
@@ -45,14 +47,15 @@ const Options = () => {
 	}, [clipboard, popUp]);
 
 	const saveOptions = () => {
-		api.storage.setStorageItems({ pass, secret, clipboard, popUp }, () => {
+		const options: StorageItems = { pass, secret, clipboard, popUp, fillInput };
+		api.storage.setStorageItems(options, () => {
 			let timeoutId: NodeJS.Timeout;
-			let message: { setting: string };
+			let message: RuntimeMessage;
 
 			if (popUp) {
-				message = { setting: 'popup' };
+				message = { id: RuntimeMessageId.ModeSetting, payload: { setting: 'popup' } };
 			} else {
-				message = { setting: 'click' };
+				message = { id: RuntimeMessageId.ModeSetting, payload: { setting: 'click' } };
 			}
 
 			api.runtime.sendMessage(message, () => {

src/popup.tsx

@@ -7,6 +7,7 @@ import { api } from './api';
 import './i18n/i18n';
 import './popup.css';
 import { useTranslation } from 'react-i18next';
+import { StorageItems } from './interfaces/storage-items.interface';
 
 const Popup = () => {
 	const [theme, setTheme] = useState<'light' | 'dark'>('dark');
@@ -41,12 +42,13 @@ const Popup = () => {
 
 	const fillOtp = () => {
 		setOtp(totp.otp);
-
-		fillInput(password, totp?.getOTP());
+		const passWithOtp = (password ?? '') + totp?.getOTP();
+		fillInput(passWithOtp);
 	};
 
 	const copyOtpToClipboard = () => {
-		copyToClipboard(password + totp.otp);
+		const passWithOtp = (password ?? '') + totp?.getOTP();
+		copyToClipboard(passWithOtp);
 	};
 
 	const goToOptions = () => {
@@ -55,7 +57,7 @@ const Popup = () => {
 
 	api.storage.getStorageItems(
 		['secret', 'pass', 'clipboard'],
-		(key: { secret: string; pass: string; clipboard: boolean }) => {
+		(key: StorageItems) => {
 			if (!key.secret) {
 				return goToOptions();
 			}

src/utils/copy-to-clipboard.ts

@@ -1,3 +1,11 @@
 export const copyToClipboard = (str: string) => {
-	navigator.clipboard.writeText(str);
+	const el = document.createElement('input');
+	el.value = str;
+	el.setAttribute('readonly', '');
+	el.style.display = 'absolute';
+	el.style.left = '-9999px';
+	document.body.appendChild(el);
+	el.select();
+	document.execCommand('copy');
+	document.body.removeChild(el);
 };

src/utils/fill-input.ts

@@ -1,12 +1,13 @@
 import { api } from '../api';
 
-export const fillInput = async (password: string, otp: number) => {
+export const fillInput = async (text: string) => {
+	console.log(text);
 	await api.tabs.executeScript({
 		code: `
 				if (!document.querySelectorAll("input[type='password']")[0]) {
 				alert('No he encontrado donde poner la contraseña ☹️');
 				} else {
-						document.querySelectorAll("input[type='password']")[0].value = '${password + otp}';
+						document.querySelectorAll("input[type='password']")[0].value = '${text}';
 						document.querySelectorAll("input[type='password']")[0].closest('form').submit();
 				}`,
 	});