Desarrollo
Después de leer la sección Comenzar, usa esta guía para ver un esquema de los componentes de la extensión, sus capacidades en Manifest V3 y cómo combinarlos. En primer lugar, debes familiarizarte con la capacidad de las extensiones: Luego, aprende a combinar estas funciones en la sección de conceptos básicos de las extensiones.
Cómo diseñar la interfaz de usuario
La mayoría de las extensiones necesitan algún tipo de interacción del usuario para funcionar. La plataforma de extensiones ofrece una variedad de formas de agregar interacciones a tu extensión. Estos métodos incluyen ventanas emergentes que se activan desde la barra de herramientas de Chrome, paneles laterales, menús contextuales y mucho más.
Panel lateral
Usa la API de
chrome.sidePanel
para alojar contenido en el panel lateral del navegador junto con el contenido principal de una página web.
Acción
Controla la visualización del ícono de una extensión en la barra de herramientas.
Menús
Agrega elementos al menú contextual de Google Chrome.
![](https://developer.chrome.com/static/docs/extensions/develop/images/develop-ui-sidepanel.png?authuser=1&%3Bhl=es-419&hl=es-419)
Controla el navegador
Las APIs de extensión de Chrome te permiten cambiar el funcionamiento del navegador.
Anular la configuración y las páginas de Chrome
Las anulaciones de configuración permiten que las extensiones anulen los parámetros de configuración de Chrome seleccionados. Además, las extensiones pueden usar HTML para anular páginas para reemplazar las páginas que Google Chrome suele proporcionar. Una extensión puede anular el administrador de marcadores, la pestaña Historial o la pestaña nueva.
Cómo extender Herramientas para desarrolladores
Las extensiones de Herramientas para desarrolladores agregan funcionalidad a las Herramientas para desarrolladores de Chrome mediante el acceso a las APIs de extensión específicas de Herramientas para desarrolladores a través de una página de Herramientas para desarrolladores agregada a la extensión. También puedes usar la API de
chrome.debugger
para invocar el protocolo de depuración remota de Chrome. Adjúntalo a una o más pestañas para instrumentar la interacción de la red, depurar JavaScript, mutar el DOM y mucho más.
Visualización de notificaciones
La API de
chrome.notifications
te permite crear notificaciones mediante plantillas y mostrarlas a los usuarios en la bandeja del sistema del usuario.
Opciones del historial
Usa la API de
chrome.history
para interactuar con el registro de las páginas visitadas del navegador y la API de chrome.browsingData
para administrar otros datos de navegación. Utiliza chrome.topSites
para acceder a los sitios más visitados.
Controla las pestañas y ventanas
Usa APIs como
chrome.tabs
, chrome.tabGroups
y chrome.windows
para crear, modificar y organizar el navegador del usuario.
Cómo agregar combinaciones de teclas
Usa la API de
chrome.commands
para agregar combinaciones de teclas que activen acciones en tu extensión. Por ejemplo, puedes agregar un acceso directo para abrir la acción del navegador o enviar un comando a la extensión.
Autenticar usuarios
Usa la API de
chrome.identity
para obtener tokens de acceso de OAuth 2.0.
Administrar extensiones
La API de
chrome.management
proporciona formas de administrar la lista de extensiones instaladas y en ejecución. Resulta particularmente útil para las extensiones que anulan la página integrada Nueva pestaña.
Proporciona sugerencias
La API de
chrome.omnibox
te permite registrar una palabra clave en el cuadro multifunción (la barra de direcciones) de Google Chrome.
Actualiza la configuración de Chrome
Usa la API de
chrome.privacy
para controlar el uso de funciones en Chrome que pueden afectar la privacidad del usuario. Consulta también la API de chrome.proxy
para administrar la configuración de proxy de Chrome.
Administrar las descargas
Usa la API de
chrome.downloads
para iniciar, supervisar, manipular y buscar descargas de manera programática.
Cómo usar los favoritos y la lista de lectura
Usa las APIs de
chrome.bookmarks
y chrome.readingList
para crear, organizar y manipular de otra manera estas listas.
Cómo controlar la Web
Cambia el contenido y el comportamiento de las páginas web de forma dinámica. Puedes controlar y modificar la Web insertando secuencias de comandos, interceptando solicitudes de red y usando APIs web para interactuar con páginas web.
Cómo inyectar JavaScript y CSS
Las secuencias de comandos de contenido son archivos que se ejecutan en el contexto de páginas web. Usan el Document Object Model (DOM) estándar para leer los detalles de las páginas web que visita el navegador, realizar cambios en ellas y pasar información a su extensión superior.
Accede a la pestaña activa
El permiso
"activeTab"
otorga a una extensión acceso temporal a la pestaña actualmente activa cuando el usuario invoca la extensión, por ejemplo, haciendo clic en su acción. El acceso a la pestaña dura mientras el usuario se encuentra en esa página y se revoca cuando el usuario sale de la pestaña o la cierra.
Cómo controlar solicitudes web
Usa las APIs de
chrome.declarativeNetRequest
, chrome.webRequest
y chrome.webNavigation
para observar, bloquear y modificar solicitudes de red.
Grabación de audio y captura de pantalla
Obtén información sobre los diferentes enfoques para grabar audio y video desde una pestaña, ventana o pantalla usando APIs de plataformas web como
chrome.tabCapture
o getDisplayMedia()
.
Modificar la configuración del sitio web
Usa la API de
chrome.contentSettings
para controlar si los sitios web pueden usar funciones como cookies, JavaScript y complementos. En términos más generales, la configuración de contenido te permite personalizar el comportamiento de Chrome por sitio, en lugar de hacerlo de forma global.
Conceptos básicos
Con las APIs de plataformas web y extensiones, puedes compilar funciones más complejas combinando diferentes componentes de IU y funciones de la plataforma de extensiones.
Service workers
Un service worker de extensión (service-worker.js) es una secuencia de comandos basada en eventos que el navegador ejecuta en segundo plano. A menudo, se usa para procesar datos, coordinar tareas en diferentes partes de una extensión y como administrador de eventos de una extensión.
Permisos
Comprende los permisos: cómo funcionan y cuándo evitar solicitarlos cuando no son necesarios.
Filtro de contenido
Existen diferentes maneras de implementar el filtrado de contenido y red en las extensiones de Chrome. Obtén información sobre las capacidades de filtrado de contenido disponibles para las extensiones y los diferentes enfoques, técnicas y APIs que pueden usar las extensiones de Chrome.
Mensajes
Muchas veces, las secuencias de comandos del contenido o las páginas de extensiones tienen que enviar o recibir información del service worker de extensión. En estos casos, cualquiera de los lados puede escuchar los mensajes enviados desde el otro extremo y responder en el mismo canal.
Mensajería nativa
Habilita tus extensiones para intercambiar mensajes con aplicaciones nativas.
Evita el código alojado de forma remota
En Manifest V3, las extensiones deben empaquetar todo el código que usan dentro de la propia extensión. Existen diferentes estrategias para hacerlo.
Almacenamiento
Las extensiones de Chrome tienen una API de Storage especializada, disponible para todos los componentes de las extensiones. Incluye cuatro áreas de almacenamiento separadas para casos de uso específicos y un objeto de escucha de eventos que realiza un seguimiento cada vez que se actualizan datos.
Documentos fuera de pantalla
Los service workers no tienen acceso al DOM. La API de Offscreen permite que la extensión use APIs de DOM en un documento oculto sin interrumpir la experiencia del usuario al abrir nuevas ventanas o pestañas.
Aislamiento de distintos orígenes
El aislamiento de origen cruzado permite que una página web use funciones potentes, como
SharedArrayBuffer
. Una extensión puede habilitar el aislamiento de origen cruzado si especifica los valores adecuados para las claves de manifiesto "cross_origin_embedder_policy"
y "cross_origin_opener_policy"
.