add: background.js for automatic code input

jsconfig.json

@@ -5,5 +5,5 @@
         "@/*": ["src/*"]
       }
     },
-    "include": ["src"]
+    "include": ["src", "public/scripts/background.js", "public/scripts/content.js"]
   }

public/manifest.json

@@ -9,6 +9,11 @@
     "tabs",
     "storage"
   ],
+  "background": {
+    "service_worker": "background.js",
+    "type": "module",
+    "scripts": ["background.js"]
+  },
   "action": {
     "default_popup": "index.html"
   },
@@ -17,13 +22,9 @@
   },
   "content_scripts": [
     {
-      "matches": [
-        "https://sso.us.es/*"
-      ],
-      "js": [
-        "scripts/content.js"
-      ],
-      "run_at": "document_idle"
+      "matches": ["https://sso.us.es/*"],
+      "js": ["scripts/content.js"],
+      "run_at": "document_start"
     }
   ],
   "host_permissions": [

public/scripts/background.js

@@ -0,0 +1,23 @@
+import * as OTPAuth from 'otpauth';
+
+// eslint-disable-next-line no-undef
+const api = typeof browser !== "undefined" ? browser : chrome;
+
+api.runtime.onMessage.addListener((request, _sender, sendResponse) => {
+  if (request.action === "GENERATE_TOKEN") {
+    api.storage.local.get(['shasecret'], (data) => {
+      if (data.shasecret) {
+        const totp = new OTPAuth.TOTP({
+          issuer: 'US',
+          label: '2FA',
+          algorithm: 'SHA1',
+          digits: 6,
+          period: 30,
+          secret: OTPAuth.Secret.fromBase32(data.shasecret.trim().toUpperCase()),
+        });
+        sendResponse({ token: totp.generate() });
+      }
+    });
+    return true;
+  }
+});

public/scripts/content.js

@@ -0,0 +1,39 @@
+(async function() {
+  // eslint-disable-next-line no-undef
+  const api = typeof browser !== "undefined" ? browser : chrome;
+
+  const fillCode = (code) => {
+    const input = document.getElementById("input2factor");
+    const button = document.getElementById('btn-login') || document.querySelector("#notification_2factor_button_ok");
+    const error = document.querySelector("#otp_authn_wrong_code")?.offsetHeight > 0;
+
+    if (!input || error) return;
+
+    input.value = code;
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    
+    setTimeout(() => {
+      if (button) button.click();
+    }, 200);
+    console.log("Autofill");
+  };
+
+  api.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    if (request.action === "autofill") {
+      fillCode(request.code);
+      sendResponse({ status: "ok" });
+    }
+  });
+
+  const data = await api.storage.local.get(['shasecret']);
+  if (data.shasecret) {
+    const input = document.getElementById("input2factor");
+    if (input && input.value.length === 0) {
+      api.runtime.sendMessage({ action: "GENERATE_TOKEN" }, response => {
+        if (response?.token) {
+          fillCode(response.token);
+        }
+      });
+    }
+  }
+})();

src/App.jsx

@@ -4,11 +4,24 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { ThemeToggle } from "./components/ThemeToggle";
 
+// eslint-disable-next-line no-undef
+const api = typeof browser !== "undefined" ? browser : chrome;
+
 const App = () => {
-    const [secret, setSecret] = useState(localStorage.getItem('shasecret') || '');
+    const [secret, setSecret] = useState('');
     const [token, setToken] = useState('000000');
     const [remaining, setRemaining] = useState(30);
 
+    useEffect(() => {
+        if (api?.storage?.local) {
+            api.storage.local.get(['shasecret'], (result) => {
+                if (result.shasecret) {
+                    setSecret(result.shasecret);
+                }
+            });
+        }
+    }, []);
+
     useEffect(() => {
         if (!secret) return;
 
@@ -26,22 +39,15 @@ const App = () => {
                 const newToken = totp.generate()
                 setToken(newToken);
 
-                // eslint-disable-next-line no-undef
-                const api = typeof browser !== "undefined" ? browser : chrome;
-
-                if (api && api.tabs && api.tabs.query) {
+                if (api?.tabs?.query) {
                     api.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-                        if (tabs[0]?.id && tabs[0].url?.includes("sso.us.es")) {
+                        if (tabs[0]?.url?.includes("sso.us.es")) {
                             api.tabs.sendMessage(tabs[0].id, {
                                 action: "autofill",
                                 code: newToken
-                            }).catch(() => {
-                                console.log("Esperando inyección...");
-                            });
+                            }).catch(() => {});
                         }
                     });
-                } else {
-                    console.log("Entorno de desarrollo: Autofill desactivado.");
                 }
 
             } catch (err) {
@@ -68,22 +74,29 @@ const App = () => {
     const handleSaveSecret = (e) => {
         if (e.key === 'Enter') {
             const val = e.target.value.trim();
-            localStorage.setItem('shasecret', val);
+            if (api?.storage?.local) {
+                api.storage.local.set({ 'shasecret': val }, () => {
                     setSecret(val);
+                    console.log("Secret stored");
+                });
+            }
             e.target.value = '';
         }
     };
 
+    const resetSecret = () => {
+        if (api?.storage?.local) {
+            api.storage.local.remove(['shasecret'], () => {
+                setSecret('');
+                setToken('000000');
+            });
+        }
+    };
+
     const copyToClipboard = () => {
         navigator.clipboard.writeText(token);
     };
 
-    const resetSecret = () => {
-        localStorage.removeItem('shasecret');
-        setSecret('');
-        setToken('000000');
-    };
-
     return (
         <div className="container-app">
             <div className="top-actions">

src/content.js

@@ -1,25 +0,0 @@
-// eslint-disable-next-line no-undef
-const api = typeof browser !== "undefined" ? browser : chrome;
-
-api.runtime.onMessage.addListener((request, sender, sendResponse) => {
-  if (request.action === "autofill") {
-    const input = document.getElementById('input2factor');
-    const button = document.getElementById('btn-login');
-
-    if (input) {
-      input.focus();
-      input.value = request.code;
-      
-      input.dispatchEvent(new Event('input', { bubbles: true }));
-      input.dispatchEvent(new Event('change', { bubbles: true }));
-
-      if (button) {
-        setTimeout(() => {
-          button.click();
-        }, 150);
-      }
-      sendResponse({ status: "bomba" });
-    }
-  }
-  return true;
-});

vite.config.js

@@ -8,13 +8,9 @@ export default defineConfig({
     rollupOptions: {
       input: [
         resolve(__dirname, 'index.html'),
-        resolve(__dirname, 'src/content.js')
       ],
       output: {
         entryFileNames: (chunkInfo) => {
-          if (chunkInfo.name === 'content') {
-            return 'scripts/content.js';
-          }
           return 'assets/[name]-[hash].js';
         },
       },