1 files changed, 161 insertions, 0 deletions
diff --git a/files/es/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/es/mozilla/add-ons/webextensions/your_first_webextension/index.html
new file mode 100644
index 0000000000..1a2ad67967
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/your_first_webextension/index.html
@@ -0,0 +1,161 @@
+---
+title: Tu primera extensión
+slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
+tags:
+  - Guía
+  - WebExtension
+translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
+original_slug: Mozilla/Add-ons/WebExtensions/Tu_primera_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>