fix: handle undefined chrome handling in api initialization

bump: update version to 4.1 in manifest.json
fix: background.js, remove: unnecessary permissions
2026-03-18 13:57:29 +01:00 · 2026-03-18 13:48:17 +01:00 · 2026-03-18 13:46:03 +01:00 · 2026-03-18 12:33:21 +01:00 · 2026-03-15 17:27:16 +01:00
26 changed files with 4442 additions and 262 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 dist
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/autofill.html
+++ b/autofill.html
@@ -1,25 +0,0 @@
 <!DOCTYPE html>
 <html lang="es" class="justify-content-center">
 <head>
    <meta charset="UTF-8">
    <title>Autofill</title>
    <link rel="stylesheet" href="./css/styles.css">
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script src="./scripts/bootstrap.bundle.min.js"></script>
    <script src="./scripts/bootstrap.min.js"></script>
 </head>
 <body class="bg-dark border-us p-4">
    <div class="bg-dark container justify-content-center row text-white p-0 m-0">
        <h4 class="display-6 mb-1 p-0 text-center">US 2FA Autofill</h4>
        <small class="mb-4 p-0 text-center">Para obtener tu secret ve <a href="https://2fa.us.es/a2f/otp/bind-device" target="_blank">aquí</a><br>y dale a 'Mostrar' -> 'Mostrar parámetros de configuración'</small>
        <input class="mb-2" id="2fa-input" type="text" name="secret" autocomplete="off" placeholder="Introduce tu secret SHA-1">
        <p class="item2fa m-0 col-sm-7 mb-2 p-0 m-0 text-center display" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Copiar" id="codigo2FA">000000</p>
        <div class="counter bg-us mt-2 mb-4" id="counter">Reinicio en: 30s</div>
        <div class="counter bg-us text-white" id="reset">Restablecer secret</div>
    </div>
    <script src="./scripts/scripts.js"></script>
 </body>
 </html>
--- a/css/bootstrap.min.css
+++ b/css/bootstrap.min.css
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,57 +0,0 @@
 html {
    width: 400px;
    max-width: 400px;
 }
 .bg-us {
    background-color: #be0f2e;
 }
 .border-us {
    border: 3px solid #be0f2e;
 }
 .copy {
    font-size: 36px;
    text-align: center;
    width: 36px;
    height: 36px;
 }
 .counter {
    text-align: center;
    background-color: #be0f2e;
    font-size: 24px;
    color: #ffffff;
    border-radius: px;
 }
 input {
    width: 100%;
    margin: 8px 0;
    padding: 6px 12px 6px 12px;
    display: inline-block;
    border: 1px solid #be0f2e;
    border-radius: 4px;
    background-color: #111;
    margin-top: 20px;
    caret-color: white;
    color: white;
    box-sizing: border-box;
 }
 #codigo2FA {
    font-size: 48px;
    padding: 0%;
 }
 #codigo2FA:hover {
    cursor: pointer;
    text-decoration: underline;
    font-weight: bold;
 }
 #reset:hover {
    cursor: pointer;
    background-color: #940f27;
 }
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,29 @@
 import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import { defineConfig, globalIgnores } from 'eslint/config'
 export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{js,jsx}'],
    extends: [
      js.configs.recommended,
      reactHooks.configs.flat.recommended,
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    rules: {
      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
    },
  },
 ])
--- a/index.html
+++ b/index.html
@@ -0,0 +1,11 @@
 <!doctype html>
 <html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>US 2FA Autofill</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
 </html>
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -0,0 +1,9 @@
 {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"]
      }
    },
    "include": ["src", "src/background.js", "src/content.js"]
  }
--- a/manifest.json
+++ b/manifest.json
@@ -1,30 +0,0 @@
 {
    "manifest_version": 3,
    "name": "US 2FA Autofill",
    "description": "Rellena el código de 2FA en los sitios de la US",
    "version": "3.0",
    "icons": {
        "16": "images/USAutofill_16.png",
        "128": "images/USAutofill_128.png"
    },
    "action": {
      "default_popup": "autofill.html",
      "default_icon": "images/USAutofill_128.png"
    },
    "permissions": [
      "activeTab",
      "tabs",
      "scripting",
      "storage"
    ],
    "content_scripts": [
      {
        "matches": [
          "https://sso.us.es/*"
        ],
        "js": [
          "scripts/scripts.js"
        ]
      }
    ]
  }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,33 @@
 {
  "name": "us-2fa-react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^7.2.0",
    "@fortawesome/free-solid-svg-icons": "^7.2.0",
    "@fortawesome/react-fontawesome": "^3.2.0",
    "bootstrap": "^5.3.8",
    "otpauth": "^9.5.0",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
    "vite-plugin-clean": "^2.0.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.39.4",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^6.0.0",
    "eslint": "^9.39.4",
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.5.2",
    "globals": "^17.4.0",
    "vite": "^8.0.0"
  }
 }
