path: root/files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html

---
title: Tu primera extensión
slug: Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension
tags:
  - Guía
  - WebExtension
translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
---
<div>{{AddonSidebar}}</div>

<div class="blockIndicator note">
<p>Si estás familiarizado/a con los conceptos básicos de las extensiones de navegador, omite esta sección y ve a <a href="https://wiki.developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">cómo se ponen juntos los archivos</a>. Entonces, usa la <a href="https://wiki.developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions#Reference">documentación de referencia</a> para empezar a construir tu extensión. Visita el <a href="https://extensionworkshop.com/?utm_source=developer.mozilla.org&amp;utm_medium=documentation&amp;utm_campaign=your-first-extension">Firefox Extension Workshop</a> para aprender más sobre el flujo de trabajo para probar y publicar extensiones para Firefox.</p>
</div>

<p>En este artículo abordaremos la creación de una extensión para Firefox, desde el comienzo hasta el final. La extensión solo agrega un borde rojo a cualquiera de las páginas cargadas desde "mozilla.org" o cualquiera de sus subdominios.</p>

<p>El código fuente de este ejemplo se encuentra en GitHub: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p>

<p>Primero, necesitas tener instalado Firefox versión 45 o superior.</p>

<h2 id="Escribiendo_la_extensión">Escribiendo la extensión</h2>

<p>Crea una nuevo directorio y navega a él. Por ejemplo, en tu línea de comandos/terminal se hace de esta manera:</p>

<pre class="brush: bash notranslate">mkdir borderify
cd borderify</pre>

<h3 id="manifest.json">manifest.json</h3>

<p>Ahora crearemos un archivo  nuevo llamado "manifest.json" directamente en la carpeta "borderify". Añádale el siguiente contenido:</p>

<pre class="brush: json notranslate">{

  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "Agrega un borde rojo a todas las páginas web de mozilla.org.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }
  ]

}</pre>

<ul>
 <li>Los primeros 3 parámetros:<code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, y <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, son obligatorios, y contienen metadatos básicos para la extensión.</li>
 <li><code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> es opcional, pero se recomienda: Se muestra en el Administrador de Add-ons.</li>
 <li><code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> es opcional, pero recomendado: permite especificar un ícono para la extensión, se mostrará en el Administrador de Add-ons.</li>
</ul>

<p>El parámetro más interesante aquí es <code><a href="/es/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, el cual le dice a Firefox que cargue el script en las páginas Web, cuyas URL coincidan con un patrón especifico. En este caso, le estamos pidiendo a Firefox que cargue el script llamado "borderify.js" en todas las paginas HTTP o HTTPS cargadas desde "mozilla.org" o cualquiera de sus subdominios.</p>

<ul>
 <li><a href="/es/Add-ons/WebExtensions/Content_scripts">Aprenda más acerca de los scripts contenidos.</a></li>
 <li><a href="/es/Add-ons/WebExtensions/Match_patterns">Aprenda más acerca de los patrones coincidentes</a>.</li>
</ul>

<div class="warning">
<p><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID">En algunas situaciones usted necesita especificar un ID para su extensión</a>. Si necesita especificar un ID para el complemento, incluya el parámetro <code><a href="/es/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> en el <code>manifest.json</code> y configure la propiedad <code>gecko.id</code>:</p>

<pre class="brush: json notranslate">"applications": {
  "gecko": {
    "id": "borderify@example.com"
  }
}</pre>
</div>

<h3 id="iconsborder-48.png">icons/border-48.png</h3>

<p>La extensión debería tener un ícono. Este se mostrará junto al listado de extensiones en el Administrador de Add-ons. Nuestro manifest.json promete que tendremos un ícono  en el directorio "icons/border-48.png".</p>

<p>Crea el directorio "icons" dentro de la carpeta "borderify". Almacena ahí el icono y nómbralo "border-48.png". Puedes utilizar <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">el de nuestro ejemplo</a>, el cual se obtuvo a partir del Google Material Design iconset, y es utilizado bajo los términos de la licencia <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a>.</p>

<p>Si eliges emplear tu propio icono, este debe ser de 48x48 pixeles. También puedes aplicar un icono de 96x96 pixeles, para resoluciones mayores, y si haces esto, se especifica como la propiedad <code>96</code> en el objeto icons del manifest.json:</p>

