Browser Extensions Development (Chrome & Edge) · Lección

Anatomía de un proyecto de extensión

Conozca los archivos y carpetas estándar que componen una extensión de navegador Manifest V3 y la función de cada uno.

Anatomía de un proyecto de extensión es una lección gratuita de Browser Extensions Development (Chrome & Edge) en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Browser Extensions Development (Chrome & Edge), y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Browser Extensions Development (Chrome & Edge) incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

Extensions Are Just Web Files

An extension is just a bundle of HTML, CSS, JavaScript, and a config file, which the browser loads in a special, extra-capable context.

The manifest.json Heart

Every extension needs a manifest.json at its root — it declares name, version, permissions, and scripts. Without it, the browser ignores the folder.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0"
}

A Typical Folder Structure

Layout is flexible, but a clean folder structure stays maintainable: manifest at root, plus popup, background, content, and icons folders.

The Background Service Worker

In Manifest V3, background logic runs as a service worker. It handles events even with no UI open, but unloads when idle to save memory.

{
  "background": {
    "service_worker": "background.js"
  }
}

The Popup Action

The action defines the toolbar button and the popup it opens — itself just a tiny HTML page. The config below shows both fields.

{
  "action": {
    "default_popup": "popup/popup.html",
    "default_title": "Open My Extension"
  }
}

Content Scripts

Content scripts run inside web pages so your extension can read and modify the DOM. You scope them with URL match patterns.

{
  "content_scripts": [{
    "matches": ["https://*.example.com/*"],
    "js": ["content/main.js"]
  }]
}

Icons in Multiple Sizes

Provide your icon in several sizes — browsers show it in different places at different resolutions, so it stays crisp everywhere.

{
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

Declaring Permissions

The permissions array lists the browser APIs you need, like storage or tabs. Request only what you actually use.

{
  "permissions": ["storage", "activeTab"]
}

Web-Accessible Resources

If a web page must load a file packaged in your extension, list it under web_accessible_resources — otherwise the browser blocks access.

{
  "web_accessible_resources": [{
    "resources": ["images/logo.png"],
    "matches": ["https://*.example.com/*"]
  }]
}

How Pieces Communicate

Popup, content scripts, and service worker live in separate contexts, so they talk via the messaging API, not shared variables.

chrome.runtime.sendMessage({ type: 'PING' })

Keeping It Organized

As it grows, group related files into folders and keep manifest.json lean. A predictable layout makes debugging and store review easier.

Quick Check

Check what you remember about extension structure.

Recap

You toured the building blocks: manifest.json declares all, a service worker runs background, the action drives the popup, content scripts touch pages.

Preguntas frecuentes

¿La lección «Anatomía de un proyecto de extensión» es gratis?

Sí — el texto completo de «Anatomía de un proyecto de extensión» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Browser Extensions Development (Chrome & Edge), actualiza a CoddyKit PRO. El curso de Browser Extensions Development (Chrome & Edge) incluye 4 lecciones en total.

¿Qué aprenderé en «Anatomía de un proyecto de extensión»?

Conozca los archivos y carpetas estándar que componen una extensión de navegador Manifest V3 y la función de cada uno. Practicas Browser Extensions Development (Chrome & Edge) con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Browser Extensions Development (Chrome & Edge)?

No se requiere experiencia previa. Browser Extensions Development (Chrome & Edge) en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Anatomía de un proyecto de extensión»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Browser Extensions Development (Chrome & Edge)?

Sí. Cada lección de Browser Extensions Development (Chrome & Edge) incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Browser Extensions Development (Chrome & Edge)