From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- .../add-ons/webextensions/debugging/index.html | 189 +++++++++++++++++++++ .../package_your_extension_/index.html | 105 ++++++++++++ .../porting_a_google_chrome_extension/index.html | 22 +++ .../temporary_installation_in_firefox/index.html | 91 ++++++++++ 4 files changed, 407 insertions(+) create mode 100644 files/es/orphaned/mozilla/add-ons/webextensions/debugging/index.html create mode 100644 files/es/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html create mode 100644 files/es/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html create mode 100644 files/es/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html (limited to 'files/es/orphaned/mozilla') diff --git a/files/es/orphaned/mozilla/add-ons/webextensions/debugging/index.html b/files/es/orphaned/mozilla/add-ons/webextensions/debugging/index.html new file mode 100644 index 0000000000..c24f9d07f5 --- /dev/null +++ b/files/es/orphaned/mozilla/add-ons/webextensions/debugging/index.html @@ -0,0 +1,189 @@ +--- +title: Depuración +slug: Mozilla/Add-ons/WebExtensions/Depuración +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Debugging +--- +
{{AddonSidebar}}
+ +
+

Las técnicas descritas aquí funcionan en Firefox 50 y versiones sucesivas. Si necesitas usar una versión anterior de Firefox, por favor ve al artículo debugging extensions using WebExtension APIs before Firefox 50.

+
+ +

Este artículo explica cómo se pueden usar las herramientas de desarrollo de Firefox para depurar extensiones creadas con las WebExtension APIs.

+ +

Una WebExtension puede consistir en varias partes distintas — scripts en segundo plano, popups, options pages, content scripts — y se tendrá que usar un proceso ligeramente distinto para depurar cada parte. Así, cada parte tendrá una sección principal en este artículo, y el objetivo es que esas secciones se puedan leer de forma independiente. Empezaremos presentando el Depurador de Add-on, que será usado para depurar la mayoría de las partes de un complemento.

+ + + +

El Depurador de Add-on

+ +

Para la mayor parte de este artículo utilizaremos el Depurador de Add-on. Para abrir el Depurador de Add-on:

+ + + +

Se abrirá entonces una nueva ventana. La ventana principal de Firefox se pondrá en primer plano, así que se tendrá que hacer click en la nueva ventana para que aparezca en primer plano.

+ +

{{EmbedYouTube("HMozipAjrYA")}}

+ +

Esta nueva ventana se llama "Herramientas de desarrollo" y contiene las herramientas de depuración que se usarán. La interfaz tiene varias pestañas en la parte de arriba que permiten moverse por las herramientas disponibles:

+ +

+ +

En este artículo usaremos tres herramientas de depuración:

+ + + +

Depurando scripts en segundo plano

+ +
+

Los ejemplos de esta sección usan la extensión de ejemplo "notify-link-clicks-l10n". Para explorar las opciones, se puede encontrar este ejemplo en el repositorio webextensions-examples.

+
+ +

Los scripts en segundo plano permanecen cargados durante el tiempo de vida de la extensión. Se cargan dentro de una “página en segundo plano” invisible: por defecto, es un documento HTML vacío, pero se puede especificar contenido HTML propio usando la palabra clave "background" en “manifest.json”.

+ +

Se pueden depurar scripts en segundo plano usando el Depurador de Add-ons.

+ +

En la Consola del Depurador de Add-ons se puede ver un registro de las salidas, incluidas las llamadas a console.log() desde los propios scripts en segundo plano y cualquier error que el navegador encuentre al ejecutarlos. Es importante mencionar que la consola muestra todos los errores detectados por el navegador, no sólo los errores relacionados con el código de la extensión.

+ +

Por ejemplo, la extensión de ejemplo notify-link-clicks-i18n registra un mensaje de su script en segundo plano cuando recibe un mensaje de uno de sus otros scripts:

+ +

{{EmbedYouTube("WDQsBU-rpN0")}}

+ +

Usando la línea de comandos de la Consola, se pueden acceder y modificar los objetos creados por los scripts en segundo plano.

+ +

Por ejemplo, aquí se hace un allamada a la función notify() definida en el script en segundo plano de la extensión:

+ +

{{EmbedYouTube("g-Qgf8Mc2wg")}}

+ +

Si se mira la ventana del Depurador, se pueden ver todos los scripts en segundo plano de la extensión. Se pueden definir breakpoints, ver el código paso a paso y hacer todo lo que es posible hacer en un depurador.

+ +

{{EmbedYouTube("MNeaz2jdmzY")}}

+ +

Si se pulsa la tecla de Escape mientras se está en el Depurador, la ventana de Herramientas de desarrollo se dividirá en dos, con la parte de abajo ocupada ahora por la Consola. Ahora, mientras se esté en un breakpoint, se puede modificar el estado del programa usando la consola. Ver Dividir la Consola para más información.

+ +

Depurando páginas de opciones

+ +

Las páginas de opciones son páginas HTML que pueden ser proporcionadas por la persona que desarrolle la extensión y contienen opciones para la misma. Se muestran normalmente en un iframe en el Add-ons Manager (para ver el Add-ons Manager, visita la página "about:addons").

+ +

Para depurar páginas de opciones:

+ + + +

Cualquier archivo fuente en JavaScript que incluya será listado en el Depurador:

+ +

{{EmbedYouTube("BUMG-M8tFF4")}}

+ +
+

Este vídeo usa el ejemplo de WebExtension favourite-colour.

+
+ +

También se verá cualquier mensaje registrado por el código en la Consola del Depurador de Add-on.

+ +

También se puede usar el Depurador de Add-on para depurar el código HTML y CSS de la página. Pero primero se necesita dirigir las herramientas al iframe que alberga la página de opciones. Para hacer esto: abre la página de opciones, haz clic en el icono indicado en la captura de pantalla mostrada a continuación y selecciona la página de opciones del menú desplegable:

+ +

Ahora al cambiar a la pestaña Inspector se podrá examinar y editar el HTML y CSS para la página:

+ +

 

+ +

{{EmbedYouTube("-2m3ubFAU94")}}

+ +

Depurando ventanas emergentes

+ +

Las ventanas emergentes son cuadros de diálogo unidos a acciones del navegador o de la página. Se especifican usando un documento HTML que puede incluir fuentes CSS y JavaScript para determinar el estilo y el funcionamiento. Cuando la ventana emergente es visible, se puede usar el Depurador de Add-on para depurar su código.

+ +

Un problema con las ventanas emergentes es que si una ventana emergente está abierta y se hace clic fuera de ella, esta se cierra y su código se descarga. Obviamente, esto hace que sea imposible depurarlas. Para eliminar este comportamiento, se debe hacer clic en el botón del Depurador de Add-on destacado en la captura de pantalla mostrada a continuación:

+ +

+ +

Ahora, al abrir una ventana emergente esta continuará abierta hasta que se pulse Escape.

+ +

 

+ +
+

Es importante señalar que esta opción está disponible para ventanas emergentes desarrolladas para el navegador, como el menú de hamburguesa ( ), así como a ventanas emergentes propias de la add-on.

+ +

También es importante notar que el cambio es persistente, incluso aunque el navegador se reinicie. Estamos trabajando en solucionar esto en el bug 1251658, pero hasta entonces puede ser mejor permitir de nuevo la ocultación automática volviendo a hacer clic en el botón antes de cerrar la Caja de Herramientas del Navegador.

+ +

Internamente, este botón simplemente cambia la preferencia ui.popup.disable_autohide, lo que se puede hacer manualmente usando about:config.

+
+ +

Cuando la ventana emergente está abierta, sus fuentes de JavaScript se listarán en el Depurador. Se pueden colocar breakpoints y modificar el estado interno del programa:

+ +

{{EmbedYouTube("hzwnR8qoz2I")}}

+ +
+

Este vídeo usa la extensión de ejemplo beastify.

+
+ +

También se puede usar el Depurador de Add-on para depurar el código HTML y CSS de la ventana emergente. Pero primero se necesita dirigir las herramientas al documento de la ventana emergente. Para hacer esto: abre la ventana emergente, haz clic en el icono indicado en la captura de pantalla mostrada a continuación y selecciona la página de la ventana emergente del menú desplegable:

+ +

+ +

Ahora al cambiar a Inspector se podrán examinar y editar el HTML y el CSS de la ventana emergente:

+ +

{{EmbedYouTube("6lvdm7jaq7Y")}}

+ +

Depurando scripts de contenido

+ +

Se puede usar el Depurador de Add-on para depurar páginas en segundo plano, páginas de opciones y ventanas emergentes. Sin embargo, no se puede usar para depurar scripts de contenido. Esto es debido a que, en Firefox multiproceso, los scripts de contenido se ejecutan en un proceso distinto del de otras partes de la add-on.

+ +

Para depurar scripts de contenido adjuntos a una página web, se deben usar las herramientas de desarrollo web normales para esa página:

+ + + +

{{EmbedYouTube("f46hMLELyaI")}}

+ +

Por defecto, las herramientas se muestran al pie de la pestaña de desarrollo, para reflejar que están relacionadas con esa pestaña. Cualquier salida de las instrucciones console.log() de los scripts de contenido será mostrada allí. También se verán los scripts de contenido listados en el Depurador, donde se podrán colocar breakpoints, avanzar en el código, etc.

+ +

{{EmbedYouTube("Hx3GU_fEPeo")}}

+ +
+

Este video usa el ejemplo notify-link-clicks-i18n de WebExtension.

+
+ +
+

Si la pestaña de Herramientas de Desarrollo no estaba abierta cuando el scripts de contenido se introdujo, puede ocurrir que el scripts de contenido no aparezca en el panel de depuración. Si esto ocurre, recargar la página que contiene la pestaña de Herramientas de Desarrollo debería solucionar el problema.

+
diff --git a/files/es/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html b/files/es/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html new file mode 100644 index 0000000000..ef81cd0468 --- /dev/null +++ b/files/es/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html @@ -0,0 +1,105 @@ +--- +title: Publicando tu extensión +slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension +tags: + - AMO + - Addons + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_ +--- +
{{AddonSidebar}}
+ +

Una vez que hayas acabado de modificar y testear tu extensión, es probable que quieras compartirla con el resto del mundo. Mozilla tiene una web: addons.mozilla.org (comunmente abreviada como AMO), en la que los desarrolladores pueden publicar sus complementos y los usuarios pueden encontrarlos. Publicando tu extension en AMO, puedes participar en nuestra comunidad de usuarios y creadores, y encontrar una audiencia para tu extension.

+ +

No tienes por que publicar tu extension en AMO.  De todas maneras, aunque no quieras publicarla, tendrás que enviarla a AMO para que pueda ser revisada y firmada. Las versiones oficiales de Firefox no aceptan complementos que no estén firmados por AMO.

+ +

En resumen, este es el proceso para publicar una extensión:

+ +
    +
  1. Comprime los archivos de tu extension en un zip
    2. +
  2. Crea una cuenta en AMO
    3. +
  3. Sube tu zip a AMO para firmarlo y revisarlo y selecciona una opción
    4. +
  4. Soluciona los problemas encontrados en la revisión
    5. +
  5. Si seleccionas no publicar la extension en AMO, puedes obtener la extension firmada y publicala por tu cuenta
    6. +
+ +

Cuando estés listo para lanzar una nueva versión de tu extensión, puedes actualizarla visitando la página de la extensión en addons.mozilla.org, y subiendo ahí la nueva versión. Ten en cuenta que tendrás que actualizar la página de la extensión para que AMO reconozca que es una actualización de la extensión, y no una extensión completamente nueva.

+ +

Si seleccionas publicar tu extensión en AMO, Firefox buscará las actualizaciones automaticamente. Si seleccionas publicarla por tu cuenta, tendrás que incluir la clave applications en tu manifest.json, con el atributo update_url apuntando a un update manifest file.

+ +
+
+

Las extensiones empaquetadas de Firefox son "archivos XPI", que son simplemente un .ZIP con otra extensión

+ +

No tienes que usar la extensión .XPI para subirla a AMO.

+
+
+ +

1. Comprime los archivos en un zip

+ +

En este punto tu extensión consistirá en una carpeta que contiene un manifest.json y otros archivos que necesite (scripts, iconos, documentos HTML, etc.). Necesitarás comprimir todos en un sólo .zip para poder subirlos a AMO.

+ +

Es importante saber que el .zip deber crearse seleccionando todos los archivos de la extensión, no su carpeta contenedora.

+ +

Windows

+ +
    +
  1. Abre la carpeta que contenga los archivos de tu extensión.
    2. +
  2. Selecciona todos los archivos (CTRL+E o CTRL+A, depende del idioma).
    3. +
  3. Click derecho en Enviar a → Carpeta comprimida (en zip).
    4. +
+ +

+ +

Mac OS X

+ +
    +
  1. Abre la carpeta que contenga los archivos de tu extensión.
    2. +
  2. Selecciona todos los archivos.
    3. +
  3. Click derecho y selecciona Comprimir n Items.
    4. +
+ +

+ +
+
Ver http://www.info-zip.org/mans/zip.html.
+
+ +

Linux / Mac OS X Terminal

+ +
    +
  1. cd path/to/my-extension/
    2. +
  2. zip -r -FS ../my-extension.zip *
    3. +
+ +
 
+ +

2. Crea una cuenta en addons.mozilla.org

+ +

Visita https://addons.mozilla.org/. Si ya tienes una Cuenta Firefox, puedes utilizarla para iniciar sesión. Si no, haz click en "Registrar" y se te exigirá crear una cuenta.

+ +

3. Sube tu zip

+ +

A continuación, sube la extensión comprimida a AMO para poder revisarla y firmarla, y selecciona si quieres publicarla en AMO o no. Hay un tutorial disponible para guiarte durante el proceso de envío. Sería conveniente que también veas Enviando a AMO para más detalles sobre el proceso.

+ +
+

Ten en cuenta que una vez que hayas subido la extensión a AMO no podrás actualizarla para usar el Add-on SDK o técnicas XUL/XPCOM. Si decides cambiar a una de estas plataformas, tendrás que enviar la extensión de nuevo como si de una nueva extensión se tratase.

+ +

En otras palabras: portar a partir de sistemas de extensiones heredadas para usar APIs WebExtension es un camino de ida.

+ +

Antes de subirla, asegurate de que el ZIP contiene sólo los archivos necesarios para la extensión.

+
+ +

4. Soluciona los problemas detectados en la revisión

+ +

En cuanto subas la aplicación, el servidor AMO realizará varios tests básicos y te notificará inmediatamente de cualquier problema. Los problemas se dividen en dos categorías: "errors" y "warnings". Si tienes errores, tienes que arreglarlos y reenviar la extensión. Si sólo tienes avisos, conviene solucionarlos, pero no es obligatorio. Puedes continuar.

+ +

Si el comprobador automático no detecta ningún error, la extensión pasará por una revisión más exhaustiva. Serás contactado con los resultados de la revisión. En caso de tener errores tendrás que solucionarlos e intentarlo de nuevo.

+ +

Si has selccionado que la extensión esté hosteada en AMO, este es el final del proceso de publicación. AMO firmará la extensión y la publicará, tras esto los usuarios ya podrán descargarla e instalarla.

+ +

5. Publica tu extensión

+ +

Si seleccionas no publicarla en AMO, obten la extensión firmada y públicala por tu cuenta.

+ +

 

diff --git a/files/es/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html b/files/es/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html new file mode 100644 index 0000000000..58959678f4 --- /dev/null +++ b/files/es/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html @@ -0,0 +1,22 @@ +--- +title: Conversión de extensiones de Google Chrome +slug: Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension +--- +
{{AddonSidebar}}
+ +

Las extensiones programadas con API de WebExtensions están diseñadas para ser compatibles entre navegadores diferentes: en buena medida, esta tecnología es compatible directamente con la API de extensiones admitida por Google Chrome y Opera. En la mayoría de los casos, las extensiones creadas para estos navegadores se ejecutarán en Firefox con solo unas pocas modificaciones. Casi todas las API de extensiones se admiten a través de funciones de devolución de llamada bajo el espacio de nombres chrome, al igual que Chrome. Las únicas API que no se admiten bajo el espacio de nombres chrome son aquellas que son deliberadamente incompatibles con Chrome. En esos casos contados, la página de documentación de la API manifestará expresamente que se admite solo en el espacio de nombres browser. El proceso de conversión de extensiones de Chrome u Opera es el siguiente:

+ +
    +
  1. Revise su utilización de funciones de manifest.json y API de WebExtensions con respecto a la referencia de incompatibilidades con Chrome. Si está empleando funciones o API que aún no se admiten en Firefox, es posible que no pueda convertir su extensión por el momento. Mozilla ofrece un servicio que puede ayudar a automatizar este paso: https://www.extensiontest.com/.
    2. +
  2. Instale su extensión en Firefox y póngala a prueba.
    3. +
  3. Si experimenta problemas, póngase en contacto con nosotros a través de la lista de correo «dev-addons» o el canal #webextensions en IRC.
    4. +
  4. Envíe su complemento a AMO para su firma y distribución.
    5. +
+ +

Si dependía de la opción de consola de Chrome para cargar extensiones no empaquetadas, eche un vistazo a la herramienta web-ext, la cual automatiza la instalación temporal en Firefox para permitir el desarrollo.

+ + diff --git a/files/es/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html b/files/es/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html new file mode 100644 index 0000000000..7718e990f3 --- /dev/null +++ b/files/es/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html @@ -0,0 +1,91 @@ +--- +title: Empaquetado e Instalación +slug: Mozilla/Add-ons/WebExtensions/Packaging_and_installation +translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox +translation_of_original: Mozilla/Add-ons/WebExtensions/Packaging_and_installation +--- +

Empaquetando tu extensión

+ +
+

Mozilla actualmente esta considerando implementar una aplicación con interfaz visual para empaquetar y cargar extensiones. Mira el Bug 1185460 para más información. Hasta entonces, sigue los pasos que aparecen a continuación.

+
+ +

Las extensiones para Firefox son empaquetadas como archivos XPI, los cuales son solamente archivos ZIP, con extensión "xpi".

+ +

Un truco es que el archivo ZIP debe ser un archivo que contenga los archivos de la extensión y no la carpeta que los contiene.

+ +

Windows

+ +
    +
  1. Abre la carpeta que contiene los archivos de tu extensión.
    2. +
  2. Selecciona todos los archivos.
    3. +
  3. Con clic derecho elige Enviar a  → Carpeta comprimida (zip).
    4. +
  4. Cambia el nombre del archivo resultante de something.zip a something.xpi.
    5. +
+ +

Screenshot of the Windows Explorer context menu showing Send to compressed (zipped) folder

+ +

Mac OS X

+ +
    +
  1. Abre la carpeta que contiene los archivos de tu extensión.
    2. +
  2. Selecciona todos los archivos.
    3. +
  3. Con clic derecho elige Comprimir n elementos.
    4. +
  4. Cambia el nombre del archivo resultante de something.zip a something.xpi.
    5. +
+ +

Screenshot of the Finder context menu showing the Compress 15 Items option

+ +

Linux / Mac OS X Terminal

+ +
    +
  1. cd path/to/my-extension/
    2. +
  2. zip -r ../my-extension.xpi *
    3. +
+ +

Instalando tu extensión

+ +
    +
  1. Navega a about:addons
    2. +
  2. Arrastra y suelta el XPI dentro de la página, o abre el menú de opciones y escoge "Instalar complemento desde archivo..."
    3. +
  3. Da clic en "Instalar" en el diálogo que aparecerá
    4. +
+ +

Instalando tu extensión en Firefox OS

+ +

Tu puedes instalar tu extensión desde WebIDE en un escritorio conectado vía USB o Wifi. Abre path/to/my-extension/ como una Aplicación empaquetada en WebIDE.

+ +

Cuando la validación de manifest.json es correcta podrás instalar y ejecutar tu extensión en el dispositivo con Firefox OS conectado.

+ +

Para instalar extensiones debe tener habilitada la opción en Configuración->Complementos del dispositivo con Firefox OS.

+ +

Resolución de problemas

+ +

Aquí están algunos de los problemas más comunes que podrías encontrarte:

+ +

"Este complemento no puede ser instalado porque no ha sido verificado."

+ + + +

"Este complemento no puede ser instalado porque para estar corrupto."

+ + + +

No pasa nada

+ + -- cgit v1.2.3-54-g00ecf