--- a/public/images/USAutofill_128.png
+++ b/public/images/USAutofill_128.png
--- a/public/images/USAutofill_16.png
+++ b/public/images/USAutofill_16.png
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,41 @@
 {
  "manifest_version": 3,
  "name": "US 2FA Autofill",
  "version": "4.1",
  "description": "Rellena automáticamente el código 2FA en la Universidad de Sevilla.",
  "permissions": [
    "storage"
  ],
  "background": {
    "service_worker": "scripts/background.js",
    "type": "module",
    "scripts": ["scripts/background.js"]
  },
  "action": {
    "default_popup": "index.html"
  },
  "icons": {
    "128": "images/USAutofill_128.png"
  },
  "content_scripts": [
    {
      "matches": ["*://sso.us.es/*"],
      "js": ["scripts/content.js"],
      "run_at": "document_idle"
    }
  ],
  "host_permissions": [
    "https://sso.us.es/*"
  ],
  "browser_specific_settings": {
    "gecko": {
      "id": "{552d76df-199a-4058-a8ef-77478cad362f}",
      "strict_min_version": "142.0",
      "data_collection_permissions": {
        "required": [
          "none"
        ]
      }
    }
  }
 }
--- a/scripts/bootstrap.bundle.min.js
+++ b/scripts/bootstrap.bundle.min.js
--- a/scripts/bootstrap.min.js
+++ b/scripts/bootstrap.min.js
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,160 @@
 import { useState, useEffect } from "react";
 import * as OTPAuth from 'otpauth';
 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('');
    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;
        const generateToken = () => {
            try {
                let totp = new OTPAuth.TOTP({
                    issuer: 'US',
                    label: '2FA',
                    algorithm: 'SHA1',
                    digits: 6,
                    period: 30,
                    secret: OTPAuth.Secret.fromBase32(secret.trim().toUpperCase()),
                });
                const newToken = totp.generate()
                setToken(newToken);
                if (api?.tabs?.query) {
                    api.tabs.query({ active: true, currentWindow: true }, (tabs) => {
                        if (tabs[0]?.url?.includes("sso.us.es")) {
                            api.tabs.sendMessage(tabs[0].id, {
                                action: "autofill",
                                code: newToken
                            }).catch(() => {});
                        }
                    });
                } else {
                    console.debug("DevEnv");
                }
            } catch (err) {
                console.error("Invalid secret:", err);
                setToken("ERR!");
            }
        };
        generateToken();
        const timer = setInterval(() => {
            const now = Date.now() / 1000;
            const secondsInCycle = now % 30;
            const remainingTime = 30 - secondsInCycle;
            setRemaining(remainingTime);
            if (remainingTime > 29.9) generateToken();
        }, 41); // ~41.66ms = 24fps
        return () => clearInterval(timer);
    }, [secret]);
    const handleSaveSecret = (e) => {
        if (e.key === 'Enter') {
            const val = e.target.value.trim();
            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);
    };
    return (
        <div className="container-app">
            <div className="top-actions">
                {!secret ? (
                    <div className="tooltip-container left">
                        <FontAwesomeIcon icon={faCircleInfo} className="info-icon" />
                        <div className="tooltip-text">
                            Para obtener tu secret ve <a href="https://2fa.us.es/a2f/otp/bind-device" target="_blank">aquí</a>
                            &nbsp;y dale a 'Mostrar' -&gt; 'Mostrar parámetros de configuración'
                        </div>
                    </div>
                ) : (
                    <div />
                )}
                <ThemeToggle className="right" />
            </div>
            {!secret && (
                <div className="header-wrapper">
                    <h3>US 2FA Autofill</h3>
                </div>
            )}
            {!secret ? (
                <div className="setup-view">
                    <span className="info-text">
                        Mete tu secret SHA-1 de la US y pulsa Enter
                    </span>
                    <input
                        type="text"
                        onKeyUp={handleSaveSecret}
                        placeholder="Introduce secret..."
                    />
                </div>
            ) : (
                <div className="token-view">
                    <div
                        id="codigo2FA"
                        onClick={copyToClipboard}
                        style={{
                            "--progress-smooth": `${(remaining / 30) * 100}%`
                        }}
                    >
                        {token}
                    </div>
                    <button className="btn-reset" onClick={resetSecret}>
                        Cambiar Secret
                    </button>
                </div>
            )}
            <footer className="app-footer">
                <small>Dev'd with &lt;3 by <a className="text-decoration-none" target="_blank" href="https://jose.miarma.net"><strong>Gallardo7761</strong></a></small>
            </footer>
        </div>
    );
 }
 export default App;