<pre class="brush: json notranslate">"icons": {
  "48": "icons/border-48.png",
  "96": "icons/border-96.png"
}</pre>

<p>Alternativamente, puedes aplicar un archivo SVG ahí, y este se escalará apropiadamente. (Aunque: si usas SVG y tu icono incluye texto, puedes usar la herramienta "convert to path" del editor SVG para aplanar el texto, de modo que se escalone con un tamaño/posición coherente).</p>

<ul>
 <li><a href="/es/Add-ons/WebExtensions/manifest.json/icons">Aprender mas acerca de la especificación de iconos.</a></li>
</ul>

<h3 id="borderify.js">borderify.js</h3>

<p>Finalmente, crea un archivo de nombre "borderify.js" directamente en el directorio "borderify". Y déjale el siguiente contenido:</p>

<pre class="brush: js notranslate">document.body.style.border = "5px solid red";</pre>

<p>Este script se cargara en las páginas que coincidan con el patrón dado en el parámetro <code>content_scripts</code> del archivo manifest.json. El script tiene acceso directo al documento, de la misma manera que los scripts cargados por la propia página.</p>

<ul>
 <li><a href="/es/Add-ons/WebExtensions/Content_scripts">Aprender más acerca de los scripts de contenido.</a></li>
</ul>

<h2 id="Probándolo">Probándolo</h2>

<p>Primero, verifica que tienes todos los archivos en su lugar:</p>

<pre class="notranslate">borderify/
    icons/
        border-48.png
    borderify.js
    manifest.json</pre>

<h3 id="Instalación">Instalación</h3>

<p>Abre "about:debugging" en Firefox, da click en "Cargar complemento temporal" y selecciona cualquier archivo en el directorio de la extensión:</p>

<p>{{EmbedYouTube("cer9EUKegG4")}}</p>

<p>La extensión se encontrará instalada, y lo estará hasta que reinicies Firefox.</p>

<p>Alternativamente, puede ejecuturar la extensión desde la línea de comandos utilizando la herramienta <a href="/es/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>.</p>

<h3 id="Probando">Probando</h3>

<p>Ahora pruebe visitando una página bajo "mozilla.org", y usted verá el borde rojo alrededor de la página:</p>

<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p>

<div class="note">
<p>No lo intentes en addons.mozilla.org! Los scripts de contenido están actualmente bloqueados en ese dominio.</p>
</div>

<p>Experimenta un poco. Edita el contenido del script para cambiar el color del borde, o haz algo más en el contenido de la página. Si actualizas el script de contenido, recarga los archivos de la extensión haciendo clic en el botón "Recargar" en about:debugging. Podrás ver los cambios en el momento:</p>

<p>{{EmbedYouTube("NuajE60jfGY")}}</p>

<ul>
 <li><a href="/es/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Aprende más sobre cómo recargar las extensiones</a></li>
</ul>

<h2 id="Empaquetar_y_publicar">Empaquetar y publicar</h2>

<p>Para que otras personas puedan utilizar tu extensión, necesitas empaquetarlo y enviarlo a Mozilla para que lo firmen. Para que aprendas más sobre eso, mira <a href="/es/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Publicando tu extension"</a>.</p>

<h2 id="¿Qué_sigue">¿Qué sigue?</h2>

<p>Ahora que tienes una idea acerca del proceso de desarrollo de una WebExtension para Firefox, continúa con:</p>

<ul>
 <li><a href="/es/Add-ons/WebExtensions/Your_second_WebExtension">escribe una extensión más compleja</a></li>
 <li><a href="/es/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">leer más acerca de la anatomía de una extensión</a></li>
 <li><a href="https://wiki.developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/Examples">explora los ejemplos de extensiones</a></li>
 <li><a href="https://wiki.developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/What_next_">encuentra lo que necesitas para desarrollar, probar y publicar tu extensión</a></li>
 <li><a href="/es/Add-ons/WebExtensions/API">leer acerca de las APIs de JavaScript disponibles para las extensiones.</a></li>
 <li><a href="https://wiki.developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/What_next_#Continue_your_learning_experience">lleva tu aprendizaje más lejos</a></li>
</ul>