1/4/24, 12:09 PM Extensiones / Cómo comenzar | Get started | Chrome for Developers

Se usó la API de Cloud Translation (//cloud.google.com/translate/?hl=es-419) para traducir esta

página.

Cómo
comenzar
Te damos la bienvenida al desarrollo de
extensiones de Chrome. Descubre todo
lo que necesitas para comenzar a crear
y distribuir tu primera extensión de
Chrome.

Compila tu primera extensión…

Ver todos los instructivos…

Descripción general

¿Qué ¿Cómo ¿Qué

son las se pueden
extensiones construyen? hacer?
Las extensiones Puedes compilar Además de las
de Chrome extensiones con APIs web

https://developer.chrome.com/docs/extensions/get-started?hl=es-419 1/7
1/4/24, 12:09 PM Extensiones / Cómo comenzar | Get started | Chrome for Developers

mejoran la las mismas (https://developer.

experiencia de tecnologías web mozilla.org/docs/W
eb/API)
navegación que se usan
, las extensiones
mediante la para crear
también tienen
personalización aplicaciones
acceso a las
de la interfaz de web: HTML
APIs de Chrome
usuario, la (https://web.dev/le
arn/html/?hl=es- Extension
observación de
419) (https://developer.
eventos del chrome.com/docs/
, CSS
navegador y la extensions/referen
(https://web.dev/le
modificación de arn/css/?hl=es- ce/?hl=es-419)
la Web. Visita 419) para realizar
Chrome Web y JavaScript diferentes
Store (https://developer. tareas. Para
(https://chromewe mozilla.org/docs/L obtener una
bstore.google.com earn/JavaScript) descripción
/?hl=es-419) . general más
para ver más
detallada,
ejemplos de lo
consulta la Guía
que pueden
de desarrollo
hacer las (https://developer.
extensiones. chrome.com/docs/
extensions/develo
p?hl=es-419)
.

Terminología de las
extensiones
Una extensión de Chrome consta de partes que cumplen diferentes funciones.

article article article

https://developer.chrome.com/docs/extensions/get-started?hl=es-419 2/7
1/4/24, 12:09 PM Extensiones / Cómo comenzar | Get started | Chrome for Developers

(https://developer.chrome.co (https://developer.chrome.co (https://developer.chrome.co

m/docs/extensions/reference m/docs/extensions/develop/c m/docs/extensions/develop/c
/manifest?hl=es-419) oncepts/service-workers? oncepts/content-scripts?
Manifest hl=es-419) hl=es-419)
(https://developer.chrome.co Service workers Secuencias de
m/docs/extensions/reference (https://developer.chrome.co comandos de
/manifest?hl=es-419) m/docs/extensions/develop/c
oncepts/service-workers? contenido
El manifiesto de la hl=es-419) (https://developer.chrome.co
m/docs/extensions/develop/c
extensión es el único
Un service worker se oncepts/content-scripts?
archivo obligatorio que hl=es-419)
debe tener un nombre de ejecuta en segundo
archivo específico: plano y controla los Las secuencias de
manifest.json. También eventos del navegador, comandos de contenido
debe estar ubicado en el como quitar un favorito o ejecutan JavaScript en el
directorio raíz de la cerrar una pestaña. No contexto de una página
extensión. El manifiesto tienen acceso al DOM, web.
registra metadatos pero puedes combinarlo
importantes, define con un documento fuera
recursos, declara de pantalla para este
permisos e identifica qué caso de uso.
archivos se deben
ejecutar en segundo
plano y en la página.

article article article

(https://developer.chrome.co (https://developer.chrome.co (https://developer.chrome.co
m/docs/extensions/reference m/docs/extensions/reference m/docs/extensions/reference
/api/action?hl=es-419) /api/sidePanel?hl=es-419) /api/declarativeNetRequest?
Acción de la barra Panel lateral hl=es-419)

