fix: handle undefined chrome handling in api initialization

jsconfig.json

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

public/manifest.json

@@ -1,14 +1,16 @@
 {
   "manifest_version": 3,
   "name": "US 2FA Autofill",
-  "version": "4.0",
+  "version": "4.1",
   "description": "Rellena automáticamente el código 2FA en la Universidad de Sevilla.",
   "permissions": [
-    "activeTab",
-    "scripting",
-    "tabs",
     "storage"
   ],
+  "background": {
+    "service_worker": "scripts/background.js",
+    "type": "module",
+    "scripts": ["scripts/background.js"]
+  },
   "action": {
     "default_popup": "index.html"
   },
@@ -17,12 +19,8 @@
   },
   "content_scripts": [
     {
-      "matches": [
-        "https://sso.us.es/*"
-      ],
-      "js": [
-        "scripts/content.js"
-      ],
+      "matches": ["*://sso.us.es/*"],
+      "js": ["scripts/content.js"],
       "run_at": "document_idle"
     }
   ],

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 : (typeof chrome !== "undefined" ? chrome : null);
+
 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,17 @@ 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.");
+                    console.debug("DevEnv");
                 }
 
             } catch (err) {
@@ -68,22 +76,29 @@ const App = () => {
     const handleSaveSecret = (e) => {
         if (e.key === 'Enter') {
             const val = e.target.value.trim();
-            localStorage.setItem('shasecret', val);
-            setSecret(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/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;
+  }
+});

src/content.js

@@ -1,25 +1,66 @@
-// eslint-disable-next-line no-undef
-const api = typeof browser !== "undefined" ? browser : chrome;
+(async function() {
+  // 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');
+  const fillAndSubmit = (code) => {
+    const input = document.getElementById("input2factor");
+    const button = document.getElementById("notification_2factor_button_ok");
 
-    if (input) {
-      input.focus();
-      input.value = request.code;
-      
-      input.dispatchEvent(new Event('input', { bubbles: true }));
-      input.dispatchEvent(new Event('change', { bubbles: true }));
+    const errorMsg = document.querySelector(".ui-state-error");
+    const isErrorVisible = errorMsg && errorMsg.style.display !== "none";
 
-      if (button) {
-        setTimeout(() => {
-          button.click();
-        }, 150);
-      }
-      sendResponse({ status: "bomba" });
+    if (!input || input.value.length > 0 || isErrorVisible) {
+      return;
     }
-  }
-  return true;
-});
+
+    console.log("Autofill");
+    
+    input.focus();
+    input.value = code;
+    ['input', 'change', 'keyup', 'keydown'].forEach(evt => {
+      input.dispatchEvent(new Event(evt, { bubbles: true }));
+    });
+
+    setTimeout(() => {
+      if (button) {
+        console.log("Clicking 'Aceptar'");
+        const clickEvent = new MouseEvent('click', {
+          view: window,
+          bubbles: true,
+          cancelable: true
+        });
+        button.dispatchEvent(clickEvent);
+      }
+    }, 400);
+  };
+
+  const tryAutofill = async () => {
+    const data = await api.storage.local.get(['shasecret']);
+    if (data.shasecret) {
+      api.runtime.sendMessage({ action: "GENERATE_TOKEN" }, response => {
+        if (response?.token) {
+          fillAndSubmit(response.token);
+        }
+      });
+    }
+  };
+
+  const observer = new MutationObserver(() => {
+    if (document.getElementById("input2factor")) {
+      tryAutofill();
+    }
+  });
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true
+  });
+
+  api.runtime.onMessage.addListener((request) => {
+    if (request.action === "autofill") {
+      fillAndSubmit(request.code);
+    }
+  });
+
+  tryAutofill();
+})();

vite.config.js

@@ -6,28 +6,26 @@ export default defineConfig({
   plugins: [react()],
   build: {
     rollupOptions: {
-      input: [
-        resolve(__dirname, 'index.html'),
-        resolve(__dirname, 'src/content.js')
-      ],
+      input: {
+        main: resolve(__dirname, 'index.html'),
+        content: resolve(__dirname, 'src/content.js'),
+        background: resolve(__dirname, 'src/background.js'),
+      },
       output: {
+        format: 'es',
         entryFileNames: (chunkInfo) => {
-          if (chunkInfo.name === 'content') {
-            return 'scripts/content.js';
+          if (chunkInfo.name === 'content' || chunkInfo.name === 'background') {
+            return 'scripts/[name].js';
           }
           return 'assets/[name]-[hash].js';
         },
+        manualChunks: undefined,
       },
     },
   },
-  server: {
-    port: 3000,
-  },
   resolve: {
     alias: {
-      '@/': '/src/',
+      '@': resolve(__dirname, './src'),
     },
   },
-  publicDir: 'public',
-});
-
+});