elsabro 2.1.0 → 2.3.0

package/skills/chrome-extension.md

@@ -0,0 +1,584 @@
+---
+name: chrome-extension
+description: Crear extension de Chrome con Manifest V3, content scripts, background service worker, popup UI, Storage API y publicacion en Chrome Web Store.
+tags: [chrome, extension, browser, manifest-v3, typescript, vite]
+difficulty: intermediate
+estimated_time: 35min
+---
+
+# Skill: Extension de Chrome
+
+<when_to_use>
+Usar cuando el usuario menciona:
+- "extension de Chrome"
+- "extension de navegador"
+- "browser extension"
+- "plugin de Chrome"
+- "addon"
+</when_to_use>
+
+<pre_requisites>
+## Pre-requisitos
+
+- Chrome o Chromium
+- Node.js 18+ (para build tools)
+- Conocimiento basico de JavaScript/TypeScript
+</pre_requisites>
+
+<project_structure>
+## Estructura de Proyecto
+
+```
+my-extension/
+├── src/
+│   ├── background/
+│   │   └── index.ts           # Service worker
+│   ├── content/
+│   │   ├── index.ts           # Content script
+│   │   └── styles.css         # Estilos inyectados
+│   ├── popup/
+│   │   ├── index.html         # Popup HTML
+│   │   ├── index.ts           # Popup logic
+│   │   └── styles.css         # Popup styles
+│   ├── options/
+│   │   ├── index.html         # Options page
+│   │   └── index.ts
+│   └── utils/
+│       ├── storage.ts         # Storage helpers
+│       └── messaging.ts       # Message helpers
+├── public/
+│   ├── icons/
+│   │   ├── icon16.png
+│   │   ├── icon48.png
+│   │   └── icon128.png
+│   └── manifest.json
+├── dist/                      # Build output
+├── package.json
+├── tsconfig.json
+├── vite.config.ts
+└── README.md
+```
+</project_structure>
+
+<setup_steps>
+## Pasos de Setup
+
+### Paso 1: Inicializar proyecto
+
+```bash
+mkdir my-extension && cd my-extension
+npm init -y
+npm install -D vite typescript @crxjs/vite-plugin@beta
+```
+
+### Paso 2: Crear manifest.json
+
+Crear `public/manifest.json`:
+
+```json
+{
+  "manifest_version": 3,
+  "name": "My Extension",
+  "version": "1.0.0",
+  "description": "Una extension increible para Chrome",
+  "permissions": [
+    "storage",
+    "activeTab",
+    "scripting",
+    "contextMenus"
+  ],
+  "host_permissions": [
+    "https://*/*",
+    "http://*/*"
+  ],
+  "background": {
+    "service_worker": "src/background/index.ts",
+    "type": "module"
+  },
+  "content_scripts": [
+    {
+      "matches": ["https://*/*", "http://*/*"],
+      "js": ["src/content/index.ts"],
+      "css": ["src/content/styles.css"],
+      "run_at": "document_end"
+    }
+  ],
+  "action": {
+    "default_popup": "src/popup/index.html",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    },
+    "default_title": "My Extension"
+  },
+  "options_page": "src/options/index.html",
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  }
+}
+```
+
+### Paso 3: Configurar TypeScript
+
+Crear `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": ["chrome"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
+```
+
+Instalar tipos de Chrome:
+
+```bash
+npm install -D @types/chrome
+```
+
+### Paso 4: Configurar Vite
+
+Crear `vite.config.ts`:
+
+```typescript
+import { defineConfig } from "vite";
+import { crx } from "@crxjs/vite-plugin";
+import manifest from "./public/manifest.json";
+
+export default defineConfig({
+  plugins: [crx({ manifest })],
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+  },
+});
+```
+
+### Paso 5: Crear Background Service Worker
+
+Crear `src/background/index.ts`:
+
+```typescript
+// Background service worker para Manifest V3
+
+// Cuando la extension se instala
+chrome.runtime.onInstalled.addListener((details) => {
+  console.log("Extension instalada:", details.reason);
+
+  // Crear context menu
+  chrome.contextMenus.create({
+    id: "myExtensionMenu",
+    title: "Procesar con My Extension",
+    contexts: ["selection"],
+  });
+
+  // Inicializar storage con valores por defecto
+  chrome.storage.local.set({
+    enabled: true,
+    settings: {
+      theme: "light",
+      notifications: true,
+    },
+  });
+});
+
+// Manejar click en context menu
+chrome.contextMenus.onClicked.addListener((info, tab) => {
+  if (info.menuItemId === "myExtensionMenu" && info.selectionText) {
+    console.log("Texto seleccionado:", info.selectionText);
+
+    // Enviar mensaje al content script
+    if (tab?.id) {
+      chrome.tabs.sendMessage(tab.id, {
+        type: "PROCESS_SELECTION",
+        text: info.selectionText,
+      });
+    }
+  }
+});
+
+// Escuchar mensajes del content script o popup
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  console.log("Mensaje recibido:", message, "de:", sender);
+
+  switch (message.type) {
+    case "GET_SETTINGS":
+      chrome.storage.local.get(["settings"], (result) => {
+        sendResponse(result.settings || {});
+      });
+      return true; // Indica respuesta asincrona
+
+    case "SAVE_SETTINGS":
+      chrome.storage.local.set({ settings: message.payload }, () => {
+        sendResponse({ success: true });
+      });
+      return true;
+
+    default:
+      sendResponse({ error: "Unknown message type" });
+  }
+});
+```
+
+### Paso 6: Crear Content Script
+
+Crear `src/content/index.ts`:
+
+```typescript
+// Content script - se ejecuta en cada pagina
+
+console.log("Content script cargado en:", window.location.href);
+
+// Escuchar mensajes del background o popup
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  console.log("Content script recibio:", message);
+
+  switch (message.type) {
+    case "PROCESS_SELECTION":
+      processSelection(message.text);
+      sendResponse({ success: true });
+      break;
+
+    case "PING":
+      sendResponse({ pong: true, url: window.location.href });
+      break;
+
+    case "GET_PAGE_INFO":
+      sendResponse({
+        title: document.title,
+        url: window.location.href,
+      });
+      break;
+
+    default:
+      sendResponse({ error: "Unknown message type" });
+  }
+});
+
+// Funcion para procesar texto seleccionado (usando DOM APIs seguras)
+function processSelection(text: string) {
+  // Crear tooltip usando DOM APIs seguras (evita innerHTML)
+  const existing = document.getElementById("my-extension-tooltip");
+  if (existing) existing.remove();
+
+  const tooltip = document.createElement("div");
+  tooltip.id = "my-extension-tooltip";
+  tooltip.style.cssText = `
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    z-index: 999999;
+    max-width: 300px;
+    font-family: system-ui, -apple-system, sans-serif;
+  `;
+
+  const title = document.createElement("h4");
+  title.textContent = "My Extension";
+  title.style.cssText = "margin: 0 0 8px 0; font-size: 14px;";
+
+  const content = document.createElement("p");
+  const displayText = text.length > 100 ? text.substring(0, 100) + "..." : text;
+  content.textContent = "Seleccionaste: " + displayText;
+  content.style.cssText = "margin: 0; font-size: 13px; color: #666;";
+
+  const closeBtn = document.createElement("button");
+  closeBtn.textContent = "Cerrar";
+  closeBtn.style.cssText = `
+    margin-top: 12px;
+    padding: 6px 12px;
+    background: #007AFF;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  `;
+  closeBtn.addEventListener("click", () => tooltip.remove());
+
+  tooltip.appendChild(title);
+  tooltip.appendChild(content);
+  tooltip.appendChild(closeBtn);
+  document.body.appendChild(tooltip);
+
+  // Auto-cerrar despues de 5 segundos
+  setTimeout(() => tooltip.remove(), 5000);
+}
+```
+
+### Paso 7: Crear Popup UI
+
+Crear `src/popup/index.html`:
+
+```html
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>My Extension</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <header class="header">
+      <h1>My Extension</h1>
+    </header>
+
+    <main class="content">
+      <div class="toggle-row">
+        <span>Habilitado</span>
+        <label class="toggle">
+          <input type="checkbox" id="enabledToggle" checked>
+          <span class="slider"></span>
+        </label>
+      </div>
+
+      <div class="form-group">
+        <label for="input">Texto:</label>
+        <input type="text" id="input" placeholder="Escribe algo...">
+      </div>
+
+      <div class="buttons">
+        <button id="saveBtn" class="btn btn-primary">Guardar</button>
+        <button id="actionBtn" class="btn btn-secondary">Ejecutar</button>
+      </div>
+
+      <div id="status" class="status"></div>
+    </main>
+
+    <footer class="footer">
+      <a href="#" id="optionsLink">Configuracion</a>
+    </footer>
+  </div>
+
+  <script type="module" src="index.ts"></script>
+</body>
+</html>
+```
+
+Crear `src/popup/styles.css`:
+
+```css
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  width: 320px;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+}
+
+.header {
+  padding: 16px;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+}
+
+.header h1 { font-size: 18px; }
+
+.content { padding: 16px; }
+
+.toggle-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #eee;
+}
+
+.toggle {
+  position: relative;
+  width: 48px;
+  height: 26px;
+}
+
+.toggle input { opacity: 0; width: 0; height: 0; }
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background: #ccc;
+  border-radius: 26px;
+  transition: 0.3s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 20px;
+  width: 20px;
+  left: 3px;
+  bottom: 3px;
+  background: white;
+  border-radius: 50%;
+  transition: 0.3s;
+}
+
+input:checked + .slider { background: #667eea; }
+input:checked + .slider:before { transform: translateX(22px); }
+
+.form-group { margin-bottom: 16px; }
+.form-group label { display: block; margin-bottom: 6px; }
+.form-group input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+}
+
+.buttons { display: flex; gap: 8px; }
+
+.btn {
+  flex: 1;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.btn-primary { background: #667eea; color: white; }
+.btn-secondary { background: #f0f0f0; }
+
+.status { margin-top: 12px; padding: 8px; border-radius: 6px; display: none; }
+.status.success { display: block; background: #d4edda; color: #155724; }
+.status.error { display: block; background: #f8d7da; color: #721c24; }
+
+.footer { padding: 12px; background: #f9f9f9; text-align: center; }
+.footer a { color: #667eea; text-decoration: none; }
+```
+
+Crear `src/popup/index.ts`:
+
+```typescript
+const input = document.getElementById("input") as HTMLInputElement;
+const enabledToggle = document.getElementById("enabledToggle") as HTMLInputElement;
+const saveBtn = document.getElementById("saveBtn") as HTMLButtonElement;
+const actionBtn = document.getElementById("actionBtn") as HTMLButtonElement;
+const status = document.getElementById("status") as HTMLDivElement;
+const optionsLink = document.getElementById("optionsLink") as HTMLAnchorElement;
+
+// Cargar estado inicial
+document.addEventListener("DOMContentLoaded", async () => {
+  const result = await chrome.storage.local.get(["enabled", "savedText"]);
+  enabledToggle.checked = result.enabled !== false;
+  input.value = result.savedText || "";
+});
+
+// Toggle habilitado
+enabledToggle.addEventListener("change", async () => {
+  await chrome.storage.local.set({ enabled: enabledToggle.checked });
+  showStatus(enabledToggle.checked ? "Habilitado" : "Deshabilitado", "success");
+});
+
+// Guardar
+saveBtn.addEventListener("click", async () => {
+  const value = input.value.trim();
+  if (!value) {
+    showStatus("Escribe algo primero", "error");
+    return;
+  }
+  await chrome.storage.local.set({ savedText: value });
+  showStatus("Guardado", "success");
+});
+
+// Ejecutar
+actionBtn.addEventListener("click", async () => {
+  try {
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+    if (!tab?.id) {
+      showStatus("No hay tab activa", "error");
+      return;
+    }
+    const response = await chrome.tabs.sendMessage(tab.id, { type: "PING" });
+    showStatus("Pagina: " + response.url, "success");
+  } catch {
+    showStatus("Error de comunicacion", "error");
+  }
+});
+
+// Opciones
+optionsLink.addEventListener("click", (e) => {
+  e.preventDefault();
+  chrome.runtime.openOptionsPage();
+});
+
+function showStatus(message: string, type: "success" | "error") {
+  status.textContent = message;
+  status.className = "status " + type;
+  setTimeout(() => { status.className = "status"; }, 3000);
+}
+```
+
+### Paso 8: Scripts de package.json
+
+```json
+{
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  }
+}
+```
+</setup_steps>
+
+<verification>
+## Verificacion
+
+### 1. Build
+```bash
+npm run dev
+```
+
+### 2. Cargar en Chrome
+1. Abre `chrome://extensions/`
+2. Activa "Modo desarrollador"
+3. Click "Cargar extension sin empaquetar"
+4. Selecciona la carpeta `dist`
+
+### 3. Probar popup
+- Click en el icono de la extension
+- Escribe algo y guarda
+
+### 4. Probar content script
+- Abre DevTools en cualquier pagina
+- Deberia aparecer "Content script cargado"
+</verification>
+
+<publishing>
+## Publicar en Chrome Web Store
+
+1. Ir a https://chrome.google.com/webstore/devconsole
+2. Pagar fee de $5
+3. Crear ZIP: `cd dist && zip -r ../extension.zip .`
+4. Subir y completar listing
+5. Enviar para revision
+</publishing>
+
+<common_issues>
+## Problemas Comunes
+
+### "Service worker not found"
+- Verificar path en manifest.json
+- Rebuild y recargar extension
+
+### "Content script not running"
+- Verificar "matches" en manifest
+- Recargar pagina web
+</common_issues>