de herramientas (https://developer.chrome.co DeclarativeNetRequ

(https://developer.chrome.co m/docs/extensions/reference est
m/docs/extensions/reference /api/sidePanel?hl=es-419) (https://developer.chrome.co
/api/action?hl=es-419) m/docs/extensions/reference
Muestra la IU /api/declarativeNetRequest?
Ejecuta el código cuando personalizada en el panel hl=es-419)
el usuario haga clic en el lateral del navegador.
ícono de la barra de Interceptar, bloquear o
herramientas de modificar solicitudes de
extensiones o muestra red

https://developer.chrome.com/docs/extensions/get-started?hl=es-419 3/7
1/4/24, 12:09 PM Extensiones / Cómo comenzar | Get started | Chrome for Developers

una ventana emergente

con la API de Action.

Publicar en Chrome Web

Store
Si compilas la extensión por tu cuenta, consulta nuestro instructivo para comenzar
(https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=es-419). Si
deseas publicar en Chrome Web Store, hay algunas cosas que debes saber primero.

palette build cloud_off

Diseña Familiarízate Incluir
una con las toda la
extensión políticas lógica de
de alta Las extensiones
extensión
calidad que se
Cuando
distribuyen en
escribas el
Cuando elijas las Chrome Web
código, ten en
funciones que Store deben
cuenta que toda
deseas admitir, cumplir con las
la lógica se debe
asegúrate de políticas del
incluir en el
que tu extensión programa para
paquete de
cumpla un único desarrolladores
extensión. Esto
propósito (https://developer.
chrome.com/docs/ significa que no
(https://developer.
chrome.com/docs/ webstore/program se podrá
webstore/program -policies?hl=es- descargar
-policies/quality- 419) ningún código
guidelines-faq? . Explora estas JavaScript
hl=es-419)

https://developer.chrome.com/docs/extensions/get-started?hl=es-419 4/7
1/4/24, 12:09 PM Extensiones / Cómo comenzar | Get started | Chrome for Developers

que esté políticas para adicional

claramente asegurarte de durante el
definido y sea que la extensión tiempo de
fácil de se pueda alojar ejecución.
entender. en Chrome Web Mejorar la
Store. seguridad de las
extensiones
(https://developer.
chrome.com/docs/
extensions/migrati
ng/improve-
security?hl=es-
419)
: Proporciona
alternativas a la
ejecución de
código alojado
de forma
remota.

Más informa…
Más informa… Más informa…

Instructivos
Elige cualquiera de los siguientes instructivos para comenzar tu recorrido de
aprendizaje sobre extensiones.

code code code

Tu Ejecuta Incorporar
primera secuencias secuencias

https://developer.chrome.com/docs/extensions/get-started?hl=es-419 5/7
1/4/24, 12:09 PM Extensiones / Cómo comenzar | Get started | Chrome for Developers

extensión de de
Crea tu primera
comandos comandos
extensión de en todas en la
Hello World y te
familiarizarás
las pestaña
con el flujo de páginas activa
trabajo de
desarrollo de Aprende a Haz clic en el
extensiones. agregar ícono de la barra
automáticamente de herramientas
elementos a un para aprender a
sitio específico. simplificar el
estilo de la
página actual.

Empezar ins… Empezar ins… Empezar ins…

code code code

Cómo Controla Cómo
crear un eventos depurar
administrad con tu
de service extensión
pestañas workers Aprende a
encontrar
Obtén Obtén más
registros y
información información
mensajes de
sobre cómo para crear y
error durante la
crear una depurar un
depuración.
ventana

https://developer.chrome.com/docs/extensions/get-started?hl=es-419 6/7
1/4/24, 12:09 PM Extensiones / Cómo comenzar | Get started | Chrome for Developers

emergente que service worker

administre tus de extensión.
pestañas.

Empezar ins…
Empezar ins…
Empezar ins…

https://developer.chrome.com/docs/extensions/get-started?hl=es-419 7/7