--- a/src/background.js
+++ b/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;
  }
 });
--- a/src/components/ThemeToggle.jsx
+++ b/src/components/ThemeToggle.jsx
@@ -0,0 +1,20 @@
 import { useTheme } from "@/hooks/useTheme";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
 import '@/css/ThemeToggle.css';
 const ThemeToggle = ({className}) => {
  const { theme, toggleTheme } = useTheme();
  return (
    <button 
      onClick={toggleTheme} 
      className={`theme-btn m-0 p-0 ` + className}
      title={theme === "light" ? "flashbang!" : "go to sleep"}
    >
      <FontAwesomeIcon icon={theme === "light" ? faMoon : faSun} />
    </button>
  );
 };
 export {ThemeToggle};
--- a/src/content.js
+++ b/src/content.js
@@ -0,0 +1,66 @@
 (async function() {
  // eslint-disable-next-line no-undef
  const api = typeof browser !== "undefined" ? browser : chrome;
  const fillAndSubmit = (code) => {
    const input = document.getElementById("input2factor");
    const button = document.getElementById("notification_2factor_button_ok");
    const errorMsg = document.querySelector(".ui-state-error");
    const isErrorVisible = errorMsg && errorMsg.style.display !== "none";
    if (!input || input.value.length > 0 || isErrorVisible) {
      return;
    }
    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();
 })();
--- a/src/context/ThemeContext.jsx
+++ b/src/context/ThemeContext.jsx
@@ -0,0 +1,31 @@
 import { createContext, useEffect, useState } from "react";
 export const ThemeContext = createContext();
 export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState(() => {
    return (
      localStorage.getItem("theme") ||
      (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
    );
  });
  useEffect(() => {
    const root = document.documentElement;
    document.body.classList.remove("light", "dark");
    document.body.classList.add(theme);
    root.classList.remove("light", "dark");
    root.classList.add(theme);
    localStorage.setItem("theme", theme);
  }, [theme]);
  const toggleTheme = () => {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  };
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
 };
--- a/src/css/ThemeToggle.css
+++ b/src/css/ThemeToggle.css
@@ -0,0 +1,17 @@
 .theme-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 5px;
  transition: color 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .theme-btn:hover {
  color: var(--primary);
  transform: rotate(15deg); /* Un detallito con arte */
 }
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -0,0 +1,277 @@
 /* VARIABLES */
 :root {
    --primary: #be0f2e;
    --primary-hover: #940f27;
    --transition-speed: 0.3s;
 }
 :root.light {
    --bg-body: #f8f9fa;
    --card-bg: #ffffff;
    --text-main: #212529;
    --text-muted: #6c757d;
    --input-bg: #ffffff;
 }
 :root.dark {
    --bg-body: #121212;
    --card-bg: #1e1e1e;
    --text-main: #e9ecef;
    --text-muted: #adb5bd;
    --input-bg: #2d2d2d;
 }
 /* BASE */
 * { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
 }
 html {
    width: 360px;
    margin: 0px;
    padding: 0px;
 }
 body {
    color: var(--text-main);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    transition: all var(--transition-speed) ease;
    display: flex;
    justify-content: center;
    padding: 0px;
    margin: 0px;
 }
 /* LAYOUT */
 .container-app {
    width: 360px;
    position: relative;
    background: var(--card-bg);
    padding: 30px 25px 15px 25px;
    border: 1px solid rgba(190, 15, 46, 0.2);
 }
 .top-actions {
    position: absolute;
    top: 15px;
    left: 0;          
    right: 0;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    pointer-events: none;
 }
 .top-actions > * {
    pointer-events: auto;
 }
 .header-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
 }
 /* TIPOGRAFÍA */
 h3, .header-wrapper h3 {
    font-weight: 700;
    text-align: center;
    margin: 0;
    margin-bottom: 10px;
    color: var(--primary);
    line-height: 1;
 }
 .token-header {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: -10px;
    font-weight: 500;
 }
 .info-text {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.4;
    margin-bottom: 5px;
 }
 .info-text a { 
    color: var(--primary); 
    text-decoration: none; 
    font-weight: 600; 
 }
 .info-text a:hover { 
    text-decoration: underline; 
 }
 .muted {
    color: var(--text-muted);
 }
 /* COMPONENTES */
 input {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-main);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
 }
 :root.dark input { 
    border-color: #444; 
 }
 input:focus { 
    border-color: var(--primary); 
 }
 #codigo2FA {
    font-family: 'Courier New', Courier, monospace;
    font-size: 3.5rem;
    font-weight: 800;
    text-align: center;
    padding: 10px 0;
    margin: 5px 0;
    letter-spacing: 5px;
    cursor: pointer;
    user-select: none;
    display: inline-block;
    width: 100%;
    background: linear-gradient(
        to right, 
        var(--primary) calc(var(--progress-smooth) * 0.7 + 15%), 
        var(--text-muted) calc(var(--progress-smooth) * 0.7 + 15%)
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.1s linear;
 }
 #codigo2FA:hover {
    transform: scale(1.05);
    transition: 0.2s;
    filter: brightness(1.2);
 }
 .btn-reset {
    background: transparent;
    color: var(--text-muted);
    border: none;
    width: 100%;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
 }
 .btn-reset::before {
    content: '[';
 }
 .btn-reset::after {
    content: ']';
 }
 .btn-reset:hover {
    color: var(--primary);
 }
 /* TOOLTIPS */
 .tooltip-container {
    position: relative;
    display: flex;
    align-items: center;
 }
 .info-icon {
    color: var(--text-muted);
    font-size: 1.1rem;
    transition: color 0.2s;
 }
 .tooltip-text {
    visibility: hidden;
    width: 280px; 
    background-color: var(--card-bg); 
    color: var(--text-main);
    text-align: center;
    border-radius: 8px;
    padding: 12px;
    position: absolute;
    z-index: 9999;
    top: 140%;
    right: -10px; 
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    border: 1.5px solid var(--primary);
    font-size: 0.85rem;
    line-height: 1.4;
    pointer-events: auto;
    word-wrap: break-word; 
 }
 .tooltip-text::after {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent var(--primary) transparent;
 }
 .top-actions .left .tooltip-text {
    left: -10px;
    right: auto;
 }
 .top-actions .left .tooltip-text::after {
    left: 15px;
    right: auto;
 }
 .tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
 }
 /* FOOTER */
 .app-footer {
    margin-top: 20px;
    text-align: center;
    opacity: 0.6;
    transition: opacity 0.3s;
 }
 .app-footer:hover {
    opacity: 1;
 }
 .app-footer small {
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
 }
 .app-footer strong {
    color: var(--primary);
 }
