diff options
Diffstat (limited to 'files/es/mozilla/add-ons/sdk')
15 files changed, 1741 insertions, 0 deletions
diff --git a/files/es/mozilla/add-ons/sdk/builder/index.html b/files/es/mozilla/add-ons/sdk/builder/index.html new file mode 100644 index 0000000000..be566483c0 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/builder/index.html @@ -0,0 +1,13 @@ +--- +title: Builder +slug: Mozilla/Add-ons/SDK/Builder +translation_of: Archive/Add-ons/Add-on_SDK/Builder +--- +<p>El Builder Add-on fue basado en un ambiente de desarrollo web que permitió a desarrolladores la creación de add-ons usando las APIs de SDK, pero sin tener que usar las herramientas de linea de comando cfx. El cual fue retirado el primero de Abril 2014 y ahora el dominio direccionara a esta pagina "builder.addons.mozilla.org".<br> + <br> + Sí tu solo has usado el SDK a trabes del Builder, probablemente ya sabes lo que necesitas para el desarrollo con en el SDK. En el <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs">alto nive</a>l y el <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs">bajo nivel</a> de las APIs usadas por Builder add-ons son exactamente la misma para el Builder y SDK. Para cambiar al SDK se necesita:</p> +<ul> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation">Instalación local del SDK. </a></li> + <li>Conocer las herramientas de línea de comandos cfx, como la <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_started"> introducción a walkthrough</a> y las <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/cfx">referencias detalladas de cfx</a>.</li> + <li>Conocer los archivos<a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json"> packege.json</a> que se usan para configurar atributos de tus add-on.</li> +</ul> diff --git a/files/es/mozilla/add-ons/sdk/index.html b/files/es/mozilla/add-ons/sdk/index.html new file mode 100644 index 0000000000..6681924d2e --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/index.html @@ -0,0 +1,84 @@ +--- +title: Add-on SDK +slug: Mozilla/Add-ons/SDK +tags: + - Add-on SDK + - Jetpack +translation_of: Archive/Add-ons/Add-on_SDK +--- +<p><span id="result_box" lang="es"><span class="hps">Usando el</span> <span class="hps">Add-on</span> <span class="hps">SDK</span> <span class="hps">puedes crear</span> <span class="hps">complementos de Firefox</span> <span class="hps">utilizando</span> <span class="hps">tecnologías Web estándar</span><span>: JavaScript</span><span>, HTML y</span> <span class="hps">CSS.</span> <span class="hps">El</span> <span class="hps">SDK</span> <span class="hps">incluye una API</span> <span class="hps">de JavaScript</span> <span class="hps">que se puede utilizar</span> <span class="hps">para crear</span> <span class="hps">complementos</span> <span class="hps">y herramientas</span> <span class="hps">para creación,</span> <span class="hps">funcionamiento</span><span>, pruebas y</span> empaquetado de <span class="hps">complementos</span><span>.</span></span></p> + +<hr> +<h3 id="Tutoriales">Tutoriales</h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Tutorials#getting-started">Comencemos</a></dt> + <dd>Como <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalar el SDK</a> y <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">usar el cfx tool</a> para desarrollar, testear y empaquetar complementos.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials#interact-with-the-browser">Interactuar con el browser</a></dt> + <dd><a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Abrir paginas web</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Listen_For_Page_Load">"escuchar" la carga de paginas</a>, y <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">listar las paginas abiertas</a>.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials#development-techniques">Técnicas de desarrollo</a></dt> + <dd>Aprender sobre las técnicas comunes de desarrollo, como las <a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">pruebas unitarias</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Logging">logueos</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Creating_Reusable_Modules">creacion de modulos reutilizables</a>, <a href="/en-US/Add-ons/SDK/Tutorials/l10n">localizacion</a>, y <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">desarrollo para mobile</a>.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Tutorials#create-user-interfaces">Creando compenentes para la intefaz de usuario</a></dt> + <dd><span id="result_box" lang="es"><span class="hps">Crear</span> <span class="hps">componentes de interfaz de</span> <span class="hps">usuario, tales</span> <span class="hps">como </span></span><a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">botones de barras de herramientas</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">menús </a><a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">contextuales</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">elementos de menu</a> y <a href="/en-US/Add-ons/SDK/Tutorials/Display_a_Popup">cuadros de dialogo</a>.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials#modify-web-pages">Modificación de páginas web</a></dt> + <dd>Modificar las páginas que <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">coincidan con un patron de URL</a> o dinámicamente <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">modificar una ficha particular</a>.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Annotator">Juntando todo</a></dt> + <dd>Tutorial del ejemplo de add-on Annotator.</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="Guias">Guias</h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Guides#contributors-guide">Guide de cómo </a><a href="/en-US/Add-ons/SDK/Guides#contributors-guide">contribuir </a></dt> + <dd>Aprender <a href="/en-US/Add-ons/SDK/Guides/Getting_Started">como empezar a contribuir</a> en la SDK, <span id="result_box" lang="es"><span class="hps">y</span> <span class="hps">sobre</span> <span class="hps">los idiomas</span> <span class="hps">más</span> <span class="hps">importantes que se utilizan</span> <span class="hps">en el código</span> <span class="hps">SDK</span></span>, como los <a href="/en-US/Add-ons/SDK/Guides/Modules">modulos</a>, <a href="/en-US/Add-ons/SDK/Guides/Classes_and_Inheritance">classes y herancias</a>, <a href="/en-US/Add-ons/SDK/Guides/Private_Properties">propiedad privada</a>, y <a href="/en-US/Add-ons/SDK/Guides/Content_Processes">procesos de contenido</a>.</dd> + <dt><a href="/en-US/Add-ons/SDK/Guides#sdk-infrastructure">SDK infrastructura</a></dt> + <dd>Aspectos de la tecnología subyacente de la SDK: <a href="/en-US/Add-ons/SDK/Guides/Module_structure_of_the_SDK">modulos</a>, la <a href="/en-US/Add-ons/SDK/Guides/Program_ID">identificacion del Programa</a>, <span id="result_box" lang="es"><span>y las reglas</span> <span class="hps">que definen</span> <span class="hps">la </span></span> <a href="/en-US/Add-ons/SDK/Guides/Firefox_Compatibility">compatibilidad de </a><a href="/en-US/Add-ons/SDK/Guides/Firefox_Compatibility">Firefox </a>.</dd> + <dt><a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">Contentido scripts</a></dt> + <dd><span id="result_box" lang="es"><span class="hps">Una</span> <span class="hps">guía detallada para</span> <span class="hps">trabajar con</span> </span>scripts.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Guides#sdk-idioms">Idiomas </a><a href="/en-US/Add-ons/SDK/Guides#sdk-idioms">SDK </a></dt> + <dd>Los <a href="/en-US/Add-ons/SDK/Guides/Working_with_Events">eventos del framework</a> del SDK y las <a href="/en-US/Add-ons/SDK/Guides/Two_Types_of_Scripts">diferenciación entre add-on scripts y scripts de contenido</a>.</dd> + <dt><a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">XUL migración</a></dt> + <dd>Una guía para<a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide"> incluir add-ons </a><a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">XUL </a><a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">al SDK</a>. Esta guia incluye una comparación <a href="/en-US/Add-ons/SDK/Guides/XUL_vs_SDK">de dos conjuntos de herramientas</a> y un <a href="/en-US/Add-ons/SDK/Guides/Porting_the_Library_Detector">ejemplo para trabajar</a> incluyendo un XUL add-on.</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="Referencias">Referencias</h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/High-Level_APIs">APIs de alto nivel</a></dt> + <dd><span id="result_box" lang="es"><span class="hps">Documentación de referencia para</span> <span class="hps">las API</span> <span class="hps">del SDK</span> <span class="hps">de alto nivel.</span></span></dd> + <dt><a href="/en-US/Add-ons/SDK/Tools">Referencias de h</a><a href="/en-US/Add-ons/SDK/Tools">erramientas</a></dt> + <dt><span id="result_box" lang="es"><span class="hps">Documentación de referencia para</span> <span class="hps">la herramienta</span> </span><a href="/en-US/Add-ons/SDK/Tools/cfx">cfx</a> usada para el desarrollo, pruebas, y empaquetado add-ons, la <a href="/en-US/Add-ons/SDK/Tools/console">consola</a> global usada para el registro, el paquete <a href="/en-US/Add-ons/SDK/Tools/package_json">package.json</a>.</dt> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Low-Level_APIs">APIs de bajo nivel</a></dt> + <dd><span id="result_box" lang="es"><span class="hps">Documentación de referencia para</span> <span class="hps">las API</span> <span class="hps">del SDK</span> <span class="hps">de bajo nivel.</span></span></dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html b/files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html new file mode 100644 index 0000000000..f493c0ab0e --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html @@ -0,0 +1,119 @@ +--- +title: Agregar una opción al Menú Contextual +slug: Mozilla/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item +tags: + - Add-on SDK + - Firefox + - Guide +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Add_a_Context_Menu_Item +--- +<div class="note"> +<p>Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</p> +</div> + +<p>Para agregar opciones y submenús al menú contextual de Firefox, se usa el módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/context-menu"><code>context-menu</code></a>.</p> + +<p>Aquí se presenta un add-on que agrega una nueva opción al menú contextual. La opción es mostrada en cualquier parte donde sea seleccionado algo en la página. Cuando se hace clic, la selección es enviada al código principal del add-on, el cual simplemente lo registra:</p> + +<pre class="brush: js">var contextMenu = require("sdk/context-menu"); + var menuItem = contextMenu.Item({ + label: "Log Selection", + context: contextMenu.SelectionContext(), + contentScript: 'self.on("click", function () {' + + ' var text = window.getSelection().toString();' + + ' self.postMessage(text);' + + '});', + onMessage: function (selectionText) { + console.log(selectionText); + } +});</pre> + +<p>Pruebe lo siguiente: ejecute el add-on, cargue una página web, seleccione algún texto y haga clic derecho sobre el. Debe aparecer una nueva opción:</p> + +<p><img src="https://mdn.mozillademos.org/files/6513/context-menu-selection.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Haga clic en ella, y la selección es <a href="/en-US/Add-ons/SDK/Tutorials/Logging">registrada en la terminal</a>:</p> + +<pre>info: elephantine lizard +</pre> + +<h2 id="Detalles">Detalles</h2> + +<p>Todo lo que hace este add-on es construir una opción en el menú contextual. No se necesita agregarla: una vez construida la opción, esta es agregada automáticamente en el contexto correcto. En este caso el constructor toma cuatro opciones: <code>label</code>, <code>context</code>, <code>contentScript</code>, y <code>onMessage</code>.</p> + +<h3 id="label">label</h3> + +<p>El <code>label</code> es simplemente la cadena de caracteres que es mostrada.</p> + +<h3 id="context">context</h3> + +<p>El <code>context</code> describe las circunstancias en las cuales la opción debe ser mostrada. El módulo <code>context-menu</code> provee varios contextos simples integrados, incluyendo el <code>SelectionContext()</code>, el cual refiere: muestra la opción cuando algo es seleccionado en la página.</p> + +<p>Si estos contextos simples no son suficientes, puede definir contextos más sofisticados usando scripts.</p> + +<h3 id="contentScript">contentScript</h3> + +<p>Este adjunta un script a la opción. En este caso el script escucha hasta que se hace clic en la opción, luego envía un mensaje al add-on que contiene el texto seleccionado.</p> + +<h3 id="onMessage">onMessage</h3> + +<p>La propiedad <code>onMessage</code> proporciona una vía para que el código del add-on responda a los mensajes del script integrado a la opción del menú contextual. En este caso solo registra el texto seleccionado.</p> + +<p>Por lo tanto:</p> + +<ol> + <li>El usuario o la usuaria hace clic en la opción</li> + <li>se activa el evento <code>click</code> del script de contenido, retorna el texto seleccionado y envía un mensaje al add-on</li> + <li>se activa el evento <code>message</code> del add-on, la función responsable en el código del add-on pasa el texto seleccionado, el cual registra</li> +</ol> + +<h2 id="Más_opciones">Más opciones</h2> + +<h3 id="Agregar_una_imágen">Agregar una imágen</h3> + +<p>Se puede agregar una imagen a la opción del menú contextual con la opción <code>image</code>. Esta es una URL que apunta a un icono de tamaño 16x16 que es mostrado a la izquierda de la opción en el menú contextual. Generalmente se guarda la imagen en el directorio "data" del add-on, y se construye la URL usando <code>self.data.url()</code>:</p> + +<pre class="brush: js">var self = require("sdk/self"); + +var contextMenu = require("sdk/context-menu"); +var menuItem = contextMenu.Item({ + label: "Log Selection", + context: contextMenu.SelectionContext(), + contentScript: 'self.on("click", function () {' + + ' var text = window.getSelection().toString();' + + ' self.postMessage(text);' + + '});', + image: self.data.url("icon-16.png"), + onMessage: function (selectionText) { + console.log(selectionText); + } +});</pre> + +<h3 id="Agregar_tecla_de_acceso_directo">Agregar tecla de acceso directo</h3> + +<div class="geckoVersionNote"> +<p>Nuevo en Firefox 35.</p> +</div> + +<p>Desde Firefox 35 es posible especificar una tecla de acceso directo usando la opción <code>accessKey</code>. Esta debe ser una cadena de un solo carácter. Al presionar la tecla se selecciona la opción cuando el menú contextual esta abierto:</p> + +<pre class="brush: js">var contextMenu = require("sdk/context-menu"); +var menuItem = contextMenu.Item({ + label: "Log Selection", + context: contextMenu.SelectionContext(), + contentScript: 'self.on("click", function () {' + + ' var text = window.getSelection().toString();' + + ' self.postMessage(text);' + + '});', + accessKey: "l", + onMessage: function (selectionText) { + console.log(selectionText); + } +}); +</pre> + +<p> </p> + +<h2 id="Conozca_más">Conozca más</h2> + +<p>Para conocer más sobre el módulo <code>context-menu</code>, puede ver la <a href="/en-US/Add-ons/SDK/High-Level_APIs/context-menu">referencia de la API</a> <a href="/en-US/Add-ons/SDK/High-Level_APIs/context-menu"><code>context-menu</code></a>.</p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html b/files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html new file mode 100644 index 0000000000..f30a388a88 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html @@ -0,0 +1,114 @@ +--- +title: Agregar una opción de Menú en Firefox +slug: Mozilla/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Add_a_Menu_Item_to_Firefox +--- +<div class="note"> +<p>Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</p> +</div> + +<div class="note"> +<p>Si esta usando <a href="/en-US/Add-ons/SDK/Tools/jpm">jpm</a> en vez de cfx, el método para usar módulos externos es diferente, y debe leer la <a href="/en-US/Add-ons/SDK/Tutorials/Using_third-party_modules_%28jpm%29">versión jmp</a> en vez de esta guía.</p> +</div> + +<p>El SDK aún no posee una API para agregar nuevas opciones de menú a Firefox. Pero su diseño permite que sus funcionalidades sean ampliadas, por lo tanto cualquiera puede desarrollar y publicar módulos para que sean usados por los desarrolladores de add-on. Afortunadamente, Erik Vold escribió el módulo <a href="https://github.com/mykmelez/menuitems-jplib"><code>menuitems</code></a> que permite agregar opciones al menú.</p> + +<p>Este manual cumple con una doble funcionalidad. Describe el método general para usar un módulo externo, de terceras partes en el add-on, y describe como agregar una opción al menú usando el módulo <code>menuitems</code> en particular.</p> + +<p>Primero, cree una nuevo add-on. Cree un directorio llamado "clickme" donde desee, ingrese en el directorio recien creado y ejecute <code>cfx init</code>.</p> + +<pre>mkdir clickme +cd clickme +cfx init +</pre> + +<p>La estructura del directorio sera creada:</p> + +<ul> + <li>clickme + <ul> + <li>data</li> + <li>lib + <ul> + <li>main.js</li> + </ul> + </li> + <li>package.json</li> + <li>tests + <ul> + <li>test-main.js</li> + </ul> + </li> + </ul> + </li> +</ul> + +<div> </div> + +<h2 id="Instalar_menuitems">Instalar <code>menuitems</code></h2> + +<p>Cree un directorio llamado "packages"<span class="rangySelectionBoundary" id="selectionBoundary_1427561968445_34724913431211335" style="display: none; line-height: 0;"></span> dentro del directorio "clickme". Luego descargue el paquete <code>menuitems</code> package desde <a href="https://github.com/mykmelez/menuitems-jplib/zipball/4d6ae5b410d79cc16c9c76920fbaa8a367e44ca7">https://github.com/mykmelez/menuitems-jplib</a> y extraiga el archivo dentro del directorio "packages" que acaba de crear:</p> + +<pre>mkdir packages +cd packages +tar -xf ../erikvold-menuitems-jplib-d80630c.zip +</pre> + +<h2 id="Dependencias_del_Módulo">Dependencias del Módulo</h2> + +<p>Si los módulos de terceras partes solo dependen de los módulos de SDK, puede usarlos inmediatamente, pero si dependen de otros módulos de terceras partes, debe instalar también esas dependencias.</p> + +<p>En el directorio principal del paquete encontrará un archivo llamado "package.json". Abralo y busque una entrada llamada "dependencies". La entrada para el paquete <code>menuitems</code> es:</p> + +<pre>"dependencies": ["vold-utils"] +</pre> + +<p>Esto significa que se debe instalar el paquete <code>vold-utils</code>, lo cual puede hacerse descargándolo desde <a href="https://github.com/mykmelez/vold-utils-jplib/zipball/a321447dc5d613df33023165854957c181dc3174">https://github.com/mykmelez/vold-utils-jplib</a> y agregándolo dentro del directorio <code>packages</code> junto a <code>menuitems</code>.</p> + +<h2 id="Usar_menuitems">Usar <code>menuitems</code></h2> + +<p>La <a href="https://github.com/mykmelez/menuitems-jplib/blob/master/docs/menuitems.md">documentación para el módulo <code>menuitems</code></a> nos dice que creemos una opción del menú usando <code>MenuItem()</code>. De las opciones aceptadas por <code>MenuItem()</code>, usaremos este resumido conjunto:</p> + +<ul> + <li><code>id</code>: identificador para esta opción de menú</li> + <li><code>label</code>: texto que mostrará la opción de menú</li> + <li><code>command</code>: función que se ejecutará cuando se seleccione la opción de menú</li> + <li><code>menuid</code>: identificador del elemento padre de la opción de menú</li> + <li><code>insertbefore</code>: identificador de la opción del menú delante de la cual queremos que aparezca nuestra opción de menú.</li> +</ul> + +<div> +<div> +<pre class="brush: js">var menuitem = require("menuitems").Menuitem({ + id: "clickme", + menuid: "menu_ToolsPopup", + label: "Click Me!", + onCommand: function() { + console.log("clicked"); + }, + insertbefore: "menu_pageInfo" +});</pre> + +<div> </div> +</div> +</div> + +<p>Luego, se debe declarar la dependencia en el paquete <code>menuitems</code>. En el archivo <code>package.json</code> del add-on se agrega:</p> + +<pre>"dependencies": "menuitems" +</pre> + +<p>Note que debido al <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=663480">bug 663480</a>, si agrega una línea <code>dependencies</code> en <code>package.json</code>, y usa cualquier módulo del SDK, tendrá que declarar la dependencia a ese paquete integrado, como sigue:</p> + +<pre>"dependencies": ["menuitems", "addon-sdk"] +</pre> + +<p>Ahora esta todo listo. Ejecute el add-on y verá la nueva opción de menú en el menú <code>Herramientas</code>: seleccionela y verá aparecer en la terminal <code>info: clicked</code>.</p> + +<h2 id="Advertencia">Advertencia</h2> + +<p>Los módulos de terceras partes son una manera genial de usar funcionalidades que no son proporcionadas directamente por SDK, pero debido a que los módulos de terceras partes usan APIs de bajo nivel pueden no funcionar correctamente en las nuevas versiones de Firefox.</p> + +<p> </p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html b/files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html new file mode 100644 index 0000000000..91bde8e45c --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html @@ -0,0 +1,85 @@ +--- +title: Agregar un Botón a la Barra de Herramienta +slug: Mozilla/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Adding_a_Button_to_the_Toolbar +--- +<div class="note"> +<p>Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</p> + +<p>Este manual usa la API <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, que esta disponible solo para Firefox 29 en adelante.</p> +</div> + +<p>Para agregar un botón a la barra de herramientas, use los módulos <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> o <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">toggle button</a>.</p> + +<p>Cree un nuevo directorio, accese al directorio recien creado, y ejecute <code>cfx init</code>.</p> + +<p>Luego guarde estos tres iconos en el directrio "data":</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="height: 16px; width: 16px;"></td> + <td>icon-16.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="height: 32px; width: 32px;"></td> + <td>icon-32.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="height: 64px; width: 64px;"></td> + <td>icon-64.png</td> + </tr> + </tbody> +</table> + +<p>Luego abra el archivo llamado "main.js" en el directorio "lib" y agregue el siguiente código:</p> + +<pre class="brush: js">var buttons = require('sdk/ui/button/action'); +var tabs = require("sdk/tabs"); + +var button = buttons.ActionButton({ + id: "mozilla-link", + label: "Visit Mozilla", + icon: { + "16": "./icon-16.png", + "32": "./icon-32.png", + "64": "./icon-64.png" + }, + onClick: handleClick +}); + +function handleClick(state) { + tabs.open("https://www.mozilla.org/"); +}</pre> + +<p>Ahora ejecute el add-on con <code>cfx run</code>. El botón es agregado a la barra de herramientas en la parte superior de la ventana del navegador:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7641/mozilla-button.png" style="display: block; height: 221px; margin-left: auto; margin-right: auto; width: 382px;">Puede fijar la localización inicial del botón, pero el usuario puede moverlo usando la función para personalizar del navegador. El atributo <code>id</code> es obligatorio, y es usado para recordar la posición del botón, por lo tanto no debería cambiarse en las versiones siguientes del add-on.</p> + +<p>Hacer clic en el botón cargará la página <a href="https://www.mozilla.org/en-US/">https://www.mozilla.org/</a> en una nueva pestaña.</p> + +<h2 id="Especificar_el_icono">Especificar el icono</h2> + +<p>La propiedad del icono puede especificar un solo icono o una colección de iconos de diferentes tamaños, como en el ejemplo anterior. Si se especifica una colección de iconos de diferentes tamaños el navegador automáticamente seleccionará el que mejor se ajuste a la resolución de pantalla y el lugar en la IU del navegador que alberga el botón. <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#ActionButton(options)">Lea mas sobre especificar múltiples iconos.</a></p> + +<p>El archivo del icono debe ser empacado con el add-on: no debe referenciar a una archivo remoto.</p> + +<p>Puede cambiar el icono en cualquier momento estableciendo la propiedad del <code>icono</code> del botón. Puede cambiar el icono, y otros atributos de estado, incluso globalmente, para una ventana o pestaña específica. <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#Updating_state">Lea mas sobre la actualización de estado.</a></p> + +<h2 id="Fijando_un_panel">Fijando un panel</h2> + +<p>Si necesita fijar un panel a un botón, use la API<a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle"> toggle button</a>. Esta es similar a la API action button pero agrega la propiedad booleana <code>checked</code> cuyo estado cambia cuando el botón es seleccionado. Para fijar el panel, pase el botón al método <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel#show(options)"><code>show()</code></a> del panel. Para más detalles sobre esto, vea la <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle#Attaching_panels_to_buttons">documentación de toggle button</a>.</p> + +<h2 id="Mostrar_contenido_mas_sofisticado">Mostrar contenido mas sofisticado</h2> + +<p>Para crear interfaces de usuario más complejas de las que son posibles con solo un botón, use la AIP <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_toolbar">toolbar</a>. Con la API toolbar obtiene una franja horizontal completa de la interfaz de usuario. Puede agregar botones a la barra de herramientas y también <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_frame">marcos</a>, que pueden contener HTML, CSS, y JavaScript.</p> + +<h2 id="Aprender_más">Aprender más</h2> + +<ul> + <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">manual de referencia de action button</a></li> + <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">manual de referencia de toggle button</a></li> + <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_toolbar">manual referencia de toolbar</a></li> +</ul> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html b/files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html new file mode 100644 index 0000000000..8a65788a64 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html @@ -0,0 +1,164 @@ +--- +title: Mostrar una ventana emergente +slug: Mozilla/Add-ons/SDK/Tutorials/Display_a_Popup +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Display_a_Popup +--- +<div class="note"> +<p>Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</p> + +<p>Esta guía usa la API <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, la cual esta solo disponible para Firefox 29 en adelante.</p> +</div> + +<p>Para mostrar un dialogo emergente, se usa el modulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel"><code>panel</code></a>. El contenido de un panel se define usando HTML. Puede ejecutar scripts de contenido en el panel: aunque el script que se ejecuta en el panel no pueda acceder directamente al código principal del add-on, puede intercambiar mensajes entre el script del panel y el código del add-on.</p> + +<p>En esta guía se crea un add-on que agrega un botón de acción en la barra de herramientas, que al ser presionado muestra un panel. El panel solo contiene un elemento <code><textarea></code> : cuando se presiona la tecla <code>return</code>, el contenido del <code><textarea></code> es enviado al código principal del add-on. El código principal del add-on <a href="/en-US/Add-ons/SDK/Tutorials/Logging">registra el mensaje en la terminal</a>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7647/panel.png" style="display: block; margin-left: auto; margin-right: auto;">El add-on consta de seis archivos:</p> + +<ul> + <li><code>main.js</code>: el código principal del add-on, que crea el botón y el panel</li> + <li><code>get-text.js</code>: el script de contenido que interactua con el panel de contenido</li> + <li><code>text-entry.html</code>: el propio panel de contenido, especificado en código HTML</li> + <li><code>icon-16.png</code>, <code>icon-32.png</code>, y <code>icon-64.png</code>: iconos para el botón en tres tamaños diferentes</li> +</ul> + +<p>El archivo "main.js" contiene lo siguiente:</p> + +<pre class="brush: js">var data = require("sdk/self").data; +// Construct a panel, loading its content from the "text-entry.html" +// file in the "data" directory, and loading the "get-text.js" script +// into it. +var text_entry = require("sdk/panel").Panel({ + contentURL: data.url("text-entry.html"), + contentScriptFile: data.url("get-text.js") +}); + +// Create a button +require("sdk/ui/button/action").ActionButton({ + id: "show-panel", + label: "Show Panel", + icon: { + "16": "./icon-16.png", + "32": "./icon-32.png", + "64": "./icon-64.png" + }, + onClick: handleClick +}); + +// Show the panel when the user clicks the button. +function handleClick(state) { + text_entry.show(); +} + +// When the panel is displayed it generated an event called +// "show": we will listen for that event and when it happens, +// send our own "show" event to the panel's script, so the +// script can prepare the panel for display. +text_entry.on("show", function() { + text_entry.port.emit("show"); +}); + +// Listen for messages called "text-entered" coming from +// the content script. The message payload is the text the user +// entered. +// In this implementation we'll just log the text to the console. +text_entry.port.on("text-entered", function (text) { + console.log(text); + text_entry.hide(); +});</pre> + +<p>El script de contenido "get-text.js" muestra:</p> + +<div> +<pre class="brush: js">// When the user hits return, send the "text-entered" +// message to main.js. +// The message payload is the contents of the edit box. +var textArea = document.getElementById("edit-box"); +textArea.addEventListener('keyup', function onkeyup(event) { + if (event.keyCode == 13) { + // Remove the newline. + text = textArea.value.replace(/(\r\n|\n|\r)/gm,""); + self.port.emit("text-entered", text); + textArea.value = ''; + } +}, false); +// Listen for the "show" event being sent from the +// main add-on code. It means that the panel's about +// to be shown. +// +// Set the focus to the text area so the user can +// just start typing. +self.port.on("show", function onShow() { + textArea.focus(); +});</pre> + +<div> </div> +</div> + +<p>Finalmente, el archivo "text-entry.html" define el elemento <code><textarea></code> :</p> + +<div> +<div> +<pre class="brush: html"><html> +<head> + <style type="text/css" media="all"> + textarea { + margin: 10px; + } + body { + background-color: gray; + } + </style> + </head> +<body> + <textarea rows="13" cols="33" id="edit-box"></textarea> + </body> +</html></pre> + +<div> </div> +</div> +</div> + +<p>Por último, se guardan estos tres iconos en el directorio "data":</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="height: 16px; width: 16px;"></td> + <td>icon-16.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="height: 32px; width: 32px;"></td> + <td>icon-32.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="height: 64px; width: 64px;"></td> + <td>icon-64.png</td> + </tr> + </tbody> +</table> + +<p>Pruebe lo siguiente: el archivo "main.js" se encuentra en el directorio <code>lib</code> del add-on, y los otros cinco archivos el el directorio <code>data</code> :</p> + +<pre>my-addon/ + data/ + get-text.js + icon-16.png + icon-32.png + icon-64.png + text-entry.html + lib/ + main.js +</pre> + +<p>Ejecute el add-on, presione el botón, y debería poder ver el panel. Escriba algo en el cuadro de texto y presione "return" y verá la salida en la terminal.</p> + +<p>Desde Firefox 30 en adelante, si usa <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">botón del selección simple</a>, puede <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle#Attaching_panels_to_buttons">acoplar el panel al botón</a>.</p> + +<h2 id="Conozca_más">Conozca más</h2> + +<p>Para conocer más sobre el módulo <code>panel</code>, puede ver la <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel">referencia de la API</a> <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel"><code>panel</code></a>.</p> + +<p>Para conocer más sobre los botones, puede ver la referencia de la API <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> y <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">toggle button</a>.</p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html b/files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html new file mode 100644 index 0000000000..04c901f4f9 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html @@ -0,0 +1,214 @@ +--- +title: Primeros pasos +slug: Mozilla/Add-ons/SDK/Tutorials/Getting_started +translation_of: Mozilla/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29 +--- +<p>Este tutorial recorre los pasos para la creación de un add-on simple usando el SDK.</p> + +<h2 id="Requisitos_previos">Requisitos previos</h2> + +<p>Para crear add-ons para Firefox usando el SDK, primero es necesario seguir las instrucciones para <a href="/en-US/Add-ons/SDK/Tutorials/Installation" rel="noreferrer">instalar y activar el SDK</a>. Una vez hecho esto, se debe ir directamente a la terminal.</p> + +<h2 id="Inicializar_un_add-on_vacío">Inicializar un add-on vacío</h2> + +<p>En la terminal, cree un directorio nuevo. El directorio no tiene que estar bajo la raíz del SDK: puede crearlo donde quiera. Dirijase al directorio recién creado, escriba <code>cfx init</code>, y presione la tecla enter o intro:</p> + +<pre>mkdir my-addon +cd my-addon +cfx init +</pre> + +<p>Visualizará una salida como esta:</p> + +<pre>* lib directory created +* data directory created +* test directory created +* doc directory created +* README.md written +* package.json written +* test/test-main.js written +* lib/main.js written +* doc/main.md written +Your sample add-on is now ready for testing: +try "cfx test" and then "cfx run". Have fun!" +</pre> + +<h2 id="Implementar_el_add-on">Implementar el add-on</h2> + +<p>Ahora puede escribir el código del add-on, el cual se ubica en el archivo "main.js" en el directorio "lib". Este archivo fue creado en el paso anterior. Abra este archivo y agrege el siguiente código:</p> + +<pre class="brush: js">var buttons = require('sdk/ui/button/action'); +var tabs = require("sdk/tabs"); + +var button = buttons.ActionButton({ + id: "mozilla-link", + label: "Visit Mozilla", + icon: { + "16": "./icon-16.png", + "32": "./icon-32.png", + "64": "./icon-64.png" + }, + onClick: handleClick +}); + +function handleClick(state) { + tabs.open("https://www.mozilla.org/"); +} +</pre> + +<p>Guarde los cambios.</p> + +<p>Luego, guarde estos tres iconos en el directorio "data" :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="height: 16px; width: 16px;"></td> + <td>icon-16.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="height: 32px; width: 32px;"></td> + <td>icon-32.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="height: 64px; width: 64px;"></td> + <td>icon-64.png</td> + </tr> + </tbody> +</table> + +<p>Vuelva a la terminal y escriba:</p> + +<pre>cfx run +</pre> + +<p>Esta es la orden del SDK para ejecutar una nueva instancia de Firefox con el add-on instalado. Cuando el Firefox es presentado, en la esquina superior derecha se puede ver un ícono con el logo de Firefox. Al hacer clic en el ícono, se abrirá una pestaña nueva donde se cargará la página <a href="https://www.mozilla.org/" rel="noreferrer">https://www.mozilla.org/</a>.</p> + +<div class="note"> +<p>Es posible que vea un error como este al ejecutar cfx run:</p> + +<pre class="bz_comment_text" id="comment_text_0">A given cfx option has an inappropriate value: + ZIP does not support timestamps before 1980</pre> + +<p>De ser así, se ha encontrado con el <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1005412">bug 1005412</a>, lo que significa que los archivos de los iconos que ha descargado están arrojando una marca de tiempo de 1970. Hasta que este error sea resuelto, la solución es usar la orden <a href="http://www.linfo.org/touch.html"><code>touch</code></a> para actualizar la marca de tiempo:</p> + +<pre>touch icon-16.png</pre> +</div> + +<p>Esto es todo lo que este add-on hace. Usa dos módulos del SDK: el módulo <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, el cual permite agregar botones al navegador, y el módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a>, el cual permite llevar a cabo operaciones básicas con las pestañas. En este caso, se ha creado un botón cuyo icono es el logo de Firefox, y se le agregó un controlador que carga la página principal de Mozilla en una nueva pestaña al hacer clic en el icono.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7643/mozilla-button.png" style="display: block; height: 221px; margin-left: auto; margin-right: auto; width: 382px;">Intente editar este archivo. Por ejemplo, puede cambiar la página que es cargada:</p> + +<pre class="brush: js">var buttons = require('sdk/ui/button/action'); +var tabs = require("sdk/tabs"); + +var button = buttons.ActionButton({ + id: "mozilla-link", + label: "Visit Mozilla", + icon: { + "16": "./icon-16.png", + "32": "./icon-32.png", + "64": "./icon-64.png" + }, + onClick: handleClick +}); + +function handleClick(state) { + tabs.open("https://developer.mozilla.org/"); +}</pre> + +<p>En la terminal, ejecute de nuevo <code>cfx run</code>. Ahora al hacer clic en el ícono se cargará la página <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>.</p> + +<h2 id="Empaquetar_el_add-on">Empaquetar el add-on</h2> + +<p>Cuando el add-on este terminado y listo para distribuirse, será necesario empaquetarlo como un archivo XPI. Este es el formato de archivo de instalación para los add-ons de Firefox. Puede distribuir los archivos XPI por cuenta propia o publicarlos en <a href="https://addons.mozilla.org" rel="noreferrer">https://addons.mozilla.org</a> para que otros usuarios puedan descargarlos e instalarlos.</p> + +<p>Para construir un XPI, solo se debe ejecutar la orden <code>cfx xpi</code> desde el directorio del add-on:</p> + +<pre>cfx xpi +</pre> + +<p>Visualizará una salida como esta:</p> + +<pre>Exporting extension to my-addon.xpi. +</pre> + +<p>Para comprobar que funcione, intente instalar el archivo XPI en el Firefox instalado en su sistema. Lo puede hacer presionando la combinación de teclas Ctrl+O (Cmd+O en Mac) desde el Firefox, o seleccionando la opción "Abrir" desde el menú "Archivo" de Firefox. Esto abrirá un diálogo de selección; navegue hasta el archivo "my-addon.xpi", abra el archivo y siga las instrucciones para instalar el add-on.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>En este tutorial se ha construido y empaquetado un add-on usando tres órdenes:</p> + +<ul> + <li><code>cfx init</code> para inicializar una plantilla vacía para el add-on</li> + <li><code>cfx run</code> para ejecutar una instancia nueva de Firefox con el add-in instalado, para poder realizar pruebas</li> + <li><code>cfx xpi</code> para empaquetar el add-on en un archivo XPI para su distribución</li> +</ul> + +<p>Estas son las tres órdenes principales, usadas cuando se desarrollan add-ons con SDK. Existe una completa <a href="/en-US/Add-ons/SDK/Tools/cfx" rel="noreferrer">documentación de referencia</a> que cubre todas las órdenes que pueden ser usadas y todas sus opciones disponibles.</p> + +<p>El código del add-on usa dos módulos del SDK, <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> y <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a>. Existe una documentación de referencia para todas las APIs de <a href="/en-US/Add-ons/SDK/High-Level_APIs" rel="noreferrer">alto-nivel</a> y <a href="/en-US/Add-ons/SDK/Low-Level_APIs" rel="noreferrer">bajo-nivel</a> en el SDK.</p> + +<h2 id="Qué_sigue">Qué sigue?</h2> + +<p>Para tener una idea de lo que se puede hacer con las APIs del SDK, puede revisar alguno de estos <a href="/en-US/Add-ons/SDK/Tutorials" rel="noreferrer">tutoriales</a>.</p> + +<h2 id="Técnicas_avanzadas">Técnicas avanzadas</h2> + +<h3 id="Sobrescribiendo_los_módulos_integrados">Sobrescribiendo los módulos integrados</h3> + +<p>Los módulos del SDK que son usados para implementar un add-on están integrados en Firefox. Cuando se ejecuta o empaqueta un add-on usando <code>cfx run</code> o <code>cfx xpi</code>, el add-on usará las versiones de los módulos de la versión de Firefox que los aloja.</p> + +<p>Como desarrollador de add-on, esto es usualmente lo deseable. Pero si esta desarrollando los módulos del SDK, por supuesto, que no lo es. En este caso se asume que se accedió al SDK desde el repositorio de <a href="https://github.com/mozilla/addon-sdk" rel="noreferrer">GitHub</a> y se ejecutó la secuencia de comandos <a href="/en-US/Add-ons/SDK/Tutorials/Installation" rel="noreferrer">bin/activate</a> desde la raíz de checkout.</p> + +<p>Luego al aplicar <code>cfx run</code> or <code>cfx xpi</code>, se agrega la opción "-o":</p> + +<pre>cfx run -o +</pre> + +<p>Esto le indica a cfx a usar las copias locales de los módulos del SDK, y no aquellas en Firefox.</p> + +<h3 id="Desarrollar_sin_cfx_run">Desarrollar sin cfx run</h3> + +<p>Debido a que <code>cfx run</code> reinicia el navegador cada vez que es invocado, en ocasiones puede resultar un poco incómodo si se realizan cambios frecuentes al add-on. Un modelo alternativo de desarrollo es usar el add-on <a href="https://addons.mozilla.org/en-US/firefox/addon/autoinstaller/" rel="noreferrer">Extension Auto-Installer</a>: el cual esta atento a la existencia de nuevos archivos XPI en un puerto determinado y los instala automáticamente. De esta manera se pueden probar los cambios realizados sin necesidad de reiniciar el navegador:</p> + +<ul> + <li>haga un cambio en el add-on</li> + <li>ejecute cfx xpi</li> + <li>coloque el add-on a<span class="rangySelectionBoundary" id="selectionBoundary_1424221520004_6724972203681473" style="display: none; line-height: 0;"></span>l puerto especificado</li> +</ul> + +<p>Incluso, se puede automatizar este proceso con una simple secuencia de comandos.<span class="rangySelectionBoundary" id="selectionBoundary_1424221645966_1440660097593104" style="display: none; line-height: 0;"></span> Por ejemplo:</p> + +<pre>while true ; do cfx xpi ; wget --post-file=codesy.xpi http://localhost:8888/ ; sleep 5 ; done +</pre> + +<p>Nótese que el nivel de acceso definido para la terminal cuando se usa este método es diferente, comparado con el nivel de acceso usado cuando un add-on es ejecutado usando <code>cfx run</code>. Esto significa que si se desea ver la salida desde los mensajes de <a href="/en-US/Add-ons/SDK/Tutorials/Logging" rel="noreferrer"><code>console.log()</code></a>, se debe modificar la configuración. Vea la documentación en <span class="rangySelectionBoundary" id="selectionBoundary_1424222319862_9715120149565866" style="display: none; line-height: 0;"></span><a href="/en-US/Add-ons/SDK/Tools/console#Logging_Levels" rel="noreferrer">niveles de acceso</a> para más detalles.</p> + +<p>Otra alternativa es con el uso de <a href="http://gruntjs.com/">grunt</a> y <a href="https://www.npmjs.com/package/grunt-shell">grunt-shell</a>:</p> + +<pre class="brush: js">module.exports = function(grunt) { + 'use strict'; + require('matchdep').filterDev('grunt-!(cli)').forEach(grunt.loadNpmTasks); + grunt.initConfig({ + shell: { + xpi: { + command: [ + 'cd pluginpath', + 'cfx xpi', + 'wget --post-file=pluginname.xpi http://localhost:8888/ || echo>/dev/null' + ].join('&&') + } + }, + watch: { + xpi: { + files: ['pluginpath/**'], + tasks: ['shell:xpi'] + } + } + }); + + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-shell'); + grunt.registerTask('default', ['watch']); +};</pre> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/index.html b/files/es/mozilla/add-ons/sdk/tutorials/index.html new file mode 100644 index 0000000000..478d88d56a --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/index.html @@ -0,0 +1,146 @@ +--- +title: Tutoriales +slug: Mozilla/Add-ons/SDK/Tutorials +tags: + - Add-on SDK + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials +--- +<p>Esta página lista prácticos artículos funcionales sobre como lograr realizar tareas específicas usando SDK.</p> + +<hr> +<h3 id="Primeros_pasos"><a name="getting-started">Primeros pasos</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Installation">Instalación </a></dt> + <dd>Descargar, instalar, e inicializar el SDK en Windows, OS X y Linux.</dd> +</dl> + +<dl> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Troubleshooting">Resolución de problemas </a></dt> + <dd>Algunos consejos para solucionar problemas comunes y obtener más ayuda.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Getting_started">Primeros pasos </a></dt> + <dd>Guía paso a paso para la creación de un add-on simple con SDK.</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="Crear_interfaces_de_usuario"><a name="create-user-interfaces">Crear interfaces de usuario</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">Agregar un botón a la barra de herramientas</a></dt> + <dd>Fijar un botón a la barra de herramientas de Add-on de Firefox.</dd> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Agregar una opción de menú en Firefox </a></dt> + <dd>Agregar opciones a los menú principales de Firefox.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Display_a_Popup">Mostrar una ventana emergente </a></dt> + <dd>Mostrar una ventana de dialogo emergente implementando HTML y JavaScript.</dd> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">Agregar una opción al menú contextual</a></dt> + <dd>Agregar opciones al menú contextual de Firefox</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="Interactuar_con_el_navegador"><a name="interact-with-the-browser">Interactuar con el navegador</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Open_a_Web_Page">Abrir una página web </a></dt> + <dd>Abrir una página web en una nueva pestaña o ventana del navegador usando el modulo de pestañas, y accediendo a su contenido.</dd> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Listen_for_Page_Load">Atender las cargas de página</a></dt> + <dd>Usar el módulo de pestañas para recibir notificaciones cuando una página web nueva sea cargada, y acceder a su contenido.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/List_Open_Tabs">Obtener la lista de las pestañas abiertas</a></dt> + <dd>Usar el módulo de pestañas para recorrer las pestañas abiertas actualmente, y acceder a su contenido.</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="Modificar_páginas_web"><a name="modify-web-pages">Modificar páginas web</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">Modificar páginas web basándose en el URL</a></dt> + <dd>Crear filtro para páginas web basándose en el URL: siempre que una página web cuyo URL coincida con el filtro cargado, ejecuta una secuencia de comandos específica en él.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">Modificar la página web activa</a></dt> + <dd>Cargar de forma dinámica una secuencia de comandos dentro de la página web activa.</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="Técnicas_de_desarrollo"><a name="development-techniques">Técnicas de desarrollo</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Logging">Registro de actividad</a></dt> + <dd>Registrar los mensajes a la terminal con propósitos de diagnósticos.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Creating_reusable_modules">Crear módulos reusables</a></dt> + <dd>Estructurar el add-on en módulos separados para hacer más fácil el desarrollo, depuración, y mantenimiento. <span class="rangySelectionBoundary" id="selectionBoundary_1422581870550_1450407927374966" style="display: none; line-height: 0;"></span>Crear paquetes reusables que contengan los módulos, de esta manera otros desarrolladores puedan usarlos también.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">Pruebas unitarias </a></dt> + <dd>Escribir y ejecutar pruebas unitarias usando el marco de trabajo para pruebas de SDK.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Chrome_authority">Autoridad Chrome </a></dt> + <dd>Ganar acceso al objeto Components, permitiendo al add-on cargar y usar el objeto XPCOM.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Creating_event_targets">Creando destinos del evento</a></dt> + <dd>Permite a los objetos definidos emitir sus propios eventos.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Listening_for_load_and_unload">Encargarse de las cargas y descargas</a></dt> + <dd>Obtener las notificaciones cuando el add-on sea cargado y descargado por Firefox, y pasar argumentos en el add-on desde la terminal.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Usar módulos externos (jpm)</a></dt> + <dd>Instalar y usar módulos adicionales que no son entregados con el SDK.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/l10n">Localización </a></dt> + <dd>Escribir código que pueda ser adaptado a otro idioma.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">Desarrollo Móbil</a></dt> + <dd>Desarrollar add-ons para Firefox Móbil en Android.</dd> + <dt><a href="/en-US/Add-ons/Add-on_Debugger">Depurador de Add-on</a></dt> + <dd>Depurar el código JavaScript del add-on.</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="Juntando_todo"><a name="putting-it-together">Juntando todo</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Annotator">Add-on Anotador</a></dt> + <dd>Un manual de un add-on relativamente complejo.</dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/installation/index.html b/files/es/mozilla/add-ons/sdk/tutorials/installation/index.html new file mode 100644 index 0000000000..655c6e098f --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/installation/index.html @@ -0,0 +1,145 @@ +--- +title: Instalación +slug: Mozilla/Add-ons/SDK/Tutorials/Installation +tags: + - Guía + - Principiante +translation_of: Mozilla/Add-ons/SDK/Tools/jpm#Installation +--- +<h2 id="Requerimientos_previos">Requerimientos previos</h2> + +<p>Para desarrollar add-ons usando el SDK Add-o, necesitaras:</p> + +<ul> + <li><a href="http://www.python.org/">Python</a> 2.5, 2.6 o 2.7. Hay que tener encuenta que las versiones 3.x de Python no son soportadas en ninguna plataforma. Asegurte que Python se encuentre en la ruta del sistema.</li> + <li>Firefox.</li> + <li>El propio SDK: puedes decargar la última versión estable del SDK como un <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.tar.gz">tarball</a> o como un <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.zip">archivo zip</a>.</li> +</ul> + +<h2 id="Instalación">Instalación</h2> + +<h3 id="Instalación_en_OS_X_FreeBSD_Linux">Instalación en OS X, FreeBSD, Linux</h3> + +<p>Extrae el contenido del archivo en el lugar de tu preferencia, y navega hasta el directorio principal del SDK con una shell/command prompt. Por ejemplo:</p> + +<pre>tar -xf addon-sdk.tar.gz +cd addon-sdk +</pre> + +<p>Luego, si eres un usuario Bash, ejecuta:</p> + +<pre>source bin/activate +</pre> + +<p>Si no eres un usuario Bash, debes ejecutar:</p> + +<pre>bash bin/activate +</pre> + +<p>En la línea de entrada de tu terminal ahora deberías tener un prefijo con el nombre del directorio raíz del SDK:</p> + +<pre>(addon-sdk)~/mozilla/addon-sdk > +</pre> + +<p>La orden <code>activate</code> establece algunas variables de entorno necesarias para el SDK. Establece las variables solo para la terminal actual. Si abres una terminal nueva, el SDK no estará activo hasta que ejecutes nuevamente <code>activate</code>. Si deseas una activación permanente, dirigete a <a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Installation#Establecer_activate_permanentemente">Establecer activate permanentemente</a> mas abajo.</p> + +<h3 id="Instalación_en_OS_X_usando_Homebrew">Instalación en OS X usando Homebrew</h3> + +<p>Si usas Mac, puedes usar <a href="http://brew.sh/">Homebrew</a> para instalar el SDK, usando la siguiente orden:</p> + +<pre>brew install mozilla-addon-sdk</pre> + +<p>Una vez que el proceso se haya completado satisfactoriamente, puedes usar el programa <code>cfx</code> en tu línea de órdenes en cualquier momento: no necesitas ejecutar bin/activate.</p> + +<h3 id="Instalación_en_Windows">Instalación en Windows</h3> + +<p>Extrae el contenido del archivo en el lugar de tu peferencia, y navega hasta el directorio principal de SDK con la terminal. Por ejemplo:</p> + +<pre>7z.exe x addon-sdk.zip +cd addon-sdk +</pre> + +<p>Luego ejecuta:</p> + +<pre>bin\activate +</pre> + +<p>En la línea de entrada de tu terminal ahora deberías tener un prefijo con el nombre completo del directorio raíz del SDK:</p> + +<pre>(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk> +</pre> + +<p>La orden <code>activate</code> establece algunas variables de entorno necesarias para el SDK. Establece las variables solo para la terminal actual. Si abres una terminal nueva, el SDK no estará activo hasta que ejecutes nuevamente <code>activate</code>. Si deseas una activación permanente, dirigete a <a href="/es-ES/Add-ons/SDK/Tutorials/Installation#Establecer_activate_permanentemente">Estableciendo activate permanentemente</a> mas abajo.</p> + +<h2 id="Verificar_congruencia">Verificar congruencia</h2> + +<p>Ejecuta esto en tu terminal:</p> + +<pre class="language-html"><code class="language-html">cfx</code></pre> + +<p>Esto debería arrojar una salida cuyas primeras lineas deberían verse algo parecido a esto, seguidas de muchas línas de información útil:</p> + +<pre class="language-html">Usage: cfx [options] [command]</pre> + +<p>Este es el <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/cfx">programa de la línea de órdnes<code> cfx</code></a>. Es tu principal interfaz con el Add-on SDK. Lo usas para ejecutar Firefox y probar tu add-on, empaquetar tu add-on para distribuirlo, ver documentación, y ejecutar pruebas unitarias.</p> + +<p>Si no puedes ver esto, dirigete a la página <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Troubleshooting">Resolución de problemas</a>.</p> + +<h2 id="Próximos_Pasos">Próximos Pasos</h2> + +<p>Ahora, dale un vistazo al tutorial <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">Comenzando con cfx</a>, en el cual se explica como crear add-ons usando la herramienta<code> cfx</code>.</p> + +<h2 id="Tópicos_avanzados">Tópicos avanzados</h2> + +<h3 id="Usar_el_SDK_desde_Git">Usar el SDK desde Git</h3> + +<p>El SDK es desarrollado en GitHub. En vez de usar versiones en archivos comprimidos, puedes echar un vistazo al <a href="https://github.com/mozilla/addon-sdk">repositorio GitHub</a>: con esto puedes usar la última versión de desarrollo en vez de usar el lanzamiento oficial.</p> + +<p>Si usas la última versión de desarrollo, debes usarla con la versión Nightly de Firefox, y no podrás enviar a <a href="https://addons.mozilla.org/">addons.mozilla.org</a> (AMO) ningún add-ons que desarrolles, porque AMO solicita que uses el lanzamiento oficial.</p> + +<h4 id="Desarrollar_add-ons_para_AMO_desde_Git">Desarrollar add-ons para AMO desde Git</h4> + +<p>Si deseas desarrollar add-ons que puedan ser admitidos en AMO usando Git, entonces deberás:</p> + +<ul> + <li>usar el último lanzamiento etiquetado en git de las fuentes de addon-sdk</li> + <li>ejecutar la orden <code>git archive</code> para ampliar algunos atributos de marcado de posición de git dentro de un directorio activo clonado de git.</li> +</ul> + +<pre>git checkout 1.17 + +git archive 1.17 python-lib/cuddlefish/_version.py | tar -xvf -</pre> + +<h3 id="Establecer_activate_permanentemente">Establecer <code>activate</code> permanentemente</h3> + +<p>La orden <code>activate</code> establece algunas variables de entorno necesarias para el SDK. Establece las variables solo para la terminal actual. Si abres una terminal nueva, el SDK no estará activo hasta que ejecutes nuevamente <code>activate</code>.</p> + +<p>Esto significa que puedes tener multiples copias del SDK en diferentes partes del disco y cambiar entre ellas, o incluso tenerlas activas al mismo tiempo en diferentes terminales.</p> + +<p>Estableciendo estas variables de forma permanente en tu entorno para que cada nueva terminal pueda leerlas, podrás hacer que la activación sea permanente. Por lo tanto no tendrás que ejecutar <code>activate</code> cada vez que habrás una nueva terminal.</p> + +<p>Debido a que el conjunto exacto de variables pueden cambiar en nuevas versiones del SDK, lo mejor es consultar la secuencia de órdenes de activación para determinar cuales variables deben ser establecidas. La activación usa diferentes secuencias de órdenes de activación para entornos bash (Linux and OS X) y ambientes Windows .</p> + +<h4 id="Windows">Windows</h4> + +<p>En Windows, <code>bin\activate</code> usa <code>activate.bat</code>, y puedes hacer la activación permanente usando la herramienta <code>setx</code> d<span class="rangySelectionBoundary" id="selectionBoundary_1422498066697_8666912371422392" style="line-height: 0; display: none;"></span>e la terminal o el Panel de Control.</p> + +<p><strong>Pasos para el establecimiento permanente:</strong></p> + +<p style="margin-left: 40px;">Paso 0. Abre el Panel de Control > Sistema > Avanzado > Variables de Entorno.<br> + Paso 1. Agrega el directorio Python y el directorio SDK\bin a la Variable de la Ruta del Sistema.<br> + Path=...;C:\PYTHON26\;C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15\bin<br> + Paso 2. Agrega una Variable de usuario llamada CUDDLEFISH_ROOT y establece su valor a "C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15"<br> + <span class="rangySelectionBoundary" id="selectionBoundary_1422498317458_12282345591345756" style="line-height: 0; display: none;"></span>Paso 3. Agrega una Variable de usuario llamada PYTHONPATH y establece su valor a "C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15\python-lib"<br> + Paso 4. Agrega una Variable de usuario llamada VIRTUAL_ENV y establece su valor a "C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15"</p> + +<h4 id="Linux_OS_X">Linux / OS X</h4> + +<p>En Linux y OS X, <code>source bin/activate</code> usan la secuencia de órdenes bash <code>activate</code>, y puedes hacer la activación permanente usando tu <span class="rangySelectionBoundary" id="selectionBoundary_1422498499239_3642049718896089" style="line-height: 0; display: none;">tu </span> <code>~/.bashrc</code> (en Linux) o <code>~/.bashprofile</code> (en OS X).</p> + +<p>Como alternativa a esto, puedes crear un enlace simbólico al programa <code>cfx</code> en tu directorio <code>~/bin</code>:</p> + +<pre>ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx +</pre> + +<p>Si usaste Homebrew para instalar SDK, las variables de entorno ya estan establecidas permanentemente.</p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html b/files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html new file mode 100644 index 0000000000..e817b40495 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html @@ -0,0 +1,66 @@ +--- +title: Obtener la lista de las pestañas abiertas +slug: Mozilla/Add-ons/SDK/Tutorials/List_Open_Tabs +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/List_Open_Tabs +--- +<div class="note"> +<p>Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</p> + +<p>Este ejemplo usa la API <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, la cual esta solo disponible para Firefox 29 en adelante.</p> +</div> + +<p>Para listar las pestañas abiertas, se puede iterar sobre el mismo objeto<code> </code><a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a>.</p> + +<p>El siguiente add-on agrega un <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> que registra las URLs de las pestañas abiertas cuando el/la usuario/a hacen click en el:</p> + +<pre class="brush: js">require("sdk/ui/button/action").ActionButton({ + id: "list-tabs", + label: "List Tabs", + icon: "./icon-16.png", + onClick: listTabs +}); + +function listTabs() { + var tabs = require("sdk/tabs"); + for (let tab of tabs) + console.log(tab.url); +} +</pre> + +<p>Observe que para hacer que esto funcione debe guardar un icono para el botón al directorio "data" del add-on con el nombre de "icon-16.png": puede descargarlo de aqui: <img alt="" src="https://mdn.mozillademos.org/files/7649/icon-16.png" style="height: 16px; width: 16px;">.</p> + +<p>Ejecute el add-on, cargue algunas pestañas y hace click en el botón. Verá en la <a href="/en-US/Add-ons/SDK/Tutorials/Logging">terminal</a> una salida similar a esta:</p> + +<pre>info: http://www.mozilla.org/en-US/about/ +info: http://www.bbc.co.uk/ +</pre> + +<p>No tiene acceso directo a ningún contenido de la pestaña. Para acceder al contenido de la pestaña necesita adjuntar un script usando <code>tab.attach()</code>. Este add-on adjunta un script a todas las pestañas abiertas. El script agrega un borde rojo al documento de la pestaña:</p> + +<pre class="brush: js">require("sdk/ui/button/action").ActionButton({ + id: "list-tabs", + label: "List Tabs", + icon: "./icon-16.png", + onClick: listTabs +}); + +function listTabs() { + var tabs = require("sdk/tabs"); + for (let tab of tabs) + runScript(tab); +} + +function runScript(tab) { + tab.attach({ + contentScript: "document.body.style.border = '5px solid red';" + }); +} +</pre> + +<h2 id="Conozca_más">Conozca más</h2> + +<p>Para conocer más sobre las pestañas en el SDK, puede dirigirse a la <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs">referencia de </a><a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code> en la API</a>.</p> + +<p>Para conocer mas sobre la ejecución de scripts en las pestañas, puede diregirse a<a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach(options)"> </a><a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach(options)">usando <code>tab.attach()</code></a><a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach(options)"> en el tutorial</a>.</p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html b/files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html new file mode 100644 index 0000000000..99642fade4 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html @@ -0,0 +1,38 @@ +--- +title: Atender las cargas de página +slug: Mozilla/Add-ons/SDK/Tutorials/Listen_for_Page_Load +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Listen_for_Page_Load +--- +<div class="note">Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</div> + +<p>Se pueden obtener notificaciones sobre la carga de nuevas paǵinas a través del módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a>. El siguiente add-on escucha el evento integrado de la pestaña <code>ready</code> y simplemente registra el URL de cada pestaña en la medida que el/la usuario/a realiza la carga:</p> + +<pre class="brush: js">require("sdk/tabs").on("ready", logURL); + +function logURL(tab) { + console.log(tab.url); +} +</pre> + +<p>No se obtiene acceso directo a ningún contenido de la pestaña.</p> + +<p>Para acceder al contenido de la pestaña se necesita adjuntar un script a la pestaña usando <code>tab.attach()</code>. Este add-on adjunto un script para abrir todas las pestañas. El script agrega un borde rojo al documento de la pestaña:</p> + +<pre class="brush: js">require("sdk/tabs").on("ready", runScript); + +function runScript(tab) { + tab.attach({ + contentScript: "if (document.body) document.body.style.border = '5px solid red';" + }); +} +</pre> + +<p>(Este ejemplo es solo para mostrar la idea: para implementar algo como esto, se debería usar <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod"><code>page-mod</code></a>, y especificar un "*" como el patron de coincidencia.)</p> + +<h2 id="Conozca_más">Conozca más</h2> + +<p>Para conocer más sobre las pestañas en el SDK, puede dirigirse a la <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">referencia de </a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code> en la API</a>. Puede escuchar varios eventos relacionados con las pestañas incluyendo <code>open</code>, <code>close</code>, y <code>activate</code>.</p> + +<p>Para conocer mas sobre la ejecución de scripts en las pestañas, puede diregirse a<a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29"> </a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29">usando <code>tab.attach()</code></a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29"> en el tutorial</a>.</p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html b/files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html new file mode 100644 index 0000000000..08a0a80224 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html @@ -0,0 +1,135 @@ +--- +title: Modificar la página web activa +slug: Mozilla/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab +--- +<div class="note"> +<p>Para seguir esta guía. necesita <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalar el add-on SDK</a> y saber lo <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_(jpm)">basico sobre <code>jpm</code></a> (para Firefox 38 en adelante) o lo <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">basicp sobre <code>cfx</code></a> .</p> + +<p>Esta guía usa la API <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, la cual esta disponible para Firefox 29 en adelante.</p> +</div> + +<p>Para modificar la página web activa, se carga uno o mas <em>scripts de contenido</em> dentro de ella usando el método <code>attach()</code> del objeto <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs">tab</a>. El trabajo de estos scripts es interactuar con el contenido de la web.</p> + +<p>Aquí se muestra un ejemplo simple:</p> + +<pre class="brush: js">var button = require("sdk/ui/button/action").ActionButton({ + id: "style-tab", + label: "Style Tab", + icon: "./icon-16.png", + onClick: function() { + require("sdk/tabs").activeTab.attach({ + contentScript: 'document.body.style.border = "5px solid red";' + }); + } +});</pre> + +<p>Para ejecutar este ejemplo, se guarda el icono llamado "icon-16.png" en el directorio "data" del add-on. Puede descargar este icono: <img alt="" src="https://mdn.mozillademos.org/files/7661/icon-16.png" style="height: 16px; width: 16px;">.</p> + +<p>Este add-on crea un botón con el icono de Mozilla. Este tienen un controlador de eventos del ratón el cual busca la pestaña activa y carga un script dentro de la página activa. El script es especificado usando la opción <code>contentScript</code>, y simplemente dibuja un borde rojo alrededor de la página.</p> + +<p>Abra cualquier página web en el navegador, y haga clic en el botón. Deberá poder ver un borde rojo que aparecerá alrededor de la página, como este:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6531/tabattach-bbc.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Mantener_los_Scripts_de_Contenido_en_un_archivo_diferente">Mantener los Scripts de Contenido en un archivo diferente</h2> + +<p>En el ejemplo anterior, hemos pasado el contenido del script como una cadena.</p> + +<p>A menos que el script sea extremadamente simple, manten el script como un archivo separado en el directorio <code>data</code> del add-on. Esto hace que el código sea más fácil de mantener, depurar, y revisar. Para hacer esto, utiliza la opción <code>contentScriptFile</code> y no <code>contentScript</code>, cuyos valores es una URL que apunta a uno o varios archivos con el contenido de los scripts.</p> + +<p>Por ejemplo, si guardamos el script anterior bajo el directorio <code>data</code> del add-on en un archivo llamado <code>my-script.js</code>:</p> + +<pre class="brush: js">var self = require("sdk/self"); + +var button = require("sdk/ui/button/action").ActionButton({ + id: "style-tab", + label: "Style Tab", + icon: "./icon-16.png", + onClick: function() { + require("sdk/tabs").activeTab.attach({ + contentScriptFile: self.data.url("my-script.js") + }); + } +}); +</pre> + +<p>Puedes cargar mas de un script, y los scripts pueden interactuar directamente entre ellos. Por lo tanto puede cargar <a href="http://jquery.com/">jQuery</a>, y luego tu script de contenido puede usarlo.</p> + +<h2 id="Cargar_varios_archivo_de_script_de_contenido">Cargar varios archivo de script de contenido</h2> + +<p>Los datos asignados a <code>contentScriptFile</code> pueden ser un vector. Los scripts serán cargados en el mismo orden del vector.</p> + +<p>En el siguiente ejemplo, estamos cargando dos scripts, <code>first.js</code> & <code>second.js</code>. Ambos scripts serán ejecutados en el mismo contexto, por lo tanto todo lo definido como publico en <code>first.js</code> será accedible desde <code>second.js</code>.</p> + +<pre class="brush: js">// lib/main.js + +var self = require("sdk/self"); +var tabs = require("sdk/tabs"); + +require("sdk/ui/button/action").ActionButton({ + id: "load-several", + label: "load several scripts", + icon: "./icon-16.png", + onClick: function () { + tabs.activeTab.attach({ + contentScriptFile: [self.data.url('first.js'), + self.data.url('second.js')] + }); + } +}); +</pre> + +<h2 id="Comunicación_con_los_Scripts_de_Contenido">Comunicación con los Scripts de Contenido</h2> + +<p>Tu script del add-on tus scripts de contenido no pueden acceder directamente a las variables del otro o llamar a las funciones del otro, pero pueden enviarse mensajes entre ellos.</p> + +<p>Para enciar un mensaje de un lado a otro, el remitente llama a <code>port.emit()</code> y el receptor escucha usando <code>port.on()</code>.</p> + +<ul> + <li>En el script de contenido, <code>port</code> es una propiedad del objeto global <code>self</code>.</li> + <li>En el script del add-on, <code>tab.attach()</code> revuelve un objeto <a href="/en-US/Add-ons/SDK/Low-Level_APIs/content_worker">worker</a> que contiene la propiedad <code>port</code> que usaste para enviar los mensajes al script de contenido.</li> +</ul> + +<p>Re escribamos el ejemplo anterior para pasar un mensaje desde el add-on al script de contenido.</p> + +<p>El script de contenido debe verse así_</p> + +<pre class="brush: js">// "self" is a global object in content scripts +// Listen for a "drawBorder" +self.port.on("drawBorder", function(color) { + document.body.style.border = "5px solid " + color; +}); +</pre> + +<p>En el script del add-on, enviaremos un mensaje "drawBorder" al script de contenido usando el objeto devuelto desde <code>attach()</code>:</p> + +<pre class="brush: js">var self = require("sdk/self"); +var tabs = require("sdk/tabs"); + +var button = require("sdk/ui/button/action").ActionButton({ + id: "style-tab", + label: "Style Tab", + icon: "./icon-16.png", + onClick: function() { + var worker = tabs.activeTab.attach({ + contentScriptFile: self.data.url("my-script.js") + }); + worker.port.emit("drawBorder", "red"); + } +}); +</pre> + +<p>El mensaje <code>drawBorder</code> no es un mensaje construido, es un mensaje que el add-on define en la llamada <code>port.emit()</code>.</p> + +<h2 id="Inyectando_CSS">Inyectando CSS</h2> + +<p>Al contrario de la API <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod"><code>page-mod</code></a>, <code>tab.attach()</code> no te permite inyectar CSS directamente dentro de la página.</p> + +<p>Para modificar el estilo de la página, tienes que usar Javascript, como en el ejemplo anteriot.</p> + +<h2 id="Aprender_más">Aprender más</h2> + +<p>Para aprender más sobre el trabajo con pestañas en el SDK, puede ver la guía <a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Open a Web Page</a>, la guía <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">List Open Tabs</a>, y la <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code> API reference</a>.</p> + +<p>Para aprender mpas sobre los scripts de contenido, puede ver <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">content scripts guide</a>.</p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html b/files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html new file mode 100644 index 0000000000..e20146d84d --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html @@ -0,0 +1,227 @@ +--- +title: Modificar páginas web basándose en el URL +slug: Mozilla/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Modifying_Web_Pages_Based_on_URL +--- +<div class="note">Para realizar los pasos que se describen a continuación es necesario tener <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_(jpm)">básicos de <code>jpm</code></a> (Firefox 38 en adelante) o <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx"><code>cfx</code></a>.</div> + +<p>Para modificar cualquier página que coincida con un patrón en particular (por ejemplo, "http://example.org/") mientras es cargada, se usa el módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod"><code>page-mod</code></a>.</p> + +<p>Para crear un page-mod, es necesario especificar dos cosas:</p> + +<ul> + <li>Uno o más <em>scripts de contenido</em> para ser ejecutados cuyo trabajo es interactuar con el contenido web.</li> + <li>Uno o más <em>patrones</em> para hacer coincidir con las URLs de las páginas que se desea modificar.</li> +</ul> + +<p>El siguiente es un fragmento de código donde el script de contenido es provisto como una opción de <code>contentScript</code> y el patrón de URL es dado como una opción de <code>include</code>:</p> + +<pre class="brush: js">// Import the page-mod API +var pageMod = require("sdk/page-mod"); + +// Create a page-mod +// It will run a script whenever a ".org" URL is loaded +// The script replaces the page contents with a message +pageMod.PageMod({ + include: "*.org", + contentScript: 'document.body.innerHTML = ' + + ' "<h1>Page matches ruleset</h1>";' +}); +</pre> + +<p>Haga lo siguiente:</p> + +<ul> + <li>Cree un nuevo directorio e ingrese en el.</li> + <li>Ejecute <code>jpm init </code>o <code>cfx init</code></li> + <li>Abra el archivo<code> index.js</code> y agregue el código anterior (si usa <code>cfx, lib/main.js</code>)</li> + <li>Ejecute <code>jpm run </code>o<code> cfx run</code>.</li> + <li>Abra en el navegador la página <a href="http://www.ietf.org">ietf.org.</a></li> +</ul> + +<p>Abajo se muestra lo que debe poder ver.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6537/pagemod-ietf.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Especificar_el_Patrón_de_Coincidencia">Especificar el Patrón de Coincidencia</h2> + +<p>El patrón de coincidencia usa la sintaxis <a href="/en-US/Add-ons/SDK/Low-Level_APIs/util_match-pattern"><code>match-pattern</code></a>. Se puede definir un patrón de coincidencia como una única cadena o una matriz.</p> + +<h2 id="Mantener_el_Script_de_Contenido_en_un_Archivo_Separado">Mantener el Script de Contenido en un Archivo Separado</h2> + +<p>En el ejemplo anterior, se definió el script de contenido como una cadena de caracteres.</p> + +<p>A menos que el script sea muy simple, se debe mantener el script en un archivo separado. Esto hace al código más fácil de mantener, depurar, y revisar. Para hacer esto es necesario:</p> + +<ul> + <li>Guardar el script en el directorio <code>data</code> del add-on.</li> + <li>Usar la opción <code>contentScriptFile</code> en vez de <code>contentScript</code> y pasar ls URL del script la cual puede ser obtenida usando <code>self.data.url("my-script.js")</code>. Para Firefox 34 en adelante, se puede usar <code>"./my-script.js"</code>.</li> +</ul> + +<p>Por ejemplo, si se guarda el script anterior en un archivo llamado <code>my-script.js </code>bajo el directorio <code>data</code> del add-on:</p> + +<pre class="brush: js">// Import the page-mod API +var pageMod = require("sdk/page-mod"); +// Import the self API +var self = require("sdk/self"); + +// Create a page-mod +// It will run a script whenever a ".org" URL is loaded +// The script replaces the page contents with a message +pageMod.PageMod({ + include: "*.org", + contentScriptFile: self.data.url("my-script.js") +});</pre> + +<p>O para Firefox 34 en adelante:</p> + +<pre class="brush: js">// Import the page-mod API +var pageMod = require("sdk/page-mod"); + +// Create a page-mod +// It will run a script whenever a ".org" URL is loaded +// The script replaces the page contents with a message +pageMod.PageMod({ + include: "*.org", + contentScriptFile: "./my-script.js" +});</pre> + +<h2 id="Cargar_Múltiples_Scripts_de_Contenido">Cargar Múltiples Scripts de Contenido</h2> + +<p>Es posible cargar mas de un script, y los scripts pueden interactuar directamente.</p> + +<p>Por ejemplo, se puede reescribir <code>my-script.js</code> para usar jQuery.</p> + +<pre class="brush: js">$("body").html("<h1>Page matches ruleset</h1>"); +</pre> + +<p>Luego se descarga jQuery al directorio <code>data</code> del add-on, y se carga conjuntamente el script y el jQuery (asegurándose de cargar primero el jQuery).</p> + +<pre class="brush: js">// Import the page-mod API +var pageMod = require("sdk/page-mod"); +// Import the self API +var self = require("sdk/self"); + +// Create a page mod +// It will run a script whenever a ".org" URL is loaded +// The script replaces the page contents with a message +pageMod.PageMod({ + include: "*.org", + contentScriptFile: [self.data.url("jquery-1.7.min.js"), self.data.url("my-script.js")] +}); +</pre> + +<p>Se puede usar <code>contentScript</code> y <code>contentScriptFile</code> juntos en el mismo page-mod. Si se hace esto, los script cargados usando <code>contentScriptFile</code> son cargados primero.</p> + +<pre class="brush: js">// Import the page-mod API +var pageMod = require("sdk/page-mod"); +// Import the self API +var self = require("sdk/self"); + +// Create a page-mod +// It will run a script whenever a ".org" URL is loaded +// The script replaces the page contents with a message +pageMod.PageMod({ + include: "*.org", + contentScriptFile: self.data.url("jquery-1.7.min.js"), + contentScript: '$("body").html("<h1>Page matches ruleset</h1>");' +}); +</pre> + +<p>Note, sin embargo, que no es posible cargar un script desde un sitio web. El script debe ser cargado desde el directorio d<code>ata</code>.</p> + +<h2 id="Comunicarse_con_el_Script_de_Contenido">Comunicarse con el Script de Contenido</h2> + +<p>El script del add-on y los scripts de contenido no pueden acceder directamente a las variables o llamar a las funciones de los demás, pero pueden enviar mensajes.</p> + +<p>Para enviar un mensaje de un lado a otro, el emisor llama a <code>port.emit()</code> y el receptor escucha usando <code>port.on()</code>.</p> + +<ul> + <li>En el script de contenido, <code>port</code> es una propiedad del objeto global <code>self</code>.</li> + <li>En el script del add-on, es necesario escuchar al evento <code>onAttach</code> para conseguir pasar un objeto <a href="/en-US/Add-ons/SDK/Low-Level_APIs/content_worker">de trabajo</a> que contenga a <code>port</code>.</li> +</ul> + +<p>Se reescribe el ejemplo anterior para pasar un mensaje desde el add-on al script de contenido. El mensaje contendrá el nuevo contenido para ser insertado en el documento.</p> + +<p>El script de contenido ahora necesita lucir de esta manera:</p> + +<pre class="brush: js">// "self" is a global object in content scripts +// Listen for a message, and replace the document's +// contents with the message payload. +self.port.on("replacePage", function(message) { + document.body.innerHTML = "<h1>" + message + "</h1>"; +}); +</pre> + +<p>En el script del add-on, se enviará al script de contenido un mensaje desde <code>onAttach</code>.</p> + +<pre class="brush: js">// Import the page-mod API +var pageMod = require("sdk/page-mod"); +// Import the self API +var self = require("sdk/self"); + +// Create a page-mod +// It will run a script whenever a ".org" URL is loaded +// The script replaces the page contents with a message +pageMod.PageMod({ + include: "*.org", + contentScriptFile: self.data.url("my-script.js"), + // Send the content script a message inside onAttach + onAttach: function(worker) { + worker.port.emit("replacePage", "Page matches ruleset"); + } +}); +</pre> + +<p>El mensaje <code>replacePage</code> no es un mensaje ya definido: es un mensaje definido por el add-on en la llamada <code>port.emit()</code>.</p> + +<div> +<h2 id="Inyectar_CSS">Inyectar CSS</h2> + +<p><strong>Note que la característica descrita en esta sección es experimental por los momentos. Se continuará dando soporte a esta característica, pero los detalles dela API pueden cambiar.</strong></p> + +<p>En vez de inyectar JavaScript en una página, es posible inyectar CSS configurando la opción <code>contentStyle</code> del page-mod.</p> + +<pre class="brush: js">var pageMod = require("sdk/page-mod").PageMod({ + include: "*", + contentStyle: "body {" + + " border: 5px solid green;" + + "}" +}); +</pre> + +<p>Como con el <code>contentScript</code>, hay una opción correspondiente a<code> contentStyleFile</code> que toma una URL de un archivo CSS en el directorio "data" ; es una buena practica usar esta opción en vez de <code>contentStyle</code> si el CSS un poco complejo.</p> + +<pre class="brush: js">var pageMod = require("sdk/page-mod").PageMod({ + include: "*", + contentStyleFile: require("sdk/self").data.url("my-style.css") +}); +</pre> + +<p>O, para Firefox 34, se puede usar una versión más simple:</p> + +<pre class="brush: js">var pageMod = require("sdk/page-mod").PageMod({ + include: "*", + contentStyleFile: "./my-style.css" +});</pre> +</div> + +<h2 id="Conociendo_más">Conociendo más</h2> + +<p>Para conocer más sobre <code>page-mod</code>, puede dirigirse a la <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod">página de referencia de la API</a>. En particular, el constructor de <code>PageMod</code> toma algunas opciones adicionales para tomar el control de este comportamiento:</p> + +<ul> + <li> + <p>De forma predeterminada, los scripts de contenido no están fijados a ninguna pestaña que este ya abierta cuando el page-mod es creado, y son fijados a iframes como a documentos de alto nivel. Para controlar este comportamiento se usa la opción <code>attachTo</code>.</p> + </li> + <li> + <p>Define valores de solo lectura accesibles a los scripts de contenido usando la opción <code>contentScriptOptions</code>.</p> + </li> + <li> + <p>De forma predeterminada, los scripts de contenido son adjuntados después que todo el contenido (DOM, JS, CSS, imagenes) de la página ha sido cargado, al mismo tiempo se activa el <a href="/en-US/docs/Web/API/GlobalEventHandlers.onload">evento window.onload</a>. Para controlar este comportamiento, se usa la opción <code>contentScriptWhen</code>.</p> + </li> +</ul> + +<p>Para conocer más sobre los scripts de contenido en general, puede dirigirse a la <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">guía de scripts de contenido.</a></p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html b/files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html new file mode 100644 index 0000000000..1140029e16 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html @@ -0,0 +1,48 @@ +--- +title: Abrir una página web +slug: Mozilla/Add-ons/SDK/Tutorials/Open_a_Web_Page +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Open_a_Web_Page +--- +<div class="note">Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</div> + +<p>Para abrir una nueva página web, se usa el módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a>:</p> + +<pre class="brush: js">var tabs = require("sdk/tabs"); +tabs.open("http://www.example.com"); +</pre> + +<p>Esta función es asíncrona, por lo tanto no se tendrá inmediatamanete un <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#Tab">objeto</a> <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#Tab"><code>tab</code> </a> el cual se pueda examinar. Para hacer esto, se pasa una función de retrollamada en <code>open()</code>. La retrollamada es asignada a pa propiedad <code>onReady</code>, y pasará la pestaña como argumento:</p> + +<pre class="brush: js">var tabs = require("sdk/tabs"); +tabs.open({ + url: "http://www.example.com", + onReady: function onReady(tab) { + console.log(tab.title); + } +}); +</pre> + +<p>Incluso ahora, no se tiene acceso directo a ningún contenido dentro de la pestaña.</p> + +<p>Para acceder al contenido de la pstaña se necesita adjuntar un script a la pestaña usando <code>tab.attach()</code>. Este add-on carga una página, luego adjunta un script a la página el cual le agrega un borde rojo:</p> + +<pre class="brush: js">var tabs = require("sdk/tabs"); +tabs.open({ + url: "http://www.example.com", + onReady: runScript +}); + +function runScript(tab) { + tab.attach({ + contentScript: "document.body.style.border = '5px solid red';" + }); +} +</pre> + +<h2 id="Conozca_más">Conozca más</h2> + +<p>Para conocer más sobre las pestañas en el SDK, puede dirigirse a la <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">referencia de </a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code> en la API</a>.</p> + +<p>Para conocer mas sobre la ejecución de scripts en las pestañas, puede diregirse a<a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29"> </a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29">usando <code>tab.attach()</code></a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29"> en el tutorial</a>.</p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html b/files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html new file mode 100644 index 0000000000..cb2c3d7b18 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html @@ -0,0 +1,143 @@ +--- +title: Resolución de problemas +slug: Mozilla/Add-ons/SDK/Tutorials/Troubleshooting +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Troubleshooting +--- +<p>Si tiene problemas para lograr que el Add-on SDK funcione correctamente, ¡no entre en pánico! Esta página lista algunos puntos de inicio que pueden ayudarte a solucionar el problema.</p> + +<h2 id="Problema_de_Cuarentena_en_Mac_OS_X">Problema de Cuarentena en Mac OS X</h2> + +<p>En Mac OS X, puede aparecer el siguiente error cuando intenta ejecutar <code>cfx</code>:</p> + +<pre>/path/to/sdk/bin/cfx: /usr/bin/env: bad interpreter: Operation not permitted +</pre> + +<p>Esto puede ser causado debido a que el archivo ejecutable de <code>cfx</code> fue puesto en cuarentena durante la descarga desde Internet.</p> + +<p>Pra sacar el archivo de la cuarentena, use <code>xattr -d</code>, especificando <code>com.apple.quarantine</code> como el nombre del atributo a ser eliminado, y <code>cfx</code> como el archivo desde el cual borrar ese atributo:</p> + +<pre>xattr -d com.apple.quarantine /path/to/sdk/bin/cfx +</pre> + +<h2 id="Verificar_Python">Verificar Python</h2> + +<p>La herramienta <code>cfx</code> del SDK se ejecuta sobre Python. Si tiene problemas para ejecutar <code>cfx</code> de cualquier manera, asegúrese de tener Python correctamente instalado.</p> + +<p>Intente ejecutar la siguiente línea desde una terminal:</p> + +<pre> python --version +</pre> + +<p><span class="rangySelectionBoundary" id="selectionBoundary_1424733772250_620847453524463" style="display: none; line-height: 0;"></span><span class="rangySelectionBoundary" id="selectionBoundary_1424733772250_1443661623400101" style="display: none; line-height: 0;"></span><code>cfx</code> espera contar con Python 2.5, 2.6 o 2.7. Versiones anteriores o superiores pueden o no funcionar correctamente. Los espacios en blanco en la ruta de instalación no estan soportados.</p> + +<h2 id="Verificar_Firefox_o_XULRunner">Verificar Firefox o XULRunner</h2> + +<p><code>cfx</code> busca lugares conocidos en el sistema para encontrar a Firefox o XULRunner. <code>cfx</code> puede no haber encontrado una instalación, o si tiene múltiples instalaciones, <code>cfx</code> puede haber encontrado la instalación menos apropiada. En esos casos debe usar <code>la opción </code><code>--binary</code> de <code>cfx</code>. Vea la guia <a href="/en-US/Add-ons/SDK/Tools/cfx">cfx Tool</a> para más información.</p> + +<p>Cuando ejecuta <code>cfx</code> para probar el add-on o realiza pruebas unitarias, se muestra en pantalla la ubicación de los binarios de Firefox o XULRunner encontrados, por lo que puede asegurarse de la ubicación revisando estas salidas.</p> + +<h2 id="Verificar_la_Terminal_de_Texto">Verificar la Terminal de Texto</h2> + +<p>Cuando se generan errores en la API del SDK y el código, estos son registrados en la terminal de texto. Esta debería ser la misma terminal desde la cual ejecuta <code>cfx</code>.</p> + +<h2 id="No_deje_sueltos_los_Archivos_No-SDK">No deje sueltos los Archivos No-SDK</h2> + +<p>Actualmente el SDK no maneja de manera adecuada los archivos y directorios que no espera encontrar. Si hay directorios vacíos, directorios o archivos que no estan relacionados con el SDK dentro del directorio <code>addon-sdk</code> o sus subdirectorios, intente eliminarlos.</p> + +<h2 id="Buscar_Problemas_Conocidos">Buscar Problemas Conocidos</h2> + +<p>Alguien mas debe haber experimentado su mismo problema. Frecuentemente otras personas publican sus problemas a la <a href="http://groups.google.com/group/mozilla-labs-jetpack/topics">lista de correo del proyecto</a>. Usted también puede explorar la lista de <a href="https://bugzilla.mozilla.org/buglist.cgi?order=Bug%20Number&resolution=---&resolution=DUPLICATE&query_format=advanced&product=Add-on%20SDK">problemas conocidos</a> ó <a href="https://bugzilla.mozilla.org/query.cgi?format=advanced&product=Add-on%20SDK">buscar</a> palabras claves específicas.</p> + +<h2 id="Contactar_al_Equipo_del_Proyecto_y_al_Grupo_de_Usuarios">Contactar al Equipo del Proyecto y al Grupo de Usuarios</h2> + +<p>Las personas usuarias del SDK y las personas miembro del equipo del proyecto discuten problemas y propuestas en la <a href="http://groups.google.com/group/mozilla-labs-jetpack/topics">lista de correo del proyecto</a>. Alguien más puede haber tenido un problema igual al suyo, por lo tanto puede intentar buscar en la lista. Igualmente puede publicar una pregunta si así lo desea.</p> + +<p>También puede hablar en tiempo real con otras personas usuarias de SDK en el canal <a href="http://mibbit.com/?channel=%23jetpack&server=irc.mozilla.org">#jetpack</a> en la<a href="http://irc.mozilla.org/"> red IRC de Mozilla</a>.</p> + +<p>Y si desea <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Add-on%20SDK&component=General">reportar un error en el SDK</a>, es siempre bienvenido! Para esto deberá crear una cuenta con Bugzilla, el rastreador de errores de Mozilla.</p> + +<h2 id="Ejecutar_Pruebas_Unitarias_en_SDK">Ejecutar Pruebas Unitarias en SDK</h2> + +<p>El SDK trae consigo un conjunto de pruebas las cuales aseguran el correcto funcionamiento de las APIs. Puede ejecutaras de la siguiente manera:</p> + +<pre> cfx testall +</pre> + +<p>Algunas de las pruebas abren la ventana de Firefox para verificar las APIs relacionadas a la interfaz de usuario, no se preocupe. Por favor deje que el proceso culmine antes de reanudar su trabajo.</p> + +<p>Cuando el proceso culmine, la terminal debe mostrar la salida que puede verse de la siguiente manera:</p> + +<pre> Testing cfx... + ............................................................. + ---------------------------------------------------------------------- + Ran 61 tests in 4.388s + +OK + Testing reading-data... + Using binary at '/Applications/Firefox.app/Contents/MacOS/firefox-bin'. + Using profile at '/var/folders/FL/FLC+17D+ERKgQe4K+HC9pE+++TI/-Tmp-/tmpu26K_5.mozrunner'. + .info: My ID is 6724fc1b-3ec4-40e2-8583-8061088b3185 + .. + 3 of 3 tests passed. + OK + Total time: 4.036381 seconds + Program terminated successfully. + Testing all available packages: nsjetpack, test-harness, api-utils, development-mode. + Using binary at '/Applications/Firefox.app/Contents/MacOS/firefox-bin'. + Using profile at '/var/folders/FL/FLC+17D+ERKgQe4K+HC9pE+++TI/-Tmp-/tmp-dzeaA.mozrunner'. + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ............................................... + +3405 of 3405 tests passed. + OK + Total time: 43.105498 seconds + Program terminated successfully. + All tests were successful. Ship it! +</pre> + +<p>Si la salida revela muchos errores, puede ser una señal que el SDK no se esta ejecutando correctamente en su sistema. En ese caso, por favor reporte el error o envíe un mensaje a la lista de correo. Vea la sección anterior para más información sobre como hacer esto.</p> |