fix(issue-3): popup not opening after browser restart (#4)

* fix(issue-3): popup not opening after browser restart

* fix(issue-3): update to node v.18

.github/workflows/build.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 15.x]
+        node-version: [18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

.gitignore

@@ -8,3 +8,4 @@ dist.zip
 NO+otp.crx
 plugin
 web-ext-artifacts
+plugin.zip

README.md

@@ -21,7 +21,6 @@ This is a Chrome Extension app written in React.
 * src/typescript: TypeScript source files
 * src/assets: static files
 * plugin: Browser Extension directory
-* dist/js: Generated JavaScript files
 
 ## Install the Plugin
 

package.json

@@ -1,12 +1,12 @@
 {
   "name": "no-otp",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Add to the input your OTP",
   "main": "index.js",
   "scripts": {
     "watch": "webpack --config webpack/webpack.dev.js --watch",
     "build": "webpack --config webpack/webpack.prod.js && web-ext build -o --source-dir=./plugin",
-    "clean": "rimraf dist",
+    "clean": "rimraf plugin",
     "test": "npx jest --passWithNoTests",
     "style": "prettier --write \"src/**/*.{ts,tsx}\""
   },
@@ -20,7 +20,7 @@
     "jssha": "^3.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-qr-reader": "^2.2.1",
+    "react-qr-reader": "3.0.0-beta-1",
     "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
@@ -32,15 +32,15 @@
     "@types/webextension-polyfill": "^0.9.1",
     "copy-webpack-plugin": "^6.1.0",
     "glob": "^7.1.6",
-    "jest": "^26.6.3",
+    "jest": "29.7.0",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2 ",
-    "ts-jest": "^25.2.1 ",
+    "ts-jest": "29.1.1",
     "ts-loader": "^6.2.1",
-    "typescript": "~3.8.3 ",
-    "webpack": "^4.44.1",
-    "webpack-cli": "~3.3.11",
-    "webpack-merge": "~4.2.2",
+    "typescript": "5.2.2",
+    "webpack": "5.74.0",
+    "webpack-cli": "4.9.1",
+    "webpack-merge": "5.9.0",
     "web-ext": "^7.4.0"
   }
 }

public/manifest.json

@@ -2,7 +2,7 @@
 	"manifest_version": 2,
 	"name": "NO+OTP",
 	"description": "Add to the input your password + OTP",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"options_ui": {
 		"page": "options.html",
 		"browser_style": true

src/index.ts

@@ -10,6 +10,17 @@ import { fillInput } from './utils/fill-input';
 	});
 	*/
 
+browser.storage.sync.get(['popUp'])
+	.then(
+		(key: { popUp: boolean }) => {
+			if (key.popUp) {
+				chrome.browserAction.setPopup({ popup: '../popup.html' });
+			} else {
+				chrome.browserAction.setPopup({ popup: '' });
+			}
+		},
+	);
+
 browser.browserAction.onClicked.addListener(() => {
 	let clipboard: boolean;
 	let password: string;
@@ -37,7 +48,7 @@ browser.browserAction.onClicked.addListener(() => {
 		});
 });
 
-browser.runtime.onMessage.addListener(function (request, sender) {
+browser.runtime.onMessage.addListener(function(request, sender) {
 	if (request.setting == 'popup') {
 		browser.browserAction.setPopup({ popup: '../popup.html' });
 	}
@@ -46,3 +57,24 @@ browser.runtime.onMessage.addListener(function (request, sender) {
 		browser.browserAction.setPopup({ popup: '' });
 	}
 });
+
+browser.runtime.onMessage.addListener((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/options.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import QrReader from 'react-qr-reader';
+import { QrReader } from 'react-qr-reader';
 
 const Options = () => {
 	const toptRegex =
@@ -10,9 +10,10 @@ const Options = () => {
 	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 [status, setStatus] = useState<string>('');
-	const [displayQr, setDisplayQr] = useState<boolean>(undefined);
+	const [displayQr, setDisplayQr] = useState<boolean>(false);
 
 	const [secretShow, setSecretShow] = useState<boolean>(false);
 	const [passShow, setPassShow] = useState<boolean>(false);
@@ -25,25 +26,28 @@ const Options = () => {
 					setSecret(key.secret ? key.secret : '');
 					setClipboard(key.clipboard);
 					setPopUp(key.popUp);
+					setFillInput(!key.clipboard && !key.popUp);
 				}
-			});
+			}
+		);
 
+		setFillInput(!popUp && !clipboard);
 	});
 
 	const saveOptions = () => {
 		// Saves options to browser.storage.sync.
 		browser.storage.sync.set({ pass, secret, clipboard, popUp })
 			.then(() => {
-				let timeoutId;
-				let message;
+				let timeoutId: NodeJS.Timeout;
+				let message: { setting: string; };
 
 				if (popUp) {
 					message = { setting: 'popup' };
 				} else {
 					message = { setting: 'click' };
 				}
 
-				browser.runtime.sendMessage(message, () => {
+				browser.runtime.sendMessage(message).then(() => {
 					setStatus('Options saved.');
 					timeoutId = setTimeout(() => {
 						setStatus(undefined);
@@ -53,16 +57,43 @@ const Options = () => {
 			});
 	};
 
-	const handleScan = (data: string) => {
-		const re = data?.match(toptRegex);
-		if (re) {
-			setSecret(re[3]);
-			setDisplayQr(false);
+	const handleQrResult = (result: { getText: () => string; }, error: Error) => {
+		if (result) {
+			const data = result.getText();
+			const re = data?.match(toptRegex);
+			if (re) {
+				setSecret(re[3]);
+				setDisplayQr(false);
+			}
 		}
-	};
-	const handleError = (err) => {
-		console.error(err);
-	};
+		if (error) {
+			// console.error(err);
+		}
+	}
+
+	const handleSetPopUp = (value: boolean) => {
+		if (value) {
+			setClipboard(false);
+			setFillInput(false);
+		}
+		setPopUp(value);
+	}
+
+	const handleSetClipboard = (value: boolean) => {
+		if (value) {
+			setPopUp(false);
+			setFillInput(false);
+		}
+		setClipboard(true);
+	}
+
+	const handleSetFillInput = (value: boolean) => {
+		if (value) {
+			setPopUp(false);
+			setClipboard(false);
+		}
+		setFillInput(true);
+	}
 
 	const displayQrReader = () => {
 		if (displayQr) {
@@ -71,7 +102,7 @@ const Options = () => {
 					<button className="button is-warning is-fullwidth" onClick={() => setDisplayQr(false)}>
 						Cerrar lector
 					</button>
-					<QrReader delay={300} onError={handleError} onScan={handleScan} />
+					<QrReader onResult={handleQrResult}  constraints={{ autoGainControl: false }}/>
 				</div>
 			);
 		}
@@ -178,7 +209,23 @@ const Options = () => {
 											<label className="checkbox">
 												<input
 													type="checkbox"
-													onChange={(event) => setClipboard(event.target.checked)}
+													onChange={(event) => handleSetFillInput(event.target.checked)}
+													checked={fillInput}
+												/>{' '}
+												Rellenar input automáticamente
+											</label>
+										</div>
+										<p className="help">
+											Si seleccionas esta opción, la OTP (más la contraseña si la proporcionas) intentará rellenar el input de la contraseña automáticamente. Si ves que no funciona correctamente, selecciona una de las opciones de abajo en su lugar.
+										</p>
+									</div>
+
+									<div className="field is-centered">
+										<div className="control">
+											<label className="checkbox">
+												<input
+													type="checkbox"
+													onChange={(event) => handleSetClipboard(event.target.checked)}
 													checked={clipboard}
 												/>{' '}
 												Guardar en el portapapeles
@@ -195,7 +242,7 @@ const Options = () => {
 									<div className="field is-centered">
 										<div className="control">
 											<label className="checkbox">
-												<input type="checkbox" onChange={(event) => setPopUp(event.target.checked)} checked={popUp} />{' '}
+												<input type="checkbox" onChange={(event) => handleSetPopUp(event.target.checked)} checked={popUp} />{' '}
 												Muestra un popup al clicar la extensión
 											</label>
 										</div>
@@ -246,7 +293,7 @@ const Options = () => {
 					</p>
 					<div className="tags has-addons level-item">
 						<span className="tag is-rounded is-info">last update</span>
-						<span className="tag is-rounded">January, 2023</span>
+						<span className="tag is-rounded">Sept, 2023</span>
 					</div>
 				</div>
 			</footer>

webpack/webpack.common.js

@@ -8,7 +8,6 @@ module.exports = {
 		popup: path.join(srcDir, 'popup.tsx'),
 		options: path.join(srcDir, 'options.tsx'),
 		index: path.join(srcDir, 'index.ts'),
-		content_script: path.join(srcDir, 'content_script.tsx'),
 	},
 	output: {
 		path: path.join(__dirname, '../plugin/js'),

webpack/webpack.dev.js

@@ -1,7 +1,7 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
     devtool: 'inline-source-map',
     mode: 'development'
-});
+});

webpack/webpack.prod.js

@@ -1,6 +1,6 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
     mode: 'production'
-});
+});