--- a/src/hooks/useTheme.js
+++ b/src/hooks/useTheme.js
@@ -0,0 +1,10 @@
 import { useContext } from "react";
 import { ThemeContext } from "../context/ThemeContext";
 export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme debe usarse dentro de un <ThemeProvider>");
  }
  return context;
 };
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -0,0 +1,15 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import '@/css/index.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap/dist/js/bootstrap.bundle.min.js'
 import App from '@/App.jsx'
 import { ThemeProvider } from '@/context/ThemeContext'
 createRoot(document.getElementById('root')).render(
  <StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </StrictMode>,
 )
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,31 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
 export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      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' || chunkInfo.name === 'background') {
            return 'scripts/[name].js';
          }
          return 'assets/[name]-[hash].js';
        },
        manualChunks: undefined,
      },
    },
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
    },
  },
 });
Author	SHA1	Message	Date
Jose	082e070aea	fix: handle undefined chrome handling in api initialization	2026-03-18 13:57:29 +01:00
Jose	edf404542b	bump: update version to 4.1 in manifest.json	2026-03-18 13:48:17 +01:00
Jose	3176af094e	fix: background.js, remove: unnecessary permissions	2026-03-18 13:46:03 +01:00
Jose	e8a14e7e69	add: background.js for automatic code input	2026-03-18 12:33:21 +01:00
Jose	becc4f9445	bump: 4.0 - new react frontend	2026-03-15 17:27:16 +01:00