From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../add_a_button_to_the_toolbar/index.html | 220 ++++++++++ .../anatomia_de_una_webextension/index.html | 120 ++++++ .../add-ons/webextensions/api/i18n/index.html | 94 +++++ .../mozilla/add-ons/webextensions/api/index.html | 59 +++ .../add-ons/webextensions/api/storage/index.html | 115 ++++++ .../webextensions/api/storage/local/index.html | 95 +++++ .../webextensions/api/storage/sync/index.html | 79 ++++ .../webextensions/api/webnavigation/index.html | 144 +++++++ .../browser_support_for_javascript_apis/index.html | 15 + .../chrome_incompatibilities/index.html | 291 +++++++++++++ .../webextensions/depuraci\303\263n/index.html" | 189 +++++++++ .../add-ons/webextensions/examples/index.html | 24 ++ .../extending_the_developer_tools/index.html | 159 +++++++ .../implement_a_settings_page/index.html | 199 +++++++++ files/es/mozilla/add-ons/webextensions/index.html | 155 +++++++ .../intercept_http_requests/index.html | 156 +++++++ .../webextensions/internationalization/index.html | 405 ++++++++++++++++++ .../webextensions/manifest.json/icons/index.html | 74 ++++ .../add-ons/webextensions/manifest.json/index.html | 51 +++ .../webextensions/modify_a_web_page/index.html | 253 ++++++++++++ .../packaging_and_installation/index.html | 90 ++++ .../porting_from_google_chrome/index.html | 22 + .../add-ons/webextensions/prerequisitos/index.html | 17 + .../publishing_your_webextension/index.html | 105 +++++ .../que_son_las_webextensions/index.html | 59 +++ .../tu_primera_webextension/index.html | 160 +++++++ .../add-ons/webextensions/tutorial/index.html | 459 +++++++++++++++++++++ .../user_interface/accion_navegador/index.html | 50 +++ .../webextensions/user_interface/index.html | 95 +++++ .../user_interface/page_actions/index.html | 96 +++++ .../add-ons/webextensions/what_next_/index.html | 56 +++ 31 files changed, 4106 insertions(+) create mode 100644 files/es/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/api/i18n/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/api/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/api/storage/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/api/storage/local/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/api/storage/sync/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/api/webnavigation/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html create mode 100644 "files/es/mozilla/add-ons/webextensions/depuraci\303\263n/index.html" create mode 100644 files/es/mozilla/add-ons/webextensions/examples/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/intercept_http_requests/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/internationalization/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/manifest.json/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/packaging_and_installation/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/prerequisitos/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/tutorial/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/user_interface/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/user_interface/page_actions/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/what_next_/index.html (limited to 'files/es/mozilla/add-ons/webextensions') diff --git a/files/es/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html b/files/es/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html new file mode 100644 index 0000000000..1bccc9d703 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html @@ -0,0 +1,220 @@ +--- +title: Agregar botón a la barra de herramientas +slug: Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar +translation_of: Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar +--- +
{{AddonSidebar}}
+ +

La barra de herramientas es una de las principales componentes UI disponibles para las extensiones. Toolbar buttons live in the main browser toolbar y contienen un icono. Cuando el usuario da click en el icono, dos cosas pueden suceder:

+ + + +

Con las  APIs de WebExtension, este tipo de botón es se llaman "browser actions", y son  configurados de la siguiente manera:

+ + + +

Un simple botón

+ +

En esta sección vamos a crear una extension que agrega un botón a la barra de herramientas. Cuando el usuario de click en el botón, vamos abrir https://developer.mozilla.org en una nueva pestaña.

+ +

Primero, crear una nueva carpeta "botón", y crea un archivo con el nombre de "manifest.json"  con el siguiente contenido:

+ +
{
+
+  "description": "Demostrando botones de la barra de herramientas",
+  "manifest_version": 2,
+  "name": "botón-demo",
+  "version": "1.0",
+
+  "background": {
+    "scripts": ["background.js"]
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/page-16.png",
+      "32": "icons/page-32.png"
+    }
+  }
+
+}
+ +

Esto especifica que tenemos un  background script  llamado "background.js",  y un browser action (butón) cuyo icono va a estar en la carpeta "icons".

+ +
+
Estos iconos son de  bitsies! conjunto de iconos creados por Recep Kütük.
+
+ +

Despues, dentro del folder "botón"  crea la carpeta "icons"  y dentro de el guarda estos dos iconos:

+ + + +
 
+ +

Tenemos dos iconos entonces podemos usar el mas grande para las pantallas de alta densidad. El navegador se va encargar de seleccionar el correcto para cada pantalla.

+ +

Despues, crea "background.js" en la raiz del folder de la extension, y agrega el siguiente contenido:

+ +
function openPage() {
+  browser.tabs.create({
+    url: "https://developer.mozilla.org"
+  });
+}
+
+browser.browserAction.onClicked.addListener(openPage);
+ +

Esto esta a la espera de de el navegador se de click; cuando el evento se dispara, la funcion openPage() comienza a ejecutarse,  el cual abre la página especificada usando la API de tabs.

+ +

En este momento la extension debe de mirarse asi:

+ +
button/
+    icons/
+        page-16.png
+        page-32.png
+    background.js
+    manifest.json
+ +

Ahora  instala la extensión  y da  click en el botón:

+ +

{{EmbedYouTube("kwwTowgT-Ys")}}

+ +

Agregando un popup

+ +

Vamos a intentar agregar un popup al botón.  Remplaza el manifest.json con este contenido:

+ +
{
+
+  "description": "Demostrando botones de la barra de herramientas",
+  "manifest_version": 2,
+  "name": "botón-demo",
+  "version": "1.0",
+
+  "browser_action": {
+    "browser_style": true,
+    "default_popup": "popup/choose_page.html",
+    "default_icon": {
+      "16": "icons/page-16.png",
+      "32": "icons/page-32.png"
+    }
+  }
+
+}
+ +

Realizamos tres cambios:

+ + + +

Entonces ahora necesitamos crear el  popup. Crea un folder llamado "popup"  y crea adentro el archivo  "choose_page.html" . agregale el siguiente contenido:

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="choose_page.css"/>
+  </head>
+
+<body>
+  <div class="page-choice">developer.mozilla.org</div>
+  <div class="page-choice">support.mozilla.org</div>
+  <div class="page-choice">addons.mozilla.org</div>
+  <script src="choose_page.js"></script>
+</body>
+
+</html>
+ +

Puedes notar que es un nomal archivo HTML que contiene tres elementos {{htmlelement("div")}}, con direcciones de Mozilla. También incluye archivos de CSS y  JavaScript, en los cuales vamos agregar lo siguiente.

+ +

Crea el archivo "choose_page.css"  adentro de la carpeta "popup" , con el siguiente contenido:

+ +
html, body {
+  width: 300px;
+}
+
+.page-choice {
+  width: 100%;
+  padding: 4px;
+  font-size: 1.5em;
+  text-align: center;
+  cursor: pointer;
+}
+
+.page-choice:hover {
+  background-color: #CFF2F2;
+}
+ +

Es solo un poco de estilo a nuestro popup.

+ +

Ahora, crea un  archivo "choose_page.js" dentro del folder "popup" con el siguiente contenido:

+ +
document.addEventListener("click", function(e) {
+  if (!e.target.classList.contains("page-choice")) {
+    return;
+  }
+
+  var chosenPage = "https://" + e.target.textContent;
+  browser.tabs.create({
+    url: chosenPage
+  });
+
+});
+ +

En nuestro JavaScript,  esta a la espera de clicks en las opciones de nuestro popup. Primero revisa si el click fue en una de nuestras elecciones, si no, no realizamos nada mas. Se seleccion una carga una página elegida,  en una nueva pestaña con la correspondiente página. Nota que podemos usar las APIs WebExtension  en el script del popup, como también scripts de fondo.

+ +

La  estructura de la extensión final debe ser como esta:

+ +
button/
+    icons/
+        page-16.png
+        page-32.png
+    popup/
+        choose_page.css
+        choose_page.html
+        choose_page.js
+    manifest.json
+ +

Ahora vamos a recargar la extensión, click en el botón  otra vez e intenta dar click en las opciones del popup:

+ +

{{EmbedYouTube("QPEh1L1xq0Y")}}

+ +

Acciones de página

+ +

Acciones de página son como las acciones del navegador, excepto que son acciones relevantes solo para algunas página en particular.

+ +

Mientras de las acciones del navegaro siembre son mostradas, las acciones de página son solo mostradas en pestañas donde son relevantes. Los botones de las acciones de página son mostradas en la barra URL , en vez de la barra de herramientas del navegador.

+ +

Aprende más

+ + diff --git a/files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html b/files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html new file mode 100644 index 0000000000..685e282bf9 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html @@ -0,0 +1,120 @@ +--- +title: Anatomía de una extension +slug: Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +--- +
{{AddonSidebar}}
+ +

Una extensión se compone de una colección de archivos, empaquetados para su distribución e instalación. En este artículo vamos a repasar rápidamente los archivos que deben estar presentes en una extensión.

+ +

Toda extensión debe contener un archivo llamado "manifest.json". Este puede tener enlaces a otros tipos de archivos:

+ + + +

+ +

manifest.json

+ +

Este es el único archivo que debe estar presente en toda WebExtension. Este contiene los metadatos básicos acerca de la extensión, como su nombre, versión, y los permisos que esta requiere. También provee los enlaces a otros archivos de la extensión.

+ +

Mira la página de referencia manifest.json para ver todos los detalles.

+ +

Scripts en segundo plano

+ +

Las extensiones a menudo necesitan mantener estados de larga duración, o ejecutar operaciones a largo plazo, independientemente del tiempo de vida de una página web en particular o las ventanas del navegador. Para eso son los scripts en segundo plano.

+ +

Los scripts en segundo plano son cargados cuando la extensión es cargada y se mantienen cargados hasta que la extensión es deshabilitada o desinstalada. Tu puedes usar cualquier API de WebExtensions en el script, siempre y cuando hayas solicitado el permiso necesario.

+ +

Especificando los scripts en segundo plano

+ +

Puedes incluir un script en segundo plano usando la propiedad background en "manifest.json":

+ +
// manifest.json
+
+"background": {
+  "scripts": ["background-script.js"]
+}
+ +

Puedes especificar múltiples scripts en segundo plano: si lo haces, ellos se ejecutarán en el mismo contexto, justo como son cargados múltiples scripts en una página web.

+ +

Entorno del script en segundo plano

+ +

APIs del DOM

+ +

Los scripts en segundo plano se ejecuta en el contexto de páginas especiales llamadas páginas en segundo plano. Esto le da un variable global window, junto con todas las APIs estándar del DOM que proporciona.

+ +

No necesitas proveer tu propia página en segundo plano. Si incluyes un script en segundo plano, una página en segundo plano vacía se creará para ti.

+ +

Sin embargo, puedes escoger y proveer tu página en segundo plano como un archivo HTML separado:

+ +
// manifest.json
+
+"background": {
+  "page": "background-page.html"
+}
+ +

APIs de WebExtension

+ +

Los scripts en segundo plano pueden usar cualquier API de WebExtension en el script, siempre que tu extensión tenga los permisos necesarios.

+ +

Acceso de origen cruzado

+ +

Los scripts en segundo plano pueden hacer peticiones XHR a cualquier host para los cuales tienen permisos del host.

+ +

Acciones del navegador

+ +

Si tu extensión define una acción del navegador, y esa acción del navegador no tiene ventanas emergentes, entonces puedes escuchar los eventos "clic" del botón en el navegador empleando el objeto onClicked de las acciones del navegador:

+ +
browser.browserAction.onClicked.addListener(handleClick);
+ +

Contenido web

+ +

Los scripts en segundo plano no tienen acceso directo a las páginas web. Sin embargo, pueden cargar scripts de contenido en páginas web, y comunicarse con esos scripts empleando la API de paso de mensajes.

+ +

Políticas de segurdiad para el contendio

+ +

Los scripts de segundo plano están restringidos de algunas operaciones dañinas, como el uso de eval(), a través de la  Política de Seguridad del Contenido. Vea la Política de Segurdiad del Contenido para más detalles sobre esto.

+ +

Scripts de contenido

+ +

Usa los scripts de contenido para acceder y manipular páginas web. Los scripts de contenido son cargados dentro de las páginas web y ejecutados en el contexto particular de esa página.

+ +

Los scripts de contenido son scripts provistos por la extensión los cuales se ejecutan en el contexto de la página web; estos difieren de los scripts que son cargados por la página misma, incluye aquellos que son proporcionados en los elementos {{HTMLElement("script")}} dentro de la página.

+ +

Los scripts de contenido pueden ver y manipular el DOM de las páginas, igual que los scripts cargados normalmente por la página.

+ +

A diferencia de los scripts normales, ellos pueden:

+ + + +

Los scripts de contenido no pueden acceder directamente a los scripts normales de una página web, pero pueden intercambiar mensajes con ellos usando la API estándar window.postMessage().

+ +

Generalmente, cuando hablamos acerca de scripts de contenido, nos referimos a JavaScript, pero tu puedes inyectar CSS dentro de las páginas web empleando el mismo mecanismo.

+ +

Mira el artículo scripts de contenido para aprender más.

+ +

Recursos web accesibles

+ +

Los recursos web accesibles son recursos como imágenes, HTML, CSS y JavaScript que tu puedes incluir en la extensión y los quieres hacer accesible a los scripts en segundo plano y los scripts de las páginas. Los recursos que son hechos accesibles desde la web pueden ser referenciados desde scripts de páginas web y scripts de contenido mediante un esquema especial de URI.

+ +

Por ejemplo, si un script de contenido quiere insertar algunas imágenes dentro de páginas web, tu puedes incluirlos en la extensión y hacerlos accesibles desde la web. El script de contenido creará y añadirá las etiquetas img que referencia a las imágenes mediante el atributo src.

+ +

Para aprender más, vea la documentación para la el parámetro web_accessible_resource del manifest.json.

diff --git a/files/es/mozilla/add-ons/webextensions/api/i18n/index.html b/files/es/mozilla/add-ons/webextensions/api/i18n/index.html new file mode 100644 index 0000000000..15f990ac92 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/i18n/index.html @@ -0,0 +1,94 @@ +--- +title: i18n +slug: Mozilla/Add-ons/WebExtensions/API/i18n +tags: + - API + - Complementos + - Interfaz + - No estandar + - Reference + - WebExtensions + - extensiones + - i18n +translation_of: Mozilla/Add-ons/WebExtensions/API/i18n +--- +
{{AddonSidebar}}
+ +

Funciones para internacionalizar su extensión. Es posible utilizar estas API para obtener cadenas de texto traducidas a partir de archivos de configuración regional incluidos en la extensión, conocer el idioma actual del navegador y recuperar el valor de su cabecera Accept-Language.

+ +

Para obtener más información sobre el uso de i18n en su extensión, consulte:

+ + + +

Tipos

+ +
+
{{WebExtAPIRef("i18n.LanguageCode")}}
+
Una etiqueta de idioma como «en-US» o «fr».
+
+ +

Funciones

+ +
+
{{WebExtAPIRef("i18n.getAcceptLanguages()")}}
+
Recupera los valores de accept-language del navegador. Esto es distinto de la configuración regional utilizada por el navegador. Para obtener la configuración regional, utilice {{WebExtAPIRef('i18n.getUILanguage')}}.
+
{{WebExtAPIRef("i18n.getMessage()")}}
+
Obtiene la cadena de texto traducida correspondiente al mensaje especificado.
+
{{WebExtAPIRef("i18n.getUILanguage()")}}
+
Obtiene el idioma de la IU del navegador. Esto es distinto de {{WebExtAPIRef('i18n.getAcceptLanguages')}}, que devuelve los idiomas preferidos del usuario.
+
{{WebExtAPIRef("i18n.detectLanguage()")}}
+
Detecta el idioma del texto proporcionado a través de Compact Language Detector.
+
+ +
+
+ +

Compatibilidad entre navegadores

+ +

{{Compat("webextensions.api.i18n")}}

+ +

{{WebExtExamples("h2")}}

+ +
+
+ +
Reconocimientos + +

Esta API se basa en la API chrome.i18n de Chromium. Esta documentación deriva del archivo i18n.json en el código fuente de Chromium.

+ +

Los datos de compatibilidad de Microsoft Edge son suministrados por Microsoft Corporation y se incluyen aquí según los términos de la licencia Creative Commons Atribución 3.0, versión estadounidense.

+
+ + diff --git a/files/es/mozilla/add-ons/webextensions/api/index.html b/files/es/mozilla/add-ons/webextensions/api/index.html new file mode 100644 index 0000000000..9a1a727d52 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/index.html @@ -0,0 +1,59 @@ +--- +title: API +slug: Mozilla/Add-ons/WebExtensions/API +tags: + - Extenciones Web +translation_of: Mozilla/Add-ons/WebExtensions/API +--- +

Las API de JavaScript para las Extensiones Web se pueden usar dentro de los scripts en segundo plano de la extensión y en cualquier otro documento contenido en la extensión, incluyendo las ventanas emergentes de acción de página o acción del navegador, barras laterales, páginas de opciones o páginas de pestañas nuevas. A algunas de estas API también se puede acceder mediante los scripts de contenido de una extensión ( consulte la lista en la guía de script de contenido).

+ +

Para usar API más poderosas debes solicitar permiso en manifest.json en tu extensión.

+ +

Puedes acceder a las API utilizando el namespace browser:

+ +
function logTabs(tabs) {
+  console.log(tabs);
+}
+
+browser.tabs.query({currentWindow: true}, logTabs);
+ +
+

Muchas de las APIs son asíncronas, devolviendo un Promise:

+ +
function logCookie(c) {
+  console.log(c);
+}
+
+function logError(e) {
+  console.error(e);
+}
+
+var setCookie = browser.cookies.set(
+  {url: "https://developer.mozilla.org/"}
+);
+setCookie.then(logCookie, logError);
+
+ +
+

Tenga en cuenta que esto es diferente del sistema de extensiones de Google Chrome, que utiliza el nombre chrome en lugar de browser, y que utiliza callbacks en lugar de promise para funciones asíncronas. Como ayuda para portar, la implementación de Firefox de la API WebExtensions admite chrome y callbacks, así como browser y promise. Mozilla también ha escrito un polyfill que habilita el código que usa  browser y promise para trabajar sin cambios en Chrome.: https://github.com/mozilla/webextension-polyfill.

+ +

Firefox también implementa estas APIs bajo el nombre chrome usando callbacks. Esto permite que el código escrito para Chrome se ejecute sin cambios en Firefox para las APIs documentadas aquí.

+ +

Microsoft Edge usa el namespace browser, pero aún no admite APIs asíncronas basadas en promise. En Edge, por el momento, las APIs asíncronas deben utilizar callbacks.

+ +

No todos los navegadores son compatibles con todas las APIs: para obtener más información, consulte Soporte del navegador para las API de JavaScript.

+ +

Listado de API de JavaScript

+ +

Vea a continuación una lista completa de las API de JavaScript:

+ +

Esta página lista todas las APIs JavaScript de WebExtension que actualmente son soportadas.

+
+ +
{{SubpagesWithSummaries}}
+ +

Incompatibilidades con Chrome

+ +

Nosotros no soportamos ninguna API que no es listada arriba.

+ +

Incluso, para las APIs que están listadas arriba, no siempre soportamos todas las propiedades que Chrome soporta. Por favor, chequea la página de la API para cualquier incompatibilidad con Chrome.

diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/index.html b/files/es/mozilla/add-ons/webextensions/api/storage/index.html new file mode 100644 index 0000000000..a98fb1e17f --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/storage/index.html @@ -0,0 +1,115 @@ +--- +title: storage +slug: Mozilla/Add-ons/WebExtensions/API/storage +tags: + - API + - Add-ons + - Complentos + - Extensions + - Interface + - NeedsTranslation + - Non-standard + - Reference + - Storage + - TopicStub + - WebExtensions + - extensiones +translation_of: Mozilla/Add-ons/WebExtensions/API/storage +--- +
{{AddonSidebar}}
+ +

Permite que las extensiones almacenen y recuperen datos, y escuchen los cambios realizados  en los elementos almacenados.

+ +

El sistema de almacenamiento se basa en Web Storage API, con algunas diferencias. Entre otras diferencias, éstas incluyen:

+ + + +

Para usar esta API, debe incluir el permiso de "storage" en su archivo manifest.json.

+ +

Cada extensión tiene su propia área de almacenamiento, que se puede dividir en diferentes tipos de almacenamiento.

+ +

Aunque esta API es similar a {{domxref ("Window.localStorage")}}, se recomienda que no use Window.localStorage en el código de extensión para almacenar datos relacionados con la extensión. Firefox borrará los datos almacenados por las extensiones utilizando la API localStorage en varios escenarios donde los usuarios borran su historial de navegación y los datos por razones de privacidad, mientras que los datos guardados utilizando la API storage.local se conservarán correctamente en estos escenarios.

+ +
El área de almacenamiento no está encriptada y no debe utilizarse para almacenar información confidencial del usuario, como claves.
+ +

Tipos

+ +
+
{{WebExtAPIRef("storage.StorageArea")}}
+
Un objeto que representa un área de almacenamiento.
+
{{WebExtAPIRef("storage.StorageChange")}}
+
Un objeto que representa un cambio en un área de almacenamiento.
+
+ +

Propiedades

+ +

El almacenamiento tiene tres propiedades, que representan los diferentes tipos de área de almacenamiento disponible.

+ +
+
{{WebExtAPIRef("storage.sync")}}
+
Representa el área de almacenamiento de sincronización. Los elementos en el almacenamiento de sincronización están sincronizados por el navegador y están disponibles en todas las instancias de ese navegador en el que el usuario ha iniciado sesión, en diferentes dispositivos.
+
{{WebExtAPIRef("storage.local")}}
+
Representa el área de almacenamiento local. Los elementos en el almacenamiento local son locales a la máquina en la que se instaló la extensión.
+
{{WebExtAPIRef("storage.managed")}}
+
Representa el área de almacenamiento gestionado. Los elementos en el almacenamiento gestionado los establece el administrador del dominio y son de sólo lectura para la extensión. Intentar modificar este espacio de nombres da como resultado un error.
+
+ +

Eventos

+ +
+
{{WebExtAPIRef("storage.onChanged")}}
+
Se dispara cuando uno o más elementos cambian en un área de almacenamiento.
+
+ +

Browser compatibility

+ +

{{Compat("webextensions.api.storage")}}

+ +

{{WebExtExamples("h2")}}

+ +
Agradecimientos + +

 

+ +

Esta API se basa en la API chrome.storage de Chromium. Esta documentación se deriva de storage.json en el código de Chromium.

+ +

Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0.

+ +

 

+
+ + diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/local/index.html b/files/es/mozilla/add-ons/webextensions/api/storage/local/index.html new file mode 100644 index 0000000000..8c2a288aaf --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/storage/local/index.html @@ -0,0 +1,95 @@ +--- +title: storage.local +slug: Mozilla/Add-ons/WebExtensions/API/storage/local +tags: + - API + - Complentos + - Storage + - WebExtension + - extensiones + - local +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/local +--- +
{{AddonSidebar()}}
+ +
+

Representa el área de almacenamiento local. Los elementos en el almacenamiento local son locales a la máquina en la que se instaló la extensión.

+ +

El navegador puede restringir la cantidad de datos que una extensión puede almacenar en el área de almacenamiento local:

+ +

    Chrome limita la extensión a 5MB de datos usando esta API a menos que tenga el permiso "unlimitedStorage" .
+     Firefox le permite solicitar el permiso "Almacenamiento ilimitado" de la versión 56 en adelante. Aún no restringe la cantidad de datos que su extensión puede almacenar, pero comenzará a hacerlo en una versión futura: por lo tanto, es una buena idea solicitar el permiso de "Almacenamiento ilimitado" ahora, si tiene la intención de almacenar una gran cantidad de datos.

+ +

Cuando se desinstala la extensión, se borra su almacenamiento local asociado.

+ +

También en Firefox, puede evitar que el navegador borre el almacenamiento local al desinstalar "about: config" y configurar las siguientes dos preferencias de navegador como verdaderas: "keepUuidOnUninstall" y "keepStorageOnUninstall". Esta característica se proporciona para ayudar a los desarrolladores a probar sus extensiones. Las extensiones en sí mismas no pueden cambiar estas preferencias.

+ +

Aunque esta API es similar a Window.localStorage, se recomienda que no use Window.localStorage en el código de extensión. Firefox borrará los datos almacenados por las extensiones utilizando la API localStorage en varios escenarios donde los usuarios borran su historial de navegación y los datos por razones de privacidad, mientras que los datos guardados utilizando la API storage.local se conservarán correctamente en estos escenarios.

+
+ +

Metodos

+ +

El objeto local implementa los métodos definidos en el{{WebExtAPIRef("storage.StorageArea")}} tipo:

+ +
+
{{WebExtAPIRef("storage.StorageArea.get()")}}
+
Recupera uno o más elementos del área de almacenamiento.
+
{{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}}
+
Obtiene la cantidad de espacio de almacenamiento (en bytes) utilizado por uno o más elementos que se almacenan en el área de almacenamiento.
+
{{WebExtAPIRef("storage.StorageArea.set()")}}
+
Almacena uno o más artículos en el área de almacenamiento. Si el artículo ya existe, su valor será actualizado. Cuando establezca un valor, se activará el evento {{WebExtAPIRef ("storage.onChanged")}}.
+
{{WebExtAPIRef("storage.StorageArea.remove()")}}
+
Elimina uno o más elementos del área de almacenamiento.
+
{{WebExtAPIRef("storage.StorageArea.clear()")}}
+
Elimina todos los elementos del área de almacenamiento.
+
+ +

Compatibilidad del navegador

+ + + +

{{Compat("webextensions.api.storage.local")}}

+ +

{{WebExtExamples}}

+ +
Agradecimientos + +

 

+ +

Esta API se basa en la API chrome.storage de Chromium. Esta documentación se deriva de storage.json en el código de Chromium.

+ +

Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0.

+ +

 

+
+ + diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.html b/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.html new file mode 100644 index 0000000000..74fc334dbc --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.html @@ -0,0 +1,79 @@ +--- +title: storage.sync +slug: Mozilla/Add-ons/WebExtensions/API/storage/sync +tags: + - Complementos Extensiones +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/sync +--- +
{{AddonSidebar()}}
+ +

Representa el área de almacenamiento de sincronización. Los elementos en el almacenamiento de sincronización están sincronizados por el navegador y están disponibles en todas las instancias de ese navegador en el que el usuario está conectado (por ejemplo, a través de Firefox Sync o una cuenta de Google), en diferentes dispositivos.

+ +

Para Firefox, un usuario debe tener complementos seleccionados en las opciones de "about:preferences".

+ +

Tenga en cuenta que la implementación de storage.sync en Firefox se basa en la ID del complemento. Si usa storage.sync, debe establecer una ID para su extensión usando la clave applications manifest.json.

+ +

El principal caso de uso de esta API es almacenar las preferencias sobre su extensión y permitir que el usuario las sincronice con diferentes perfiles. Puede almacenar hasta 100 KB de datos utilizando esta API. Si intenta almacenar más que esto, la llamada fallará con un mensaje de error. La API se proporciona sin ninguna garantía sobre el tiempo de actividad o el rendimiento.

+ +

Metodos

+ +

El objeto de sincronización implementa los métodos definidos en el {{WebExtAPIRef("storage.StorageArea")}} ponga:

+ +
+
{{WebExtAPIRef("storage.StorageArea.get()")}}
+
Recupera uno o más elementos del área de almacenamiento.
+
{{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}}
+
Obtiene la cantidad de espacio de almacenamiento (en bytes) utilizado por uno o más elementos que se almacenan en el área de almacenamiento.
+
{{WebExtAPIRef("storage.StorageArea.set()")}}
+
Almacena uno o más artículos en el área de almacenamiento. Si el artículo ya existe, su valor será actualizado.
+
{{WebExtAPIRef("storage.StorageArea.remove()")}}
+
Elimina uno o más elementos del área de almacenamiento.
+
{{WebExtAPIRef("storage.StorageArea.clear()")}}
+
Elimina todos los elementos del área de almacenamiento.
+
+ +

Compatibilidad del navegador

+ + + +

{{Compat("webextensions.api.storage.sync")}}

+ +

{{WebExtExamples}}

+ +
Agradecimientos + +

Esta API está basada en la API de Chromium's chrome.storage API. Esta documentación se deriva de storage.json en el código de Chromium.

+ +

Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0.

+
+ + diff --git a/files/es/mozilla/add-ons/webextensions/api/webnavigation/index.html b/files/es/mozilla/add-ons/webextensions/api/webnavigation/index.html new file mode 100644 index 0000000000..d561c6d796 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/webnavigation/index.html @@ -0,0 +1,144 @@ +--- +title: webNavigation +slug: Mozilla/Add-ons/WebExtensions/API/webNavigation +translation_of: Mozilla/Add-ons/WebExtensions/API/webNavigation +--- +
{{AddonSidebar}}
+ +

Add event listeners for the various stages of a navigation. A navigation consists of a frame in the browser transitioning from one URL to another, usually (but not always) in response to a user action like clicking a link or entering a URL in the location bar.

+ +

Compared with the {{WebExtAPIRef("webRequest")}} API: navigations usually result in the browser making web requests, but the webRequest API is concerned with the lower-level view from the HTTP layer, while the webNavigation API is more concerned with the view from the browser UI itself.

+ +

Each event corresponds to a particular stage in the navigation. The sequence of events is like this:

+ +

+ + + +

Each navigation is a URL transition in a particular browser frame. The browser frame is identified by a tab ID and a frame ID. The frame may be the top-level browsing context in the tab, or may be a nested browsing context implemented as an iframe.

+ +

Each event's addListener() call accepts an optional filter parameter. The filter will specify one or more URL patterns, and the event will then only be fired for navigations in which the target URL matches one of the patterns.

+ +

The onCommitted event listener is passed two additional properties: a {{WebExtAPIRef("webNavigation.TransitionType","TransitionType")}} indicating the cause of the navigation (for example, because the user clicked a link, or because the user selected a bookmark), and a {{WebExtAPIRef("webNavigation.TransitionQualifier","TransitionQualifier")}} providing further information about the navigation.

+ +

To use this API you need to have the "webNavigation" permission.

+ +

Types

+ +
+
{{WebExtAPIRef("webNavigation.TransitionType")}}
+
Cause of the navigation: for example, the user clicked a link, or typed an address, or clicked a bookmark.
+
{{WebExtAPIRef("webNavigation.TransitionQualifier")}}
+
+
Extra information about a transition.
+
+
+ +

Functions

+ +
+
{{WebExtAPIRef("webNavigation.getFrame()")}}
+
Retrieves information about a particular frame. A frame may be the top-level frame in a tab or a nested iframe, and is uniquely identified by a tab ID and a frame ID.
+
{{WebExtAPIRef("webNavigation.getAllFrames()")}}
+
+

Given a tab ID, retrieves information about all the frames it contains.

+
+
+ +

Events

+ +
+
{{WebExtAPIRef("webNavigation.onBeforeNavigate")}}
+
+

Fired when the browser is about to start a navigation event.

+
+
{{WebExtAPIRef("webNavigation.onCommitted")}}
+
Fired when a navigation is committed. At least part of the new document has been received from the server and the browser has decided to switch to the new document.
+
{{WebExtAPIRef("webNavigation.onDOMContentLoaded")}}
+
Fired when the DOMContentLoaded event is fired in the page.
+
{{WebExtAPIRef("webNavigation.onCompleted")}}
+
Fired when a document, including the resources it refers to, is completely loaded and initialized. This is equivalent to the DOM load event.
+
{{WebExtAPIRef("webNavigation.onErrorOccurred")}}
+
Fired when an error occurs and the navigation is aborted. This can happen if either a network error occurred, or the user aborted the navigation.
+
{{WebExtAPIRef("webNavigation.onCreatedNavigationTarget")}}
+
Fired when a new window, or a new tab in an existing window, is created to host a navigation: for example, if the user opens a link in a new tab.
+
{{WebExtAPIRef("webNavigation.onReferenceFragmentUpdated")}}
+
Fired if the fragment identifier for a page is changed.
+
{{WebExtAPIRef("webNavigation.onTabReplaced")}}
+
+

Fired when the contents of the tab is replaced by a different (usually previously pre-rendered) tab.

+
+
{{WebExtAPIRef("webNavigation.onHistoryStateUpdated")}}
+
Fired when the page used the history API to update the URL displayed in the browser's location bar.
+
+ +

Browser compatibility

+ +

{{Compat("webextensions.api.webNavigation")}}

+ + + +

Edge incompatibilities

+ +

Promises are not supported in Edge. Use callbacks instead.

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.webNavigation API. This documentation is derived from web_navigation.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html b/files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html new file mode 100644 index 0000000000..1dffe19399 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html @@ -0,0 +1,15 @@ +--- +title: Browser support for JavaScript APIs +slug: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +--- +
{{AddonSidebar}}
+ +
{{WebExtAllCompatTables}}
+ + + +
Acknowledgements + +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
diff --git a/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html b/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html new file mode 100644 index 0000000000..34668d6ba1 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html @@ -0,0 +1,291 @@ +--- +title: Incompatibilidades con Chrome +slug: Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities +--- +

WebExtensions está diseñado para ser compatible con las extensiones de Chrome y Opera: en la medida de lo posible, las extensiones escritas para esos navegadores deberían ejecutarse en Firefox con cambios mínimos.

+ +

Sin embargo, Firefox cuenta actualmente con soporte para sólo un conjunto limitado de funciones y API compatibles con Chrome y Opera. Estamos trabajando en agregar más soporte, pero muchas características aún no son compatibles, y es posible que nunca admitamos algunas.

+ +

En este artículo se enumeran todas las características y API que se admiten total o parcialmente en Firefox. Cuando una característica está parcialmente soportada, hemos indicado cuáles son las lagunas.

+ +

Es seguro asumir que las funciones y las API que no se enumeran aquí en absoluto aún no son compatibles.

+ +

Funciones de manifest.json

+ +

Claves completamente compatibles

+ + + +

Claves parcialmente admitidas

+ +

Datos de fondo

+ +

Firefox no admite la propiedad "persistent". Los scripts de fondo permanecen cargados todo el tiempo.

+ +

Scripts de contenido

+ +

Firefox no admite actualmente:

+ + + +

Permisos

+ +

Firefox aún no admite los siguientes permisos:

+ + + +

Obviamente, también no admite permisos para las APIs que no son compatibles.

+ +

APIs JavaScript

+ +

APIs completamente soportadas

+ + + +

APIs parcialmente soportadas

+ +

marcadores

+ + + +

browserAction

+ + + +

cookies

+ + + +

extension

+ + + +

i18n

+ + + +

notifications

+ + + +

Tiempo de ejecución

+ + + +

Almacenamiento

+ + + +

tabs

+ + + +

Firefox treats highlighted and active as the same since Firefox cannot select multiple tabs.

+ +

Firefox doesn't yet support the callback argument to executeScript().

+ +

webNavigation

+ + + +

onReferenceFragmentUpdated also triggers for pushState.

+ +

webRequest

+ + + +

windows

+ + + +

Planned APIs

+ +

We don't yet support the following APIs, but plan to, soon:

+ + + +

CSS

+ +

Localized String Interpolation

+ +

We currently do not support interpolation of localized strings __MSG_ tokens in extension CSS files: {{bug(1209184)}}.

+ +

Relative URLs

+ +

We resolve URLs in injected CSS files relative to the CSS file itself, rather than to the page it's injected into.

+ +

Miscellaneous incompatibilities

+ + diff --git "a/files/es/mozilla/add-ons/webextensions/depuraci\303\263n/index.html" "b/files/es/mozilla/add-ons/webextensions/depuraci\303\263n/index.html" new file mode 100644 index 0000000000..c24f9d07f5 --- /dev/null +++ "b/files/es/mozilla/add-ons/webextensions/depuraci\303\263n/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/mozilla/add-ons/webextensions/examples/index.html b/files/es/mozilla/add-ons/webextensions/examples/index.html new file mode 100644 index 0000000000..40900fa368 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/examples/index.html @@ -0,0 +1,24 @@ +--- +title: Ejemplos de extensiones +slug: Mozilla/Add-ons/WebExtensions/Examples +tags: + - WebExgtensions +translation_of: Mozilla/Add-ons/WebExtensions/Examples +--- +
{{AddonSidebar}}
+ +

Para ayudar en la ilustración de cómo desarrollar las extension, se mantiene un repositorio de ejemplos simples de extensions en https://github.com/mdn/webextensions-examples. Este artículo describe las extensiones en ese repositorio.

+ +

Estos ejemplo funcionan en Firefox Nightly: la mayoría funcionan en versiones más recientes de Firefox, pero revise la clave strict_min_version en el manifest.json del complemento para estar seguro.

+ +

Si quiere probar estos ejemplo, tiene tres opciones principales:

+ +
    +
  1. Clone el repositorio, entonces, carge el complemento directo desde su directorio, utilizando la función "Cargar complemento temporalmente". El complemento estará cargado hasta que se reinicie Firefox.
    2. +
  2. Clone el repositorio, luego utilice la herrmienta web-ext en la línea de comando para ejecutar Firefox con el complemento instalado.
    3. +
  3. Clone el repositorio, luego diríjase al directorio build. Este contiene todos los ejemplos firmados y compilados, así que usted puede abrilos en Firefox (utilizando Archivo/Abrir archivo) e instalarlos permanentemente, justamente como cuando se instala un complemento desde addons.mozilla.org.
    4. +
+ +

Si quiere contribuir al repositorio, ¡envíe una petición de pull!

+ +

{{WebExtAllExamples}}

diff --git a/files/es/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html b/files/es/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html new file mode 100644 index 0000000000..426aeae50f --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html @@ -0,0 +1,159 @@ +--- +title: Extending the developer tools +slug: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools +translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools +--- +
{{AddonSidebar}}
+ +
+

This page describes devtools APIs as they exist in Firefox 55. Although the APIs are based on the Chrome devtools APIs, there are still many features that are not yet implemented in Firefox, and therefore are not documented here. To see which features are currently missing please see Limitations of the devtools APIs.

+
+ +

You can use WebExtensions APIs to extend the browser's built-in developer tools. To create a devtools extension, include the "devtools_page" key in manifest.json:

+ +
"devtools_page": "devtools/devtools-page.html"
+ +

The value of this key is a URL pointing to an HTML file that's been bundled with your extension. The URL should be relative to the manifest.json file itself.

+ +

The HTML file defines a special page in the extension, called the devtools page.

+ +

The devtools page

+ +

The devtools page is loaded when the browser devtools are opened, and unloaded when it is closed. Note that because the devtools window is associated with a single tab, it's quite possible for more than one devtools window - hence more than one devtools page - to exist at the same time.

+ +

The devtools page doesn't have any visible DOM, but can include JavaScript sources using <script> tags. The sources must be bundled with the extension itself. The sources get access to:

+ + + +

Note that the devtools page does not get access to any other WebExtension APIs, and the background page doesn't get access to the devtools APIs. Instead, the devtools page and the background page must communicate using the runtime messaging APIs. Here's an example:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <script src="devtools.js"></script>
+  </body>
+</html>
+ +

The devtools.js file will hold the actual code creating your dev tools extensions.

+ +

Creating panels

+ +

The devtools window hosts a number of separate tools - the JavaScript Debugger, Network Monitor, and so on. A row of tabs across the top lets the user switch between the different tools. The window hosting each tool's user interface is called a "panel".

+ +

Using the devtools.panels.create() API, you can create your own panel in the devtools window:

+ +
browser.devtools.panels.create(
+  "My Panel",                      // title
+  "icons/star.png",                // icon
+  "devtools/panel/panel.html"      // content
+).then((newPanel) => {
+  newPanel.onShown.addListener(initialisePanel);
+  newPanel.onHidden.addListener(unInitialisePanel);
+});
+ +

This takes three mandatory arguments: the panel's title, icon, and content. It returns a Promise which resolves to a devtools.panels.ExtensionPanel object representing the new panel.

+ +

Interacting with the target window

+ +

The developer tools are always attached to a particular browser tab. This is referred to as the "target" for the developer tools, or the "inspected window". You can interact with the inspected window using the devtools.inspectedWindow API.

+ +

Running code in the target window

+ +

The devtools.inspectedWindow.eval() provides one way to run code in the inspected window.

+ +

This is somewhat like using {{WebExtAPIRef("tabs.executeScript()")}} to inject a content script, but with one important difference:

+ + + +
+

Note that a clean view of the DOM is a security feature, intended to help prevent hostile pages from tricking extensions by redefining the behavior of native DOM functions. This means you need to be very careful using eval(), and should use a normal content script if you can.

+
+ +

Scripts loaded using devtools.inspectedWindow.eval() also don't see any JavaScript variables defined by content scripts.

+ +

Working with content scripts

+ +

A devtools document doesn't have direct access to {{WebExtAPIRef("tabs.executeScript()")}}, so if you need to inject a content script, the devtools document must send a message to the background script asking it to inject the script. The devtools.inspectedWindow.tabId provides the ID of the target tab: the devtools document can pass this to the background script, and the background script can in turn pass it into {{WebExtAPIRef("tabs.executeScript()")}}:

+ +
// devtools-panel.js
+
+const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
+
+window.addEventListener("click", () => {
+  browser.runtime.sendMessage({
+    tabId: browser.devtools.inspectedWindow.tabId,
+    script: scriptToAttach
+  });
+});
+ +
// background.js
+
+function handleMessage(request, sender, sendResponse) {
+  browser.tabs.executeScript(request.tabId, {
+    code: request.script
+  });
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+ +

If you need to exchange messages between the content scripts running in the target window and a devtools document, it's a good idea to use the {{WebExtAPIRef("runtime.connect()")}} and {{WebExtAPIRef("runtime.onConnect")}} to set up a connection between the background page and the devtools document. The background page can then maintain a mapping between tab IDs and {{WebExtAPIRef("runtime.Port")}} objects, and use this to route messages between the two scopes.

+ +

+ +

Limitations of the devtools APIs

+ +

These APIs are based on the Chrome devtools APIs, but many features are still missing, compared with Chrome. This section lists the features that are still not implemented, as of Firefox 54. Note that the devtools APIs are under active development and we expect to add support for most of them in future releases.

+ +

devtools.inspectedWindow

+ +

The following are not supported:

+ + + +

None of the options to inspectedWindow.eval() are supported.

+ +

Scripts injected using inspectedWindow.eval() can't use all the Console's command-line helper functions, but $0 and inspect(...) are both supported (starting from Firefox 55).

+ +

devtools.panels

+ +

The following are not supported:

+ + + +

Examples

+ +

The webextensions-examples repo on GitHub, contains several examples of extensions that use devtools panels:

+ + diff --git a/files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.html b/files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.html new file mode 100644 index 0000000000..1d48eec011 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.html @@ -0,0 +1,199 @@ +--- +title: Implementar una página de configuración +slug: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page +tags: + - JavaScript +translation_of: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page +--- +
{{AddonSidebar}}
+ +

Una página de configuración ofrece a los usuarios una manera de ver y cambiar los ajustes (algunas veces también llamados "preferencias" u "opciones") para el complemento.

+ +

Con WebExtensions, los ajustes generalmente se almacenan utilizando la  API storage . La implementación de una página de configuración se realiza en un proceso de tres pasos:

+ + + +
+

También puedes abrir esta página mediante programación utilizando la función runtime.openOptionsPage() .

+
+ +

Una sencilla  ExtensionWeb

+ +

En primer lugar, vamos a escribir una extensión que añada un borde azul a todas las páginas que el usuario visita.

+ +

Crea un nuevo directorio llamado "configuración", a continuación crea un archivo llamado"manifest.json" en su interior ,con el siguiente contenido:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Settings example",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["borderify.js"]
+    }
+  ],
+
+  "applications": {
+    "gecko": {
+      "id": "settings-example@mozilla.org"
+    }
+  }
+
+}
+ +

Este complemento da instrucciones al navegador para cargar un script de contenido llamado "borderify.js" en todas las páginas web que el usuario visita.

+ +

Ten en cuenta que también hemos incluido la clave applications .  Necesitaremos esto (solamente en Firefox ) porque si hay un error, debemos establecer explícitamente (la identidad del complemento) add-on ID , y también incluimos la clave de manifiesto options_ui. Aunque no utilicemos la clave options_ui en ese momento, lo haremos en la siguiente sección. Ver el  bug 1269545.

+ +

A continuación, crea un archivo llamado "borderify.js" en el directorio "configuración" , y añade el siguiente contenido :

+ +
document.body.style.border = "10px solid blue";
+ +

Esto solo añade un borde azul a la página.

+ +

Ahora instala WebExtension y comprueba — abre cualquier página web que te guste:

+ +

{{EmbedYouTube("E-WUhihF8fw")}}

+ +

Añadir ajustes

+ +

Ahora vamos a crear una página de configuración que permita al usuario establecer el color del borde.

+ +

En primer lugar, actualiza "manifest.json" para que tenga este contenido:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Settings example",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["borderify.js"]
+    }
+  ],
+
+  "applications": {
+    "gecko": {
+      "id": "settings-example@mozilla.org"
+    }
+  },
+
+  "options_ui": {
+    "page": "options.html"
+  },
+
+  "permissions": ["storage"]
+
+}
+
+ +

Hemos añadido dos nuevas claves de manifiesto:

+ + + +

A continuacion, como hemos prometido  crear "options.html", vamos a realizarlo. Crea un archivo con ese nombre en el directorio "configuración" , y añade el siguiente contenido:

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+
+  <body>
+
+    <form>
+        <label>Border color<input type="text" id="color" ></label>
+        <button type="submit">Save</button>
+    </form>
+
+    <script src="options.js"></script>
+
+  </body>
+
+</html>
+
+ +

Esto define un elemento HTML {{htmlelement("form")}} con un texto etiquetado {{htmlelement("input")}} y un botón de envio {{htmlelement("button")}}. también incluye un script llamado "options.js".

+ +

Crea "options.js", de nuevo en el directorio "configuración" , y añade el siguiente contenido:

+ +
function saveOptions(e) {
+  chrome.storage.local.set({
+    color: document.querySelector("#color").value
+  });
+}
+
+function restoreOptions() {
+  chrome.storage.local.get("color", (res) => {
+    document.querySelector("#color").value = res.color || "blue";
+  });
+}
+
+document.addEventListener("DOMContentLoaded", restoreOptions);
+document.querySelector("form").addEventListener("submit", saveOptions);
+ +

Esto hace dos cosas:

+ + + +

Finalmente, actualiza "borderify.js" para leer el color del borde del almacenamiento:

+ +
chrome.storage.local.get(null, (res) => {
+  var color = "blue";
+  if (res.color) {
+    color = res.color;
+  }
+  document.body.style.border = "10px solid " + color;
+});
+ +

En este punto, el complemento completo debe tener este aspecto:

+ +
settings/
+    borderify.js
+    manifest.json
+    options.html
+    options.js
+ +

Ahora:

+ + + +

En Firefox se puede accededer a la página de configuración visitando : complementos y haciendo click en el botón "Preferencias" junto a la entrada del complemento.

+ +

{{EmbedYouTube("ECt9cbWh1qs")}}

+ +

Aprende más

+ + + +

 

diff --git a/files/es/mozilla/add-ons/webextensions/index.html b/files/es/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..ec02f9c6df --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,155 @@ +--- +title: Extensiones del navegador +slug: Mozilla/Add-ons/WebExtensions +tags: + - Complementos + - Dónde empezar + - Manifiesto + - WebExtensions + - extensiones +translation_of: Mozilla/Add-ons/WebExtensions +--- +
{{AddonSidebar}}
+ +

Las extensiones pueden extender y modificar la capacidad de un navegador. Las extensiones para Firefox son construidas utilizando las APIs de WebExtension, un sistema para el desarrollo de extensiones multi-navegador. En gran medida, el sistema es compatible con la API de extensión soportada por Google Chrome, Opera y el borrador del grupo de la comunidad del W3C.

+ +

Las extensiones escritas para estos navegadores se ejecutarán en la mayoría de los casos en Firefox o Microsoft Edge con sólo unos pocos cambios. La API también es totalmente compatible con multiprocesos de Firefox.

+ +

Si tiene alguna idea, pregunta, o necesita ayuda en el proceso de migración de un complemento heredado al uso de las APIs de WebExtension, puede ponerse en contacto con nosotros a través de la lista de correo dev-addons o en el canal #webextensions de IRC.

+ +
+
+

Primeros pasos

+ + + +

 

+ +

Conceptos

+ + + +

 

+ +

Interfaz de usuario

+ + + +

Cómo

+ + + +

Portado

+ + + +

Flujo de trabajo de Firefox

+ + +
+ +
+

Reference

+ +

JavaScript APIs

+ + + +

APIs de JavaScript

+ +
{{ListSubpages("/en-US/Add-ons/WebExtensions/API")}}
+ +

Manifest keys

+ + + +
{{ListSubpages("/en-US/Add-ons/WebExtensions/manifest.json")}}
+
+
+ + diff --git a/files/es/mozilla/add-ons/webextensions/intercept_http_requests/index.html b/files/es/mozilla/add-ons/webextensions/intercept_http_requests/index.html new file mode 100644 index 0000000000..a87d079ecd --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/intercept_http_requests/index.html @@ -0,0 +1,156 @@ +--- +title: Interceptar peticiones HTTP +slug: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests +tags: + - Complementos + - Cómos + - WebExtensions + - extensiones +translation_of: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests +--- +
{{AddonSidebar}}
+ +

Para interceptar peticiones HTTP, utilice la API {{WebExtAPIRef("webRequest")}}. Esta API le permite agregar escuchadores de evento para varias etapas en la realización de las solicitudes HTTP. En los escuchadores, tu puedes:

+ + + +

En este artículo se verán los tres diferentes usos del módulo webRequest:

+ + + +

Registrar solicitudes de URLs

+ +

Crea un nuevo directorio llamado "requests". En ese directorio, crea un archivo llamado "manifest.json" el cual debe poseer el siguiente contenido:

+ +
{
+  "description": "Demostrar webRequests",
+  "manifest_version": 2,
+  "name": "webRequest-demo",
+  "version": "1.0",
+
+  "permissions": [
+    "webRequest"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+}
+ +

Luego, crea un archivo llamado "background.js" con el siguiente contenido:

+ +
function logURL(requestDetails) {
+  console.log("Cargando: " + requestDetails.url);
+}
+
+browser.webRequest.onBeforeRequest.addListener(
+  logURL,
+  {urls: ["<all_urls>"]}
+);
+
+
+ +

En este punto se utiliza {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} para llamar la función logURL() junstamente después de realizar la solicitud. La función logURL() se apropia de la solicitud URL del objeto de eventos y lo registra en la consola del navegador. El patrón {urls: ["<all_urls>"]} signinifica que se pueden interceptar todas las solicitudes HTTP de todas las URLs.

+ +

Para probarlo, instala la WebExtension, abre la consola del navegador, y abre algunas páginas Web. En la consola del navegador, deberías ver las URLs de cualquier recurso que el navegador solicita:

+ +

{{EmbedYouTube("X3rMgkRkB1Q")}}

+ +

Redireccionar solicitudes

+ +

Ahora utilice webRequest para redireccionar todas las solicitudes HTTP. Primero, reemplace manifest.json con lo siguiente:

+ +
{
+
+  "description": "Demostrar webRequests",
+  "manifest_version": 2,
+  "name": "webRequest-demo",
+  "version": "1.0",
+
+  "permissions": [
+    "webRequest", "webRequestBlocking"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+
+}
+ +

El único cambio fue la adición de los permisos "webRequestBlocking". Se necesita preguntar por este extra-permiso todas las veces que se está activamente modificando una solicitud.

+ +

Luego, reemplace "background.js" con esto:

+ +
var pattern = "https://mdn.mozillademos.org/*";
+
+function redirect(requestDetails) {
+  console.log("Redireccionando: " + requestDetails.url);
+  return {
+    redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif"
+  };
+}
+
+browser.webRequest.onBeforeRequest.addListener(
+  redirect,
+  {urls:[pattern], types:["image"]},
+  ["blocking"]
+);
+ +

De nuevo, se utiliza el escuchador de evento {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} para ejecutar una función justamente antes de que cada solicitud sea realizada. Esta función reemplazará el objetivo URL con redirectUrl que está definido en la función.

+ +

Esta vez no se está interceptando cada solicitud: la opción {urls:[pattern], types:["image"]} especifica que solo se debería interceptar solicitudes (1) de URLs que residen bajo "https://mdn.mozillademos.org/" (2) para recursos de imágenes. Vea {{WebExtAPIRef("webRequest.RequestFilter")}} para más información sobre esto.

+ +

Dése cuenta también, que se esta pasando la opción llamada "blocking": se necesita pasar cada vez que se requiera modificar la solicitud. Esto hace que la función del escuchador bloquee la solicitud de la red, así que el navegador espera que el escuchador retorne antes de continuar. Vea la documentación {{WebExtAPIRef("webRequest.onBeforeRequest")}} para conocer más sobre "blocking".

+ +

Para probarlo, abra una página de MDN que contenga bastantes imágenes (por ejemplo https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor), recargue la WebExtension, y luego recargue la página de MDN:

+ +

{{EmbedYouTube("ix5RrXGr0wA")}}

+ +

Modificar las cabeceras de la solicitud

+ +

Finalmente se utilizará webRequest para modificar las cabeceras de las solicitudes. En este ejempo se modificará la cabecera "User-Agent" así que el navegador se identificará por sí mismo como Opera 12.16, pero solamente cuando se visitan páginas de "http://useragentstring.com/".

+ +

El "manifest.json" puede permanecer igual que el ejemplo anterior.

+ +

Reemplace "background.js" con el siguiente código:

+ +
var targetPage = "http://useragentstring.com/*";
+
+var ua = "Opera/9.80 (X11; Linux i686; Ubuntu/14.10) Presto/2.12.388 Version/12.16";
+
+function rewriteUserAgentHeader(e) {
+  for (var header of e.requestHeaders) {
+    if (header.name == "User-Agent") {
+      header.value = ua;
+    }
+  }
+  return {requestHeaders: e.requestHeaders};
+}
+
+browser.webRequest.onBeforeSendHeaders.addListener(
+  rewriteUserAgentHeader,
+  {urls: [targetPage]},
+  ["blocking", "requestHeaders"]
+);
+ +

Aquí se utiliza el escuchador de eventos {{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}} para ejecutar una función juntamente antes de que la solicitud de las cabeceras sean enviadas.

+ +

La función escuchadora será llamada solamente por solicitudes de URLs que coincidan con el patrón targetPage. Dése cuenta de nuevo que "blocking" se ha pasado como una opción. También se pasó "requestHeaders", lo cual significa que al escuchador pasará un array conteniendo las cabeceras de la solicitud que se espera enviar. Vea {{WebExtAPIRef("webRequest.onBeforeSendHeaders")}} para más información en estas opciones.

+ +

La función escuchadora busca la cabecera "User-Agent" en el array de la solicitud de cabeceras, reemplaza el valor con el valor de la variable ua, y regresa el array modificado. Este array modificado será el enviado al servidor.

+ +

Para comprobarlo, abra useragentstring.com y verifique que identifica al navegador como Firefox. Luego recargue el complemento, recargue useragentstring.com, y compruebe que Firefox es identificado ahora como Opera:

+ +

{{EmbedYouTube("SrSNS1-FIx0")}}

+ +

Aprenda más

+ +

Para aprender más sobre todas las cosas que puede hacer con la API webRequest, vea su propia documentación de referencia.

diff --git a/files/es/mozilla/add-ons/webextensions/internationalization/index.html b/files/es/mozilla/add-ons/webextensions/internationalization/index.html new file mode 100644 index 0000000000..89c542a2e7 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/internationalization/index.html @@ -0,0 +1,405 @@ +--- +title: Internationalization +slug: Mozilla/Add-ons/WebExtensions/Internationalization +translation_of: Mozilla/Add-ons/WebExtensions/Internationalization +--- +
H
+ +

The WebExtensions API has a rather handy module available for internationalizing extensions — i18n. In this article we'll explore its features and provide a practical example of how it works. The i18n system for extensions built using WebExtension APIs is similar to common JavaScript libraries for i18n such as i18n.js.

+ +
+

The example extension featured in this article — notify-link-clicks-i18n — is available on GitHub. Follow along with the source code as you go through the sections below.

+
+ +

Anatomy of an internationalized extension

+ +

An internationalized extension can contain the same features as any other extension — background scripts, content scripts, etc. — but it also has some extra parts to allow it to switch between different locales. These are summarized in the following directory tree:

+ + + +

Let's explore each of the new features in turn — each of the below sections represents a step to follow when internationalizing your extension.

+ +

Providing localized strings in _locales

+ +
+
You can look up language subtags using the Find tool on the Language subtag lookup page. Note that you need to search for the English name of the language.
+
+ +

Every i18n system requires the provision of strings translated into all the different locales you want to support. In extensions, these are contained within a directory called _locales, placed inside the extension root. Each individual locale has its strings (referred to as messages) contained within a file called messages.json, which is placed inside a subdirectory of _locales, named using the language subtag for that locale's language.

+ +

Note that if the subtag includes a basic language plus a regional variant, then the language and variant are conventionally separated using a hyphen: for example, "en-US". However, in the directories under _locales, the separator must be an underscore: "en_US".

+ +

So for example, in our sample app we have directories for "en" (English), "de" (German), "nl" (Dutch), and "ja" (Japanese). Each one of these has a messages.json file inside it.

+ +

Let's now look at the structure of one of these files (_locales/en/messages.json):

+ +
{
+  "extensionName": {
+    "message": "Notify link clicks i18n",
+    "description": "Name of the extension."
+  },
+
+  "extensionDescription": {
+    "message": "Shows a notification when the user clicks on links.",
+    "description": "Description of the extension."
+  },
+
+  "notificationTitle": {
+    "message": "Click notification",
+    "description": "Title of the click notification."
+  },
+
+  "notificationContent": {
+    "message": "You clicked $URL$.",
+    "description": "Tells the user which link they clicked.",
+    "placeholders": {
+      "url" : {
+        "content" : "$1",
+        "example" : "https://developer.mozilla.org"
+      }
+    }
+  }
+}
+ +

This file is standard JSON — each one of its members is an object with a name, which contains a message and a description. All of these items are strings; $URL$ is a placeholder, which is replaced with a substring at the time the notificationContent member is called by the extension. You'll learn how to do this in the {{anch("Retrieving message strings from JavaScript")}} section.

+ +
+

Note: You can find much more information about the contents of messages.json files in our Locale-Specific Message reference.

+
+ +

Internationalizing manifest.json

+ +

There are a couple of different tasks to carry out to internationalize your manifest.json.

+ +

Retrieving localized strings in manifests

+ +

Your manifest.json includes strings that are displayed to the user, such as the extension's name and description. If you internationalize these strings and put the appropriate translations of them in messages.json, then the correct translation of the string will be displayed to the user, based on the current locale, like so.

+ +

To internationalize strings, specify them like this:

+ +
"name": "__MSG_extensionName__",
+"description": "__MSG_extensionDescription__",
+ +

Here, we are retrieving message strings dependant on the browser's locale, rather than just including static strings.

+ +

To call a message string like this, you need to specify it like this:

+ +
    +
  1. Two underscores, followed by
    2. +
  2. The string "MSG", followed by
    3. +
  3. One underscore, followed by
    4. +
  4. The name of the message you want to call as defined in messages.json, followed by
    5. +
  5. Two underscores
    6. +
+ +
__MSG_ + messageName + __
+ +

Specifying a default locale

+ +

Another field you should specify in your manifest.json is default_locale:

+ +
"default_locale": "en"
+ +

This specifies a default locale to use if the extension doesn't include a localized string for the browser's current locale. Any message strings that are not available in the browser locale are taken from the default locale instead. There are some more details to be aware of in terms of how the browser selects strings — see {{anch("Localized string selection")}}.

+ +

Locale-dependent CSS

+ +

Note that you can also retrieve localized strings from CSS files in the extension. For example, you might want to construct a locale-dependent CSS rule, like this:

+ +
header {
+  background-image: url(../images/__MSG_extensionName__/header.png);
+}
+ +

This is useful, although you might be better off handling such a situation using {{anch("Predefined messages")}}.

+ +

Retrieving message strings from JavaScript

+ +

So, you've got your message strings set up, and your manifest. Now you just need to start calling your message strings from JavaScript so your extension can talk the right language as much as possible. The actual i18n API is pretty simple, containing just four main methods:

+ + + +

In our notify-link-clicks-i18n example, the background script contains the following lines:

+ +
var title = browser.i18n.getMessage("notificationTitle");
+var content = browser.i18n.getMessage("notificationContent", message.url);
+ +

The first one just retrieves the notificationTitle message field from the available messages.json file most appropriate for the browser's current locale. The second one is similar, but it is being passed a URL as a second parameter. What gives? This is how you specify the content to replace the $URL$ placeholder we see in the notificationContent message field:

+ +
"notificationContent": {
+  "message": "You clicked $URL$.",
+  "description": "Tells the user which link they clicked.",
+  "placeholders": {
+    "url" : {
+      "content" : "$1",
+      "example" : "https://developer.mozilla.org"
+    }
+  }
+}
+
+ +

The "placeholders" member defines all the placeholders, and where they are retrieved from. The "url" placeholder specifies that its content is taken from $1, which is the first value given inside the second parameter of getMessage(). Since the placeholder is called "url", we use $URL$ to call it inside the actual message string (so for "name" you'd use $NAME$, etc.) If you have multiple placeholders, you can provide them inside an array that is given to {{WebExtAPIRef("i18n.getMessage()")}} as the second parameter — [a, b, c] will be available as $1, $2, and $3, and so on, inside messages.json.

+ +

Let's run through an example: the original notificationContent message string in the en/messages.json file is

+ +
You clicked $URL$.
+ +

Let's say the link clicked on points to https://developer.mozilla.org. After the {{WebExtAPIRef("i18n.getMessage()")}} call, the contents of the second parameter are made available in messages.json as $1, which replaces the $URL$ placeholder as defined in the "url" placeholder. So the final message string is

+ +
You clicked https://developer.mozilla.org.
+ +

Direct placeholder usage

+ +

It is possible to insert your variables ($1, $2, $3, etc.) directly into the message strings, for example we could rewrite the above "notificationContent" member like this:

+ +
"notificationContent": {
+  "message": "You clicked $1.",
+  "description": "Tells the user which link they clicked."
+}
+ +

This may seem quicker and less complex, but the other way (using "placeholders") is seen as best practice. This is because having the placeholder name (e.g. "url") and example helps you to remember what the placeholder is for — a week after you write your code, you'll probably forget what $1–$8 refer to, but you'll be more likely to know what your placeholder names refer to.

+ +

Hardcoded substitution

+ +

It is also possible to include hardcoded strings in placeholders, so that the same value is used every time, instead of getting the value from a variable in your code. For example:

+ +
"mdn_banner": {
+  "message": "For more information on web technologies, go to $MDN$.",
+  "description": "Tell the user about MDN",
+  "placeholders": {
+    "mdn": {
+      "content": "https://developer.mozilla.org/"
+    }
+  }
+}
+ +

In this case we are just hardcoding the placeholder content, rather than getting it from a variable value like $1. This can sometimes be useful when your message file is very complex, and you want to split up different values to make the strings more readable in the file, plus then these values could be accessed programmatically.

+ +

In addition, you can use such substitutions to specify parts of the string that you don't want to be translated, such as person or business names.

+ +

Localized string selection

+ +

Locales can be specified using only a language code, like fr or en, or they may be further qualified with a region code, like en_US or en_GB, which describes a regional variant of the same basic language. When you ask the i18n system for a string, it will select a string using the following algorithm:

+ +
    +
  1. if there is a messages.json file for the exact current locale, and it contains the string, return it.
    2. +
  2. Otherwise, if the current locale is qualified with a region (e.g. en_US) and there is a messages.json file for the regionless version of that locale (e.g. en), and that file contains the string, return it.
    3. +
  3. Otherwise, if there is a messages.json file for the default_locale defined in the manifest.json, and it contains the string, return it.
    4. +
  4. Otherwise return an empty string.
    5. +
+ +

Take the following example:

+ + + +

Suppose the default_locale is set to fr, and the browser's current locale is en_GB:

+ + + +

Predefined messages

+ +

The i18n module provides us with some predefined messages, which we can call in the same way as we saw earlier in {{anch("Calling message strings from manifests and extension CSS")}}. For example:

+ +
__MSG_extensionName__
+ +

Predefined messages use exactly the same syntax, except with @@ before the message name, for example

+ +
__MSG_@@ui_locale__
+ +

The following table shows the different available predefined messages:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Message nameDescription
@@extension_id +

The extension's internally-generated UUID. You might use this string to construct URLs for resources inside the extension. Even unlocalized extensions can use this message.

+ +

You can't use this message in a manifest file.

+ +

Also note that this ID is not the add-on ID returned by {{WebExtAPIRef("runtime.id")}}, and that can be set using the applications key in manifest.json. It's the generated UUID that appears in the add-on's URL. This means that you can't use this value as the extensionId parameter to {{WebExtAPIRef("runtime.sendMessage()")}}, and can't use it to check against the id property of a {{WebExtAPIRef("runtime.MessageSender")}} object.

+
@@ui_localeThe current locale; you might use this string to construct locale-specific URLs.
@@bidi_dirThe text direction for the current locale, either "ltr" for left-to-right languages such as English or "rtl" for right-to-left languages such as Arabic.
@@bidi_reversed_dirIf the @@bidi_dir is "ltr", then this is "rtl"; otherwise, it's "ltr".
@@bidi_start_edgeIf the @@bidi_dir is "ltr", then this is "left"; otherwise, it's "right".
@@bidi_end_edgeIf the @@bidi_dir is "ltr", then this is "right"; otherwise, it's "left".
+ +

Going back to our earlier example, it would make more sense to write it like this:

+ +
header {
+  background-image: url(../images/__MSG_@@ui_locale__/header.png);
+}
+ +

Now we can just store our local specific images in directories that match the different locales we are supporting — en, de, etc. — which makes a lot more sense.

+ +

Let's look at an example of using @@bidi_* messages in a CSS file:

+ +
body {
+  direction: __MSG_@@bidi_dir__;
+}
+
+div#header {
+  margin-bottom: 1.05em;
+  overflow: hidden;
+  padding-bottom: 1.5em;
+  padding-__MSG_@@bidi_start_edge__: 0;
+  padding-__MSG_@@bidi_end_edge__: 1.5em;
+  position: relative;
+}
+ +

For left-to-right languages such as English, the CSS declarations involving the predefined messages above would translate to the following final code lines:

+ +
direction: ltr;
+padding-left: 0;
+padding-right: 1.5em;
+
+ +

For a right-to-left language like Arabic, you'd get:

+ +
direction: rtl;
+padding-right: 0;
+padding-left: 1.5em;
+ +

Testing out your extension

+ +

Starting in Firefox 45, you can install extensions temporarily from disk — see Loading from disk. Do this, and then try testing out our notify-link-clicks-i18n extension. Go to one of your favourite websites and click a link to see if a notification appears reporting the URL of the clicked link.

+ +

Next, change Firefox's locale to one supported in the extension that you want to test.

+ +
    +
  1. Open "about:config" in Firefox, and search for the intl.locale.requested preference (bear in mind that before Firefox 59, this pref is called general.useragent.locale).
    2. +
  2. If the preference exists, double-click it (or press Return/Enter) to select it, enter the language code for the locale you want to test, then click "OK" (or press Return/Enter). For example in our example extension, "en" (English), "de" (German), "nl" (Dutch), and "ja" (Japanese) are supported. You can also set the value to an empty string (""), which will cause the browser to use the OS default locale.
    3. +
  3. If the intl.locale.requested preference does not exist, right-click the list of preferences (or activate the context menu using the keyboard), and choose "New" followed by "String". Enter intl.locale.requested for the preference name and, "de", or "nl", etc. for the preference value, as described in step 2 above.
    4. +
  4. Search for intl.locale.matchOS and, if the preference exists and has the value true, double-click it  so that it is set to false.
    5. +
  5. Restart your browser to complete the change.
    6. +
+ +
+

Note: This works to change the browser's locale, even if you haven't got the language pack installed for that language. You'll just get the browser UI in your default language if this is the case.

+
+ +
    +
+ +
+

Note: To change the result of getUILanguage the language pack is required, since it reflects the browser UI language and not the language used for extension messages.

+
+ +

Load the extension temporarily from disk again, then test your new locale:

+ + + +

{{EmbedYouTube("R7--fp5pPGg")}}

diff --git a/files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.html b/files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.html new file mode 100644 index 0000000000..0f8550f027 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.html @@ -0,0 +1,74 @@ +--- +title: icons +slug: Mozilla/Add-ons/WebExtensions/manifest.json/icons +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/icons +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
TipoObject
ObligatorioNo
Ejemplo + 
+"icons": {
+  "48": "icon.png",
+  "96": "icon@2x.png"
+}
+
+ +

La propiedad icons especifica los iconos de tu extensión. Esos iconos se usarán para representar la extensión en componentes como el Administrador de complementos.

+ +

Consiste en pares clave-valor del tamaño de la imagen en px y la ruta de la imagen relativa al directorio raíz de la extensión.

+ +

Si icons no esta definido, se utilizará un icono de extensión estándar por defecto.

+ +

Debería suministrar al menos un icono de extensión principal, idealmente de 48x48 px de tamaño. Este es el icono por defecto que se utilizará en el Administrador de complementos. Sin embargo, puedes suministrar iconos de cualquier tamaño y Firefox intentará encontrar el mejor icono para mostrar en los diferentes componentes.

+ +

Firefox tendrá en cuenta la resolución de la pantalla al elegir un icono. Para ofrecer la mejor experiencia visual a los usuarios con pantallas de alta resolución, como las pantallas Retina, proporciona versiones de doble tamaño de todos sus iconos.

+ +

Ejemplo

+ +

Las propiedades del objeto icons especifican el tamaño del icono en px, los valores especifican la ruta relativa del icono. Este ejemplo contiene un icono de extensión de 48px y una versión más grande para pantallas de alta resolución.

+ +
"icons": {
+  "48": "icon.png",
+  "96": "icon@2x.png"
+}
+ +

SVG

+ +

Puede usar SVG y el navegador escalará su icono adecuadamente. Sin embargo, hay dos advertencias:

+ +
    +
  1. Necesitas especificar un viewBox en la imagen. E.g.: + 
    <svg viewBox="0 0 48 48" width="48" height="48" ...
    +
    2. +
  2. Aunque puedes usar un archivo, todavía necesitas especificar varios tamaños del icono en tu manifiesto. E.g.: + 
    "icons": {
+  "48": "icon.svg",
+  "96": "icon.svg"
+}
    +
    3. +
+ +
+

Si está usando un programa como Inkscape para crear SVG, puede que quiera guardarlo como un "SVG simple". Firefox podría confundirse con varios espacios de nombres especiales y no mostrar su icono.

+
+ +

Compatibilidad

+ + + +

{{Compat("webextensions.manifest.icons")}}

diff --git a/files/es/mozilla/add-ons/webextensions/manifest.json/index.html b/files/es/mozilla/add-ons/webextensions/manifest.json/index.html new file mode 100644 index 0000000000..f85e30b4cf --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/manifest.json/index.html @@ -0,0 +1,51 @@ +--- +title: manifest.json +slug: Mozilla/Add-ons/WebExtensions/manifest.json +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json +--- +

{{AddonSidebar}}

+ +
+

Este artículo describe manifest.json para extensiones web. Si estás buscando información acerca de manifest.json en PWAs, revisa el artículo sobre Web App Manifest.

+
+ +

El archivo manifest.json es el único archivo que toda extensión usando la API WebExtension debe contener necesariamente.

+ +

Usando manifest.json, puedes especificar los metadatos básicos de tu extensión como nombre y versión, así como aspectos funcionales de tu extensión (tales como scripts en segundo plano, scripts de contenido y acciones del navegador).

+ +

Es un archivo con formato JSON, con una excepción: permite comentarios con "//".

+ + +

Lista de claves de manifest.json

+ +

Las claves de manifest.json son:

+ +
{{ListSubpages("/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json")}}
+ + +

Notas acerca de las claves de manifest.json

+ + + +

Acceder a las claves de manifest.json en tiempo de ejecución

+ +

Puedes acceder a el manifest desde el código JavaScript de tu extensión utilizando la función {{WebExtAPIRef("runtime.getManifest()")}}:

+ +
browser.runtime.getManifest().version;
+ + +

Compatibilidad de Navegadores

+ +

Para un resumen extendido de las llaves y sub-llaves ver la tabla completa de compatibilidad de manifest.json en navegadores.

+ + + +

{{Compat("webextensions.manifest")}}

+ +

Ver También

+ +

API JavaScript de {{WebExtAPIRef("permissions")}}

diff --git a/files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.html b/files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.html new file mode 100644 index 0000000000..eb7493b62b --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.html @@ -0,0 +1,253 @@ +--- +title: Modify a web page +slug: Mozilla/Add-ons/WebExtensions/Modify_a_web_page +translation_of: Mozilla/Add-ons/WebExtensions/Modify_a_web_page +--- +
{{AddonSidebar}}
+ +
Uno de los usos más comunes para las extensiones es modificar páginas web.  Por ejemplo, una extension puede querer cambiar el estilo de la página, esconder determinados nodos DOM o incluir otros nuevos.
+ +
 
+ +
Existen dos maneras de hacer esto con extensiones Web y APIs:
+ +
 
+ + + +

De ambas formas, estos scripts se llaman scripts de contenido y son distintos del resto de scripts que constituyen una extensión. 

+ + + +

En este artículo hablaremos de los dos métodos para cargar una script..

+ +

Modificando páginas que encajen con un patrón URL

+ +

Para empezar, crea un nuevo directorio llamado "modify-page". En este directorio, crea un archivo llamado "manifest.json", con el siguiente contenido:

+ +
{
+
+  "manifest_version": 2,
+  "name": "modify-page",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["https://developer.mozilla.org/*"],
+      "js": ["page-eater.js"]
+    }
+  ]
+
+}
+ +

La llave content_scripts es el método de carga de scripts a páginas cuya URL encaje con los patrones. En este caso, content_scripts le dice al navegador que cargue una script llamada "page-eater.js" en todas las páginas con https://developer.mozilla.org/.

+ +
+

Debido a que el atributo "js" de content_scripts es una array, puedes usarla para inyectar más de una script a las páginas que encajen con el patrón. Si haces esto las páginas compartiran el mismo campo de aplicación, igual que múltiples scripts cargadas por una página, y son cargadas en el mismo orden en las que están dispuestas en la array.

+
+ +
+

La llave content_scripts tambien tiene un atributo de "css" que puedes usar para inyectar código CSS. 

+
+ +

Después, crea un archivo llamado "page-eater.js" dentro del directorio "modify-page" e introduce el contenido de a continuación:

+ +
document.body.textContent = "";
+
+var header = document.createElement('h1');
+header.textContent = "This page has been eaten";
+document.body.appendChild(header);
+ +

 Ahora, instala la extensión y visita https://developer.mozilla.org/:

+ +

{{EmbedYouTube("lxf2Tkg6U1M")}}

+ +
+

Ten en cuenta que aunque este video muestra el contenido de la script operando en addons.mozilla.org, las scripts de contenido están bloqueadas en esta página por el momento.

+
+ +

Modificando las páginas programaticamente

+ +

Y si quieres comer páginas, pero solo cuando el usuario te lo pida?  Actualicemos este ejemplo para que podamos enyectar el contenido de la script cuando el usuario haga click en un item del menu de contexto.

+ +

Primero actualiza "manifest.json" para que incluya el contenido a continuación:

+ +
{
+
+  "manifest_version": 2,
+  "name": "modify-page",
+  "version": "1.0",
+
+  "permissions": [
+    "activeTab",
+    "contextMenus"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+
+}
+ +

Aquí, hemos eliminado la llave content_scripts  y hemos añadido dos nuevas llaves:

+ + + +

Ahora generaremos este archivo. Crea un archivo llamado "background.js" en el directorio "modify-page" e introduce el siguiente contenido: 

+ +
browser.contextMenus.create({
+  id: "eat-page",
+  title: "Eat this page"
+});
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "eat-page") {
+    browser.tabs.executeScript({
+      file: "page-eater.js"
+    });
+  }
+});
+
+ +

En esta script estamos creando un item del menu de contexto  y dándole una ID y un título específico (el texto que se estará expuesto en el menu de contexto). Después configuramos un evento de escucha para que cuando el usuario haga click en uno de los items del menu podamos comprobar si se trata de nuestro item eat-page . En caso afirmativo, inyectaremos "page-eater.js" a la lengüeta actual usando la API tabs.executeScript(). Alternativamente, esta API puede tomar como argumento una ID. En este caso la hemos omitido lo cual quiere decir que la script es inyectada en la lengüeta que está actualmente abierta.

+ +

Ahora mismo la extensión debería ser algo como esto:

+ +
modify-page/
+    background.js
+    manifest.json
+    page-eater.js
+ +

Ahora recarga la extensión, abre la página (cualquier página en esta ocasión), activa el menu de contexto y selecciona "Eat this page" (Comer esta página):

+ +

{{EmbedYouTube("zX4Bcv8VctA")}}

+ +
+

Ten en cuenta que aunque este video muestra el contenido de la script operando en addons.mozilla.org, las scripts de contenido están bloqueadas en esta página por el momento.

+
+ +

Mensajería

+ +

Scripts de contenido y scripts de fondo no pueden acceder directamente al estado del otro. Sin embargo, pueden comunicarse mediante el uso de mensajes. Una terminal configura un escuchador de mensajes y la otra terminal puede mandarle un mensaje. La siguente tabla resume las APIs involucradas en cada parte:

+ + + + + + + + + + + + + + + + + + + +
 En el script de contenidoEn el script de fondo
Mandar un mensajebrowser.runtime.sendMessage()browser.tabs.sendMessage()
Recibir un mensajebrowser.runtime.onMessagebrowser.runtime.onMessage
+ +

Actualicemos nuestro ejemplo para ilustrar como mandar un mensaje desde una script de fondo.

+ +

Primero, hemos de editar "background.js" para que tenga el siguiente contenido:

+ +
browser.contextMenus.create({
+  id: "eat-page",
+  title: "Eat this page"
+});
+
+function messageTab(tabs) {
+  browser.tabs.sendMessage(tabs[0].id, {
+    replacement: "Message from the extension!"
+  });
+}
+
+function onExecuted(result) {
+    var querying = browser.tabs.query({
+        active: true,
+        currentWindow: true
+    });
+    querying.then(messageTab);
+}
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "eat-page") {
+    let executing = browser.tabs.executeScript({
+      file: "page-eater.js"
+    });
+    executing.then(onExecuted);
+  }
+});
+
+ +

Ahora, después de inyectar "page-eater.js", hemos de usar tabs.query()  para obtener la lengüeta actualmente activa y entonces usar tabs.sendMessage() para mandar un mensaje a las scripts de contenido cargadas en la lengüeta. El mensaje tiene el contenido {replacement: "Message from the extension!"}.

+ +

Después, actualiza "page-eater.js" de esta forma:

+ +
function eatPageReceiver(request, sender, sendResponse) {
+  document.body.textContent = "";
+  var header = document.createElement('h1');
+  header.textContent = request.replacement;
+  document.body.appendChild(header);
+}
+browser.runtime.onMessage.addListener(eatPageReceiver);
+
+ +

Ahora, en vez de simplemente comer la página, el contenido espera a un mensaje usando runtime.onMessage.  Cuando el mensaje llega, el script de contenido ejecuta el mismo código de antes, exceptuando que el  texto de reemplazo se obtenido de request.replacement.

+ +

Debido a que tabs.executeScript() es una función asincrónica y para asegurarnos de que mandamos el mensaje solo cuando el escuchador ha sido añadido en "page-eater.js", usamos onExecuted que sera llamado después de que "page-eater.js" se ejecute.

+ +
+

Pulsa Ctrl+Shift+J (o Cmd+Shift+J en el Mac)  o web-ext run --bc para abrir la consola de navegación para ver console.log en la script de fondo. Alternativamente puedes usar el Add-on Debugger, el cual te permite poner un breakpoint.  De momento no hay forma de iniciar un Add-on Debugger directamente de una extensión web.

+
+ +

Si queremos enviar mensajes directamente desde el contenido script de vuelta a la página de fondo, podríamos usarruntime.sendMessage() en vez de  tabs.sendMessage(). Por ejemplo:

+ +
browser.runtime.sendMessage({
+    title: "from page-eater.js"
+});
+ +
+

Todos estos ejemplos inyectan Javascript; también puedes inyectar CSS programaticamente usando la funcióntabs.insertCSS().

+
+ +

Aprende más

+ + + +

 

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

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

+ + diff --git a/files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html b/files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html new file mode 100644 index 0000000000..58959678f4 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/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/mozilla/add-ons/webextensions/prerequisitos/index.html b/files/es/mozilla/add-ons/webextensions/prerequisitos/index.html new file mode 100644 index 0000000000..d022940dab --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/prerequisitos/index.html @@ -0,0 +1,17 @@ +--- +title: Prerequisitos +slug: Mozilla/Add-ons/WebExtensions/Prerequisitos +translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites +--- +

Para desarrollar usando las APIs de WebExtension, debes seguir algunos pasos antes de comenzar.

+ + diff --git a/files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html b/files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html new file mode 100644 index 0000000000..ef81cd0468 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/publishing_your_webextension/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/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html b/files/es/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html new file mode 100644 index 0000000000..eca9f0ff30 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html @@ -0,0 +1,59 @@ +--- +title: ¿Qué son las extensiones? +slug: Mozilla/Add-ons/WebExtensions/Que_son_las_WebExtensions +tags: + - WebExtensions + - extensiones +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +
{{AddonSidebar}}
+ +

Una extensión agrega características y funciones a un explorador. Se ha creado utilizando tecnologías basadas en Web conocidas: HTML, CSS y JavaScript. Puede aprovechar las mismas API Web que JavaScript en una página web, pero una extensión también tiene acceso a su propio conjunto de APIs de JavaScript. Esto significa que puede hacer mucho más en una extensión de lo que puede con el código en una página web. Estos son sólo algunos ejemplos de las cosas que puedes hacer:

+ +

Mejore o complemente un sitio: Use un Add-on para ofrecer funciones adicionales en el navegador o información de su sitio Web. Permita a los usuarios recopilar detalles de las páginas que visitan para mejorar el servicio que ofrecen.

+ +

+ +

Ejemplos: El asistente de Amazon para Firefox, OneNote Web Clipper y Grammarly para Firefox

+ +

Permita que los usuarios demuestren su personalidad: Las extensiones del navegador pueden manipular el contenido de las páginas; por ejemplo, permite a los usuarios agregar su logo favorito o imágen como un fondo de pantalla acada página que visitan. Las extensiones permiten también al usuario actualizar el aspecto de la IU de Firefox, de la misma manera que lo hacen los complementos de temas.

+ +

+ +

Ejemplos: MyWeb New Tab, Tabliss y VivaldiFox

+ +

Agregar o quitar contenido de las páginas web: es posible que desee ayudar a los usuarios a bloquear los anuncios intrusivos de las páginas web, proporcionar acceso a una guía de viajes siempre que un país o ciudad se menciona en una página web, o reformatear el contenido de la página para ofrecer una experiencia de lectura consistente. Con la capacidad de acceder y actualizar tanto HTML como CSS de una página, las extensiones pueden ayudar a los usuarios a ver la Web de la manera que quieren.

+ +

+ +

Ejemplos: Origen uBlock, Lector y Caja de Herramientas para Google Play Store™

+ +

Agregar herramientas y nuevas funciones de navegación: añada nuevas funciones a un taskboard o genere imágenes de código QR a partir de URLs, hipervínculos o texto de página. Con opciones de interfaz de usuario flexibles y la potencia de las APIs de WebExtensions, puede añadir fácilmente nuevas funcionalidades a un navegador. Usted puede realzar casi cualquier característica o funcionalidad de sitios web, no tiene que ser su web.

+ +

+ +

Ejemplos: QR Code Image Generator, Swimlanes for Trello, y Tomato Clock

+ +

Juegos: ofrecer juegos de ordenador tradicionales, con características de juego fuera de línea, pero también explorar nuevas posibilidades de juego, por ejemplo, mediante la incorporación de gameplay en la navegación cotidiana.

+ +

+ +

Ejemplos: Asteroids in Popup, Solitaire Card Game New Tab, and 2048 Prime.

+ +

Agregar herramientas de desarrollo: puede proporcionar herramientas de desarrollo web como su negocio o ha desarrollado una técnica útil o un enfoque para el desarrollo web que desea compartir. De cualquier manera, puede mejorar las herramientas de desarrollo de Firefox incorporadas añadiendo una nueva ficha a la barra de herramientas del desarrollador.

+ +

+ +

Ejemplos: Web Developer, Web React Developer Tools, and aXe Developer Tools

+ +

Las extensiones para Firefox se construyen utilizando las APIs de WebExtensions, un sistema multi-navegador para desarrollar extensiones. En gran medida, la API es compatible con la extension API soportada por Google Chrome y Opera. Extensiones escritas para estos navegadores en la mayoría de los casos se ejecutan en Firefox o Microsoft Edge con sólo unos pocos cambios. La API es también totalmente compatible con los multiprocesos de Firefox.

+ +

Si tiene ideas o preguntas, o necesita ayuda para migrar un Add-on heredado a las APIs de WebExtensions, puede comunicarse con nosotros en eldev-addons mailing list o en #extdev en IRC.

+ +

¿Qué sigue?

+ + diff --git a/files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html b/files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html new file mode 100644 index 0000000000..d444b69f88 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html @@ -0,0 +1,160 @@ +--- +title: Tu primera extensión +slug: Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension +tags: + - Guía + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +
{{AddonSidebar}}
+ +
+

Si estás familiarizado/a con los conceptos básicos de las extensiones de navegador, omite esta sección y ve a cómo se ponen juntos los archivos. Entonces, usa la documentación de referencia para empezar a construir tu extensión. Visita el Firefox Extension Workshop para aprender más sobre el flujo de trabajo para probar y publicar extensiones para Firefox.

+
+ +

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

+ +

El código fuente de este ejemplo se encuentra en GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

+ +

Primero, necesitas tener instalado Firefox versión 45 o superior.

+ +

Escribiendo la extensión

+ +

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

+ +
mkdir borderify
+cd borderify
+ +

manifest.json

+ +

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

+ +
{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Agrega un borde rojo a todas las páginas web de mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ + + +

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

+ + + +
+

En algunas situaciones usted necesita especificar un ID para su extensión. Si necesita especificar un ID para el complemento, incluya el parámetro applications en el manifest.json y configure la propiedad gecko.id:

+ +
"applications": {
+  "gecko": {
+    "id": "borderify@example.com"
+  }
+}
+
+ +

icons/border-48.png

+ +

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

+ +

Crea el directorio "icons" dentro de la carpeta "borderify". Almacena ahí el icono y nómbralo "border-48.png". Puedes utilizar el de nuestro ejemplo, el cual se obtuvo a partir del Google Material Design iconset, y es utilizado bajo los términos de la licencia Creative Commons Attribution-ShareAlike.

+ +

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

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

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

+ + + +

borderify.js

+ +

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

+ +
document.body.style.border = "5px solid red";
+ +

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

+ + + +

Probándolo

+ +

Primero, verifica que tienes todos los archivos en su lugar:

+ +
borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json
+ +

Instalación

+ +

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

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

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

+ +

Alternativamente, puede ejecuturar la extensión desde la línea de comandos utilizando la herramienta web-ext.

+ +

Probando

+ +

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

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +
+

No lo intentes en addons.mozilla.org! Los scripts de contenido están actualmente bloqueados en ese dominio.

+
+ +

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

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

Empaquetar y publicar

+ +

Para que otras personas puedan utilizar tu extensión, necesitas empaquetarlo y enviarlo a Mozilla para que lo firmen. Para que aprendas más sobre eso, mira "Publicando tu extension".

+ +

¿Qué sigue?

+ +

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

+ + diff --git a/files/es/mozilla/add-ons/webextensions/tutorial/index.html b/files/es/mozilla/add-ons/webextensions/tutorial/index.html new file mode 100644 index 0000000000..559320eca0 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/tutorial/index.html @@ -0,0 +1,459 @@ +--- +title: Tu segunda extensión +slug: Mozilla/Add-ons/WebExtensions/Tutorial +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +--- +
{{AddonSidebar}}
+ +

Si ya ha visto el artículo tu primer extensión, ya posee una idea de como escribir una extensión. En este artículo se escribirá una extensión ligeramente más compleja para demostrar un par de cosas más de las APIs.

+ +

La extensión añade un nuevo botón a la barra de herramientas de Firefox. Cuando el usuario da clic sobre el botón, mostraremos una ventana emergente que permite escoger un animal. Una vez que un animal sea escogido, reemplazaremos todas las imágenes en la página actual con la imagen del animal seleccionado.

+ +

Para implementar esto, haremos lo siguiente:

+ + + +

Tu puedes notar que la estructura general de la extensión luce como esto:

+ +

+ +

Esta es una extensión simple, pero muestra muchos de los principales conceptos de la API WebExtensions:

+ + + +

Tu puedes encontrar el código fuente completo de la extensión en GitHub.

+ +

Para escribir una extensión, necesitará de Firefox 45 o más reciente.

+ +

Escribiendo la extensión

+ +

Crea una carpeta nueva y navega hacia ella:

+ +
mkdir beastify
+cd beastify
+ +

manifest.json

+ +

Ahora crea un archivo llamado "manifest.json", y agrega el siguiente contenido:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Beastify",
+  "version": "1.0",
+
+  "description": "Agrega un icono de acción navegación a la barra de herramientas. Haga clic en el botón para elegir una bestia. El contenido del cuerpo de la pestaña activa se sustituye por una imagen de la bestia elegida. Consulte https://developer.mozilla.org/es/Add-ons/WebExtensions/Examples#beastify",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
+  "icons": {
+    "48": "icons/beasts-48.png"
+  },
+
+  "permissions": [
+    "activeTab"
+  ],
+
+  "browser_action": {
+    "default_icon": "icons/beasts-32.png",
+    "default_title": "Bestificar",
+    "default_popup": "popup/choose_beast.html"
+  },
+
+  "web_accessible_resources": [
+    "beasts/frog.jpg",
+    "beasts/turtle.jpg",
+    "beasts/snake.jpg"
+  ]
+
+}
+
+ + + +

Nota que todas las rutas dadas son relativas a manifest.json.

+ +

El ícono

+ +

La extensión debería tener un íncono. Éste, será mostrado junto a la lista de complementos en el Administrador de Complementos (Pude abrirlo introduciendo en la URL "about:addons"). El manifest.json promete que se posee un ícono para la barra de herramientas en "icons/beasts-48.png".

+ +

Cree el directorio "icons" y guarde un ícono ahí y nómbrelo como "beasts-48.png".  Puede utilizar uno de nuestro ejemplo, el cual ha sido tomado del  conjuto de íconos Aha-Soft’s Free Retina, que es utilizado bajo el término de su propia licencia.

+ +

Si elige proporcionar su propio ícono, debería ser de 48x48 pixeles. También puede proporcionar un ícono de 96x96 pixeles, para pantallas de altas resoluciones y, si usted hace esto, deberá especificarlo como la propiedad 96 del objeto icons en el manifest.json:

+ +
"icons": {
+  "48": "icons/beasts-48.png",
+  "96": "icons/beasts-96.png"
+}
+ +

El botón de la barra de herramientas

+ +

El botón de la barra de herramientas necesita un ícono, y nuestro manifest.json promete eso y nos gustaría tener un ícono para la barra de herramientas en "icons/beasts-32.png".

+ +

Guarde un ícono llamado "beasts-32.png" en el directorio "icons". Tu podrías usar uno de nuestros ejemplos, los cuales son tomados desde el sitio IconBeast Lite icon set y empleados bajo sus términos de licencia.

+ +

Si tu no provees una ventana emergente, entonces el evento clic es disparado hacia tu extensión cuando el usuario de clic sobre el botón. Si provees una ventana emergente entonces el evento clic no se disparará, pero en cambio, se muestra la ventana emergente. Nosotros queremos una ventana emergente, así que vamos a crearla.

+ +

La ventana emergente

+ +

La función de la ventana emergente es habilitada si el usuario escoge una de los tres animales.

+ +

Crea una nueva carpeta llamada "popup" bajo la carpeta raíz de la extensión . Esta será donde pondremos el código para la ventana emergente. La carpeta "popup" contendrá estos tres archivos:

+ + + +

choose_beast.html

+ +

El archivo HTML luce así:

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="choose_beast.css"/>
+  </head>
+
+<body>
+  <div id="popup-content">
+    <div class="button beast">Frog</div>
+    <div class="button beast">Turtle</div>
+    <div class="button beast">Snake</div>
+    <div class="button reset">Reset</div>
+  </div>
+  <div id="error-content" class="hidden">
+    <p>Can't beastify this web page.</p><p>Try a different page.</p>
+  </div>
+  <script src="choose_beast.js"></script>
+</body>
+
+</html>
+ +

Tenemos un elemento <div> con un ID "popup-content" que contiene un elemento para cada elección de animal. Además, tenemos otro <div> con un ID "error-content" y una clase "hidden", que usaremos en el case de que surja algún problema al inicializar la ventana emergente.

+ +

Note que referenciamos los archivos CSS y JS en el HTML como lo haríamos si se tratase de una página web.

+ +

choose_beast.css

+ +

El CSS ajusta el tamaño de la ventana emergente, se asegura que las tres posibles opciones llenen el espacio y les da un poco de estilo básico. Además oculta los elementos con class="hidden": esto significa que nuestro "error-content" <div> estará oculto por defecto.

+ +
html, body {
+  width: 100px;
+}
+
+.hidden {
+  display: none;
+}
+
+.button {
+  margin: 3% auto;
+  padding: 4px;
+  text-align: center;
+  font-size: 1.5em;
+  cursor: pointer;
+}
+
+.beast:hover {
+  background-color: #CFF2F2;
+}
+
+.beast {
+  background-color: #E5F2F2;
+}
+
+.reset {
+  background-color: #FBFBC9;
+}
+
+.reset:hover {
+  background-color: #EAEA9D;
+}
+ +

choose_beast.js

+ +

Aquí está el JavaScript para la ventana emergente:

+ +
/**
+ * CSS para ocultar toda la página
+ * Excepto los elementos que pertenecen a la clase "beastify-image".
+ */
+const hidePage = `body > :not(.beastify-image) {
+                    display: none;
+                  }`;
+
+/**
+ * Esucha los clicks en los botones y envía el mensaje apropiado
+ * al script de contenido de la página.
+ */
+function listenForClicks() {
+  document.addEventListener("click", (e) => {
+
+    /**
+     * Recibe el nombre de una bestia y obtiene la URL de la imagen correspondiente.
+     */
+    function beastNameToURL(beastName) {
+      switch (beastName) {
+        case "Frog":
+          return browser.extension.getURL("beasts/frog.jpg");
+        case "Snake":
+          return browser.extension.getURL("beasts/snake.jpg");
+        case "Turtle":
+          return browser.extension.getURL("beasts/turtle.jpg");
+      }
+    }
+
+    /**
+     * Inserta dentro de la pestaña activa el CSS que oculta la página
+     * luego toma la URL de la imagen y
+     * envía un mensaje "beastify" al script de contenido de la pestaña activa.
+     */
+    function beastify(tabs) {
+      browser.tabs.insertCSS({code: hidePage}).then(() => {
+        let url = beastNameToURL(e.target.textContent);
+        browser.tabs.sendMessage(tabs[0].id, {
+          command: "beastify",
+          beastURL: url
+        });
+      });
+    }
+
+    /**
+     * Remueve el CSS que oculta la página y
+     * envía un mensaje de "reset" al script de contenido de la pestaña activa.
+     */
+    function reset(tabs) {
+      browser.tabs.removeCSS({code: hidePage}).then(() => {
+        browser.tabs.sendMessage(tabs[0].id, {
+          command: "reset",
+        });
+      });
+    }
+
+    /**
+     * Imprime el error en consola.
+     */
+    function reportError(error) {
+      console.error(`Could not beastify: ${error}`);
+    }
+
+    /**
+     * Toma la pestaña activa y
+     * llama a "beastify()" o "reset()" según corresponda.
+     */
+    if (e.target.classList.contains("beast")) {
+      browser.tabs.query({active: true, currentWindow: true})
+        .then(beastify)
+        .catch(reportError);
+    }
+    else if (e.target.classList.contains("reset")) {
+      browser.tabs.query({active: true, currentWindow: true})
+        .then(reset)
+        .catch(reportError);
+    }
+  });
+}
+
+/**
+ * Si hubo algún error al ejecutar el script,
+ * Despliega un popup con el mensaje de error y oculta la UI normal.
+ */
+function reportExecuteScriptError(error) {
+  document.querySelector("#popup-content").classList.add("hidden");
+  document.querySelector("#error-content").classList.remove("hidden");
+  console.error(`Failed to execute beastify content script: ${error.message}`);
+}
+
+/**
+ * Cuando se carga la ventana emergente, inyecta el script de contenido en la pestaña activa,
+ * y agrega un manejador de eventos.
+ * Si no es posible inyectar el script, se ocupa de manejar el error.
+ */
+browser.tabs.executeScript({file: "/content_scripts/beastify.js"})
+.then(listenForClicks)
+.catch(reportExecuteScriptError);
+ +

Empecemos por la linea 96. La ventana emergente ejecuta un script de contenido en la pestaña activa tan pronto como se termina de cargar, usando la API browser.tabs.executeScript(). Si la ejecución del script de contenido es exitosa, este quedará cargado en la página hasta que sea cerrada la pestaña o hasta que el usuario navegue hacia una página distinta.

+ +
+

Un motivo común por el cual el llamado a browser.tabs.executeScript() puede fallar, es porque no es posible ejecutar scripts de contenido en todas las páginas, por ejemplo, en páginas de navegador privilegiadas como about:debugging, o páginas del dominio addons.mozilla.org, no es posible hacerlo.

+
+ +

Si la ejecución falla, reportExecuteScriptError() ocultará el <div> "popup-content", mostrará el <div> "error-content", y reportará el error en la consola.

+ +

Si la ejecución del script de contenido es exitosa, se llamará a listenForClicks(), que atiende los eventos que se generan al cliquear en la ventana emergente.

+ + + +

La función beastify() hace tres cosas:

+ + + +

La función reset() deshace lo hecho por beastify():

+ + + +

El script de contenido

+ +

Crea una carpeta nueva bajo la raíz del complemento llamada "content_scripts" y crea un nuevo archivo en ella llamado "beastify.js", con el contenido siguiente:

+ +
(function() {
+  /**
+   * Revisa e inicializa una variable de guardia.
+   * Si este script de contenido es insertado más de una vez
+   * en la misma página, dejará de ejecutarse.
+   */
+  if (window.hasRun) {
+    return;
+  }
+  window.hasRun = true;
+
+/**
+* Recibe la URL de la imagen, remueve las que se hayan agregado antes,
+* crea un nodo IMG que apunt hacia la imagen
+* e inserta ese nodo en el documento.
+*/
+  function insertBeast(beastURL) {
+    removeExistingBeasts();
+    let beastImage = document.createElement("img");
+    beastImage.setAttribute("src", beastURL);
+    beastImage.style.height = "100vh";
+    beastImage.className = "beastify-image";
+    document.body.appendChild(beastImage);
+  }
+
+  /**
+   * Remueve todas las bestias de la página.
+   */
+  function removeExistingBeasts() {
+    let existingBeasts = document.querySelectorAll(".beastify-image");
+    for (let beast of existingBeasts) {
+      beast.remove();
+    }
+  }
+
+  /**
+   * Atiende mensajes del script de segundo plano.
+   * Llama a "beastify()" o "reset()".
+  */
+  browser.runtime.onMessage.addListener((message) => {
+    if (message.command === "beastify") {
+      insertBeast(message.beastURL);
+    } else if (message.command === "reset") {
+      removeExistingBeasts();
+    }
+  });
+
+})();
+ +

Lo primero que hace el script de contenido es revisar la variable global window.hasRun: si está inicializada termina su ejecución, sino, la inicializa y continúa. La razón por la que hacemos esto es porque cada vez que el usuario abre la ventana emergente, se vuelve a ejecutar el script de contenido en la pestaña activa, por lo que podríamos tener múltiples instancias del script ejecutandose en una sola pestaña. Si esto sucede, necesitamos asegurarnos de que sea sólo la primera instancia la que vaya a realizar cambios.

+ +

Luego, en la linea 40, donde el script de contenido atiende mensajes provenientes de la ventana emergente (usando la API browser.runtime.onMessage), vemos que ésta puede enviar dos mensajes diferentes: "beastify" y "reset".

+ + + +

Las bestias

+ +

Finalmente, necesitamos incluir las imágenes de los animales.

+ +

Crea una carpeta nueva llamada "beasts", y adiciona tres imágenes en ella, con su nombre apropiado. Tu puedes obtener estas imágenes desde el repositorio en GitHub, o desde aquí:

+ +

+ +

Probándolo

+ +

Primero, comprueba nuevamente que tienes todos los archivos necesarios en el lugar adecuado:

+ +
beastify/
+
+    beasts/
+        frog.jpg
+        snake.jpg
+        turtle.jpg
+
+    content_scripts/
+        beastify.js
+
+    icons/
+        beasts-32.png
+        beasts-48.png
+
+    popup/
+        choose_beast.css
+        choose_beast.html
+        choose_beast.js
+
+    manifest.json
+ +

Comenzando con Firefox 45, pueden instalar temporalmente una extensión desde el disco.

+ +

Abre "about:debugging" en Firefox, de clic en "Cargar complemento temporalmente", y seleccione el archivo manifest.json. Entonces, debería de ver el ícono de la extensión aparecer en la barra de herramientas de Firefox:

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

Abra una página web, luego haga clic sobre el ícono, seleccione una bestia, y vea cómo cambia la página web:

+ +

{{EmbedYouTube("YMQXyAQSiE8")}}

+ +

Desarrollo desde la línea de comandos

+ +
+
+
 
+ +

Puede automatizar el paso de instalación temporal mediante la herramienta web-ext. Pruebe esto:

+
+
+ +
cd beastify
+web-ext run
+ +

 

diff --git a/files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html b/files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html new file mode 100644 index 0000000000..55ce89a9c7 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html @@ -0,0 +1,50 @@ +--- +title: Botón de la Barra de Herramientas +slug: Mozilla/Add-ons/WebExtensions/user_interface/Accion_navegador +tags: + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action +--- +
{{AddonSidebar}}
+ +

Generalmente referidas como acciones de navegador, esta opción de interfaz de usuario corresponde a un botón agregado a la barra de herramientas del navegador. Los usuarios pueden hacer click en el botón para interactuar con tu extensión.
+

+ +

El botón de la barra de herramientas (acción de navegador) es muy parecido al botón de la barra de direcciones (acción de página). Para conocer las diferencias y obtener consejo en cuándo usar qué tipo de botón, te recomendamos ver Acciones de página y acciones de navegador.

+ +

Especificando la acción de navegador

+ +

Puedes definir las propiedades de la acción de navegador utilizando la llave browser_action del archivo manifest.json:

+ +
"browser_action": {
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  },
+  "default_title": "Whereami?"
+}
+ +

El único campo obligatorio es default_icon.

+ +

Existen dos formas de especificar una acción de navegador: con o sin una ventana emergente. Si no especificas una ventana emergente, se le entregará un evento a la extensión cada vez que el usuario haga click en el botón. El evento es escuchable usando browserAction.onClicked:

+ +
browser.browserAction.onClicked.addListener(handleClick);
+ +

En cambio, si especificas una ventana emergente, el evento de click no es despachado al hacer click en el botón: en su lugar, la ventana emergente es mostrada. El usuario podrá interactuar con la ventana emergente, la cual se cerrará automáticamente cada vez que el usuario haga click fuera de ella. Te recomendamos revisar el artículo de ventanas emergentes para conocer más detalles sobre la creación y administración de éstas.

+ +

Cabe destacar que tu extensión puede tener solamente una acción de navegador.

+ +

Puedes cambiar cualquier propiedad de la acción de navegador de forma programática, utilizando la API browserAction.

+ +

Íconos

+ +

Para más detalles sobre cómo crear íconos para usarlos en tu acción de navegador, revisa Iconografía en la documentación del Sistema de Diseño Photon.

+ +

Ejemplos

+ +

El repositorio de GitHub webextensions-examples contiene dos ejemplos de extensiones que implementan acciones de navegador:

+ + diff --git a/files/es/mozilla/add-ons/webextensions/user_interface/index.html b/files/es/mozilla/add-ons/webextensions/user_interface/index.html new file mode 100644 index 0000000000..5ddf11d958 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/user_interface/index.html @@ -0,0 +1,95 @@ +--- +title: User interface +slug: Mozilla/Add-ons/WebExtensions/user_interface +tags: + - Landing + - NeedsTranslation + - TopicStub + - User Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface +--- +
{{AddonSidebar}}
+ +

Extensions that use WebExtension APIs are provided with several user interface options so that their functionality can be made available to the user. A summary of those options is provided below, with a more detailed introduction to each user interface option in this section.

+ +
+

For advice on using these UI components to create a great user experience in your extension, please see the User experience best practices article.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UI optionDescriptionExample
Toolbar button (browser action)A button on the browser toolbar that dispatches an event to the extension when clicked. By default, the button is visible in all tabs.Example showing a toolbar button (browser action).
Toolbar button with a popupA popup on a button in the browser toolbar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.Example of the pop-up on a toolbar button
Address bar button (page action)A button on the browser address bar that dispatches an event to the extension when clicked. By default, the button is hidden in all tabs.Example showing an address bar button (page action)
Address bar button with a popupA popup on a button in the browser address bar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.Example of a popup on the address bar button
Context menu itemMenu items, checkboxes, and radio buttons on one or more of the browser's context menus. Also, menus can be structured by adding separators. When menu items are clicked, an event is dispatched to the extension.Example of content menu items added by a WebExtension, from the context-menu-demo example
Sidebar +

An HTML document displayed next to a web page, with the option for unique content per page. The sidebar is opened when the extension is installed, then obeys the user's sidebar visibility selection. User interaction within the sidebar is handled by its HTML document.

+ 		Example of a sidebar
Options pageA page that enables you to define preferences for your extension that your users can change. The user can access this page from the browser's add-ons manager.Example showing the options page content added in the favorite colors example.
Extension pageUse web pages included in your extension to provide forms, help, or any other content required, within windows or tabs.Example of a simple bundled page displayed as a detached panel.
NotificationTransient notifications displayed to the user through the underlying operating system's notifications mechanism. Dispatches an event to the extension when the user clicks a notification, or when a notification closes (either automatically or at the user's request).Example of an extension triggered system notification
Address bar suggestionOffer custom address bar suggestions when the user enters a keyword.Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
Developer tools panelA tab with an associated HTML document that displays in the browser's developer tools.Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
+ +

The following how-to guides provide step-by-step guidance to creating some of these user interface options:

+ + diff --git a/files/es/mozilla/add-ons/webextensions/user_interface/page_actions/index.html b/files/es/mozilla/add-ons/webextensions/user_interface/page_actions/index.html new file mode 100644 index 0000000000..0ec310af9f --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/user_interface/page_actions/index.html @@ -0,0 +1,96 @@ +--- +title: Address bar button +slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +--- +
{{AddonSidebar}}
+ +

Comúnmente denominado botón de acción de página, esta opción de interfaz de usuario es un botón agregado a la barra de direcciones del navegador. Los usuarios pueden hacer clic en el botón para interactuar con sus extensiones.

+ +

+ +

Acciones de página y acciones de navegador

+ +

El botón de la barra de direcciones (o página de acción) es muy parecida al botón de la barra de herramientas (o acción del navegador).

+ +

Las diferencias son:

+ + + +

Usa una página de acción cuando cuando la acción este relacionada a la página en curso, y una acción de navegador cuando cuando la acción este relacionada a todas o a muchas páginas. Por ejemplo:

+ + + + + + + + + + + + + + + + + + + + + + + + +
TypeBookmarks actionContent actionTabs operation
page actionMarcar esta páginaReddit enhancementEnviar una pestaña
browser actionMostrar todos los marcadoresHabilitar ad-blockingSincronizar todas las pestañas
+ +

Specifying the page action

+ +

You define the page action's properties using the page_action key in manifest.json:

+ +
"page_action": {
+  "browser_style": true,
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  },
+  "default_title": "Whereami?"
+}
+ +

The only mandatory key is default_icon.

+ +

There are two ways to specify a page action: with or without a popup.

+ + + +

Note that your extension can have one-page action only.

+ +

You can change any of the page action properties programmatically using the pageAction API.

+ +

Icons

+ +

For details on how to create icons to use with your page action, see Iconography in the Photon Design System documentation.

+ +

Examples

+ +

The webextensions-examples repository on GitHub includes the chill-out example which implements a page action without a popup.

diff --git a/files/es/mozilla/add-ons/webextensions/what_next_/index.html b/files/es/mozilla/add-ons/webextensions/what_next_/index.html new file mode 100644 index 0000000000..7566eb1bff --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/what_next_/index.html @@ -0,0 +1,56 @@ +--- +title: What next? +slug: Mozilla/Add-ons/WebExtensions/What_next_ +translation_of: Mozilla/Add-ons/WebExtensions/What_next_ +--- +
{{AddonSidebar}}
+ +

Ahora estarás listo para comenzar a convertir tus idea para una extensión de navegador en realidad. Antes de comenzar ese viaje, vale la pena ser consciente de algunas cosas que ayudarán a que sea más sencillo.

+ +

Tu ambiente de desarrollo

+ +

No necesitas ninguna herramienta de desarrollo ni entorno de creación en especial a la hora de crear extensiones de navegador: es completamente posible crear grandes extensiones de navegador solo con un editor de texto. Sin embargo, puede ser que tu hayas estado desarrollando para la web y ya poseas un conjunto de herramientas y un entorno que desees reutilizar. Si este es el caso, necesitarás estar al tanto de un par de cosas.

+ +

Si utilizas herramientas de minificación u ofuscación para obtener tu código final, deberás proporcionar tu código fuente al proceso de revisión de AMO. Además, las herramientas que uses (aquellas para los procesos de minificación, ofuscación y creación) deberán ser de código abierto (u ofrecer un uso gratuito ilimitado) y estar disponibles para ejecutarse en la computadora del revisor (Windows, Mac o Linux). Desafortunadamente, nuestros revisores no pueden trabajar con herramientas comerciales o basadas en la web.

+ +

Aprenda más sobre las herramientas de construcción

+ +

Bibliotecas de Terceros

+ +

Las bibliotecas de terceros son una excelente manera de agregar características complejas o funcionalidades a su extensiones para navegador rápidamente. Cuando envía una extensión al proceso de revisión de AMO, el proceso también considerará las bibliotecas de terceros utilizadas. Para simplificar la revisión, asegúrese de descargar siempre bibliotecas de terceros desde su sitio web oficial o repositorio, y si la biblioteca está minimizada, proporcione un enlace al código fuente. Tenga en cuenta que las bibliotecas de terceros no se pueden modificar de ninguna manera.

+ +

Aprenda más sobre el envío de código fuente

+ +

Acuerdo de Distribución para Complementos de Firefox

+ +

Las extensiones del navegador deben estar firmadas para instalarse en la versión de lanzamiento o en las versiones beta de Firefox. La firma se realiza en addons.mozilla.org (AMO) y está sujeta a los términos y condiciones del Acuerdo de Distribución de Complementos de Firefox. El objetivo del acuerdo es garantizar que los usuarios de Firefox tengan acceso a complementos de calidad bien soportados que mejoren la experiencia de Firefox.

+ +

Lea el Acuerdo

+ +

Aprenda más sobre la firma

+ +

Proceso de revisión

+ +

Cuando se envíe una extensión del navegador para su firma, estará sujeta a revisión automática. También podría estar sujeto a una revisión manual, cuando la revisión automática determine que se necesita una revisión manual. La extensión de su navegador no se firmará hasta que haya pasado la revisión automática y puede revocarse su firma si no pasa la revisión manual. El proceso de revisión sigue un estricto conjunto de pautas, por lo que es fácil verificar y evitar cualquier posible problema de revisión.

+ +

Echa un vistazo a las políticas y directrices de revisión

+ +

Entensiones de navegador destacadas AMO

+ +

Si eliges enlistar tu extensión de navegador en AMO, tu extensión podría aparecer en el sitio web de AMO, en el administrador de complementos del navegador Firefox, o en cualquier otro lugar en un sitio web de Mozilla. Hemos compilado una lista de pautas sobre cómo se seleccionan las extensiones para presentarlas; al seguir estas pautas, le da a su extensión la mejor oportunidad de ser presentada.

+ +

Aprenda más sobre como destacar sus complementos

+ +

Continua tu experiencia de aprendizaje

+ +

Ahora que sabe lo que sigue, es hora de profundizar en más detalles sobre el desarrollo de extensiones de navegador. En las siguientes secciones, descubrirás:

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