From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/mozilla/add-ons/add-on_manager/index.html | 61 +++ .../mozilla/add-ons/add-on_repository/index.html | 159 +++++++ files/es/mozilla/add-ons/amo/index.html | 11 + .../mozilla/add-ons/amo/policy/contacto/index.html | 26 ++ files/es/mozilla/add-ons/amo/policy/index.html | 21 + .../add-ons/amo/policy/revisiones/index.html | 157 +++++++ files/es/mozilla/add-ons/code_snippets/index.html | 138 +++++++ .../add-ons/code_snippets/queryselector/index.html | 99 +++++ files/es/mozilla/add-ons/index.html | 104 +++++ .../lineamientos_de_complementos/index.html | 113 +++++ .../mozilla/add-ons/overlay_extensions/index.html | 57 +++ files/es/mozilla/add-ons/sdk/builder/index.html | 13 + files/es/mozilla/add-ons/sdk/index.html | 84 ++++ .../tutorials/add_a_context_menu_item/index.html | 119 ++++++ .../add_a_menu_item_to_firefox/index.html | 114 +++++ .../adding_a_button_to_the_toolbar/index.html | 85 ++++ .../sdk/tutorials/display_a_popup/index.html | 164 ++++++++ .../sdk/tutorials/getting_started/index.html | 214 ++++++++++ files/es/mozilla/add-ons/sdk/tutorials/index.html | 146 +++++++ .../add-ons/sdk/tutorials/installation/index.html | 145 +++++++ .../sdk/tutorials/list_open_tabs/index.html | 66 +++ .../sdk/tutorials/listen_for_page_load/index.html | 38 ++ .../modifying_the_page_hosted_by_a_tab/index.html | 135 ++++++ .../modifying_web_pages_based_on_url/index.html | 227 ++++++++++ .../sdk/tutorials/open_a_web_page/index.html | 48 +++ .../sdk/tutorials/troubleshooting/index.html | 143 +++++++ .../es/mozilla/add-ons/themes/obsolete/index.html | 10 + .../add_toolbar_button/index.html | 33 ++ .../index.html | 13 + .../mozilla/add-ons/thunderbird/howtos/index.html | 128 ++++++ files/es/mozilla/add-ons/thunderbird/index.html | 137 ++++++ .../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 +++ 62 files changed, 7114 insertions(+) create mode 100644 files/es/mozilla/add-ons/add-on_manager/index.html create mode 100644 files/es/mozilla/add-ons/add-on_repository/index.html create mode 100644 files/es/mozilla/add-ons/amo/index.html create mode 100644 files/es/mozilla/add-ons/amo/policy/contacto/index.html create mode 100644 files/es/mozilla/add-ons/amo/policy/index.html create mode 100644 files/es/mozilla/add-ons/amo/policy/revisiones/index.html create mode 100644 files/es/mozilla/add-ons/code_snippets/index.html create mode 100644 files/es/mozilla/add-ons/code_snippets/queryselector/index.html create mode 100644 files/es/mozilla/add-ons/index.html create mode 100644 files/es/mozilla/add-ons/lineamientos_de_complementos/index.html create mode 100644 files/es/mozilla/add-ons/overlay_extensions/index.html create mode 100644 files/es/mozilla/add-ons/sdk/builder/index.html create mode 100644 files/es/mozilla/add-ons/sdk/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/installation/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html create mode 100644 files/es/mozilla/add-ons/themes/obsolete/index.html create mode 100644 files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/add_toolbar_button/index.html create mode 100644 files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/index.html create mode 100644 files/es/mozilla/add-ons/thunderbird/howtos/index.html create mode 100644 files/es/mozilla/add-ons/thunderbird/index.html 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') diff --git a/files/es/mozilla/add-ons/add-on_manager/index.html b/files/es/mozilla/add-ons/add-on_manager/index.html new file mode 100644 index 0000000000..a36c26e1be --- /dev/null +++ b/files/es/mozilla/add-ons/add-on_manager/index.html @@ -0,0 +1,61 @@ +--- +title: Add-on Manager +slug: Mozilla/Add-ons/Add-on_Manager +translation_of: Mozilla/JavaScript_code_modules/Add-on_Manager +--- +

{{ gecko_minversion_header("2.0") }}

+ +

el Add-on Manager es responsable de manejar  todos los add-ons instalados en la aplicación. A traves de la informacion de la APIs acerca de todos los add-ons instalados puede ser recuperado y nuevos  add-ons pueden ser instalados. Las APIs son diseñadas para ser genericas y soportar diferentes tipos de add-ons.

+ +

Muchas funciones en la interfaz de  Add-on Manager operan de manera asincrona  retornando resultados a traves de devoluciones de llamadas que se pasan a las funciones . Estas devoluciones pueden ser llamadas inmediatamente, mientras la funcion inicial se esta ejecutando o apenas despues de su ejecución dependiendo de cuando la informacion requerida este disponible.

+ +

Accediendo add-ons Instalados

+ +

la informacion acerca de add-ons instalados puede ser recuperada a traves de main AddonManager API. Todas sus funciones son asincronas, significando que una funcion de devolucion de llamada debe ser pasada para recibir las instancias de Addon. La devolucion de llamada puede solamente ser llamada despues de la funcion de retorno de la API . Por ejemplo:

+ +
Components.utils.import("resource://gre/modules/AddonManager.jsm");
+
+AddonManager.getAllAddons(function(aAddons) {
+  // Here aAddons is an array of Addon objects
+});
+// This code will execute before the code inside the callback
+
+ +

Notificaciones acerca de cambios de add-ons instalados se envian a cualquier AddonListener registrado. Deben ser registrados a traves del metodo addAddonListener().

+ +

Instalando Nuevos add-ons

+ +

Nuevos add-ons pueden ser instalados usando los metodos getInstallForFile() o getInstallForURL() del objeto AddonManager. Estos pasaran una instancia de AddonInstall al invocador, el cual puede ser usado para instaladar add-ons:

+ +
Components.utils.import("resource://gre/modules/AddonManager.jsm");
+
+AddonManager.getInstallForURL("http://www.foo.com/test.xpi", function(aInstall) {
+  // aInstall is an instance of AddonInstall
+  aInstall.install();
+}, "application/x-xpinstall");
+
+ +

El progreso de  AddonInstall puede ser monitoreado usando IntallListener. Un escucha puede ser registrado por el uso especifico de un metodo  addListener() o por todas las instalaciones usando el metodo addInstallListener().

+ +

Encontrando updates

+ +

Add-ons pueden ser chekeados por updates usando el metodo findUpdates(). Debe pasarse como parametro un  UpdateListener para recibir informacion acerca de la compatibilidad asi como tambien la informacion acerca la nueva actualizacion. Cualquier nueva actualizacion es retornada como un AddonInstall el cual esta listo para ser descargado e instalado.

+ +

{{ h1_gecko_minversion("Detectando cambios en los add-ons", "7.0") }}

+ +

Tambien puedes conseguir una lista de add-ons que al iniciar fueron modificados de varias maneras. El metodo  getStartupChanges()  permite encontrar que add-ons fueron instalados, eliminados, modificados, habilitados o deshabilitados al iniciar la aplicacion.

+ +

Por ejemplo, para saber los add-ons que fueron deshabilitados al iniciar la aplicacion se utilizaria:

+ +
Components.utils.import("resource://gre/modules/AddonManager.jsm");
+
+let addonIDs = AddonManager.getStartupChanges(AddonManager.STARTUP_CHANGE_DISABLED);
+if (addonIDs.length > 0) {
+  // addonIDs is now an array of the add-on IDs that have been disabled
+alert("Note: " + addonIDs.length + " add-ons have been disabled.");
+}
+
+ +

Vease

+ +

{{ ListSubpages() }}

diff --git a/files/es/mozilla/add-ons/add-on_repository/index.html b/files/es/mozilla/add-ons/add-on_repository/index.html new file mode 100644 index 0000000000..0ef9c73f61 --- /dev/null +++ b/files/es/mozilla/add-ons/add-on_repository/index.html @@ -0,0 +1,159 @@ +--- +title: Add-on Repository +slug: Mozilla/Add-ons/Add-on_Repository +translation_of: Mozilla/JavaScript_code_modules/Add-on_Repository +--- +

{{ gecko_minversion_header("2") }}

+ +

 

+ +

El repositorio Add-on es responsable de encontrar complementos disponibles, este provee una interface para interactuar con la página addons.mozilla.org (AMO). Su API provee varias URL que se puede visitar para explorar los complementos del repositorio. El API también ofrece dos formas de buscar y recuperar un vector de Addon instancias: {{ manch("retrieveRecommendedAddons") }}, la cual retorna una lista de complementos recomendados  y {{ manch("searchAddons") }}, el cual realiza una búsqueda en el repositorio.

+ +

Estas búsquedas son asíncronas, los resultados se pasan al objeto SearchCallback proporcionado cuando se completa la búsqueda. Los resultados pasados al objeto SearchCallback solo incluyen complementos que son compatibles con la aplicación actual y que aún no están instalados o en proceso de instalación. AddonRepository solo puede procesar una búsqueda a la vez. Una nueva búsqueda fallará inmediatamente si el AddonRepository ya está manejando otra solicitud de búsqueda.

+ +

Para importar el módulo de código del Repositorio Add-on , use:

+ +

 

+ +
Components.utils.import("resource://gre/modules/AddonRepository.jsm");
+
+ +

Method overview

+ + + + + + + + + + + + + + + + + + + +
string getRecommendedURL()
string getSearchURL(in string searchTerms)
void cancelSearch()
void retrieveRecommendedAddons(in integer maxResults, in SearchCallback callback)
void searchAddons(in string searchTerms, in integer maxResults, in SearchCallback callback)
+ +

Properties

+ + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
homepageURLstringThe URL of the repository site's home page.
isSearchingbooleantrue if a search is currently in progress; otherwise false.
+ +

Methods

+ +

getRecommendedURL()

+ +

Returns the URL that can be visited to see recommended add-ons.

+ +
string getRecommendedURL();
+ +
Parameters
+ +

None.

+ +
Return value
+ +

An URL indicating the repository's page of recommended add-ons.

+ +

getSearchURL()

+ +

Returns an URL of a web page that can be visited to see search results for the specified search terms.

+ +
string getSearchURL(
+  in string searchTerms
+);
+ +
Parameters
+ +
+
searchTerms
+
Search terms used to search the repository.
+
+ +
Return value
+ +

The URL of the search results page for the specified search terms.

+ +

cancelSearch()

+ +

Cancels the search in progress. Does nothing if there is no search in progress.

+ +
void cancelSearch();
+ +
Parameters
+ +

None.

+ +

retrieveRecommendedAddons()

+ +

Begins a search for recommended add-ons in the repository. The list of recommended add-ons frequently changes. Results will be passed to the given SearchCallback callback.

+ +
void retrieveRecommendedAddons(
+  in integer maxResults,
+  in SearchCallback callback
+);
+ +
Parameters
+ +
+
maxResults
+
The maximum number of results to return.
+
callback
+
The SearchCallback callback to which results will be delivered.
+
+ +

searchAddons()

+ +

Begins a search for add-ons in this repository. Results will be passed to the given callback.

+ +
string searchAddons(
+  in string searchTerms,
+  in integer maxResults,
+  in SearchCallback callback
+);
+ +
Parameters
+ +
+
searchTerms
+
The search terms to pass to AMO. The results will match what you would get if you typed this string in the search box on the AMO web site.
+
maxResults
+
The maximum number of results to return.
+
callback
+
The SearchCallback callback to pass results to.
+
+ +

See also

+ + + +
+
+ +
+
diff --git a/files/es/mozilla/add-ons/amo/index.html b/files/es/mozilla/add-ons/amo/index.html new file mode 100644 index 0000000000..0845e54e3d --- /dev/null +++ b/files/es/mozilla/add-ons/amo/index.html @@ -0,0 +1,11 @@ +--- +title: AMO +slug: Mozilla/Add-ons/AMO +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/AMO +--- +

{{AddonSidebar}}

+ +

Content to be added.

diff --git a/files/es/mozilla/add-ons/amo/policy/contacto/index.html b/files/es/mozilla/add-ons/amo/policy/contacto/index.html new file mode 100644 index 0000000000..be8cdd9998 --- /dev/null +++ b/files/es/mozilla/add-ons/amo/policy/contacto/index.html @@ -0,0 +1,26 @@ +--- +title: Información de contacto de AMO +slug: Mozilla/Add-ons/AMO/Policy/Contacto +translation_of: Mozilla/Add-ons#Contact_us +--- +

{{AddonSidebar}}

+ +

Gracias por tu interés en contactar al equipo de Extensiones de Mozilla. Por favor lee esta página cuidadosamente para asegurarte de que tu solicitud se dirija al lugar correcto.

+ +

Soporte de Complementos

+ +

SI tienes alguna pregunta de soporte con respecto a un complemento en particular, tal como "¿Cómo utilizo este complemento?" o "¿Por qué no funciona de manera apropiada?", por favor contacta al autor del complemento a través de los canales de soporte listados en la página de listado de extensiones.

+ +

Preguntas sobre la Revisión de Complementos

+ +

Si tienes alguna pregunta acerca de la revisión de un complemento o deseas reportar una violación de políticas, por favor escríbenos a amo-editors@mozilla.org. Casi todos los reportes de complementos se incluyen bajo esta categoría. Por favor, asegúrate de incluir un enlace al complemento en cuestión y una descripción detallada de tu pregunta o duda.

+ +

Vulnerabilidades de Seguridad de un Complemento

+ +

Si has descubierto una vulnerabilidad de seguridad en un complemento, incluso si no está alojado aquí, Mozilla está muy interesada en tu descubrimiento y trabajará con el desarrollador del complemento para corregir el problema lo más pronto posible. Los problemas de seguridad de complementos pueden ser reportados confidencialmente en Bugzilla o por e-mail mediante amo-admins@mozilla.org.

+ +

Funcionalidad y Desarrollo del Sitio Web

+ +

Si has encontrado un problema con el sitio, nos gustaría solucionarlo. Por favor reporta un informe de error en Github, incluyendo la localización del problema y cómo lo encontraste.

+ +

How to get in touch with us regarding these policies or your add-on.

diff --git a/files/es/mozilla/add-ons/amo/policy/index.html b/files/es/mozilla/add-ons/amo/policy/index.html new file mode 100644 index 0000000000..5fffee1dc8 --- /dev/null +++ b/files/es/mozilla/add-ons/amo/policy/index.html @@ -0,0 +1,21 @@ +--- +title: AMO Policies +slug: Mozilla/Add-ons/AMO/Policy +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/AMO/Policy +--- +

{{AddonSidebar}}

+ +

Mozilla is committed to ensuring a great add-ons experience for our users and developers. Please review the policies below before submitting your add-on.

+ +
+
Developer Agreement
+
Effective January 5, 2016
Review Process
+
Add-ons extend the core capabilities of Firefox, allowing users to modify and personalize their Web experience. A healthy add-on ecosystem, built on trust, is vital for developers to be successful and users to feel safe making Firefox their own. For these reasons, Mozilla requires all add-ons to comply with the following set of policies on acceptable practices. The below is not intended to serve as legal advice, nor is it intended to serve as a comprehensive list of terms to include in your add-on’s privacy policy.
Featured Add-ons
+
How up-and-coming add-ons become featured and what's involved in the process.
Contacting us + +

How to get in touch with us regarding these policies or your add-on.

+ +
diff --git a/files/es/mozilla/add-ons/amo/policy/revisiones/index.html b/files/es/mozilla/add-ons/amo/policy/revisiones/index.html new file mode 100644 index 0000000000..1ae4eed402 --- /dev/null +++ b/files/es/mozilla/add-ons/amo/policy/revisiones/index.html @@ -0,0 +1,157 @@ +--- +title: Normativas para los complementos +slug: Mozilla/Add-ons/AMO/Policy/Revisiones +translation_of: Mozilla/Add-ons/AMO/Policy/Reviews +--- +

{{AddonSidebar}}

+ +

Add-ons extend the core capabilities of Firefox, allowing users to modify and personalize their Web experience. A healthy add-on ecosystem, built on trust, is vital for developers to be successful and users to feel safe making Firefox their own. For these reasons, Mozilla requires all add-ons to comply with the following set of policies on acceptable practices. The below is not intended to serve as legal advice, nor is it intended to serve as a comprehensive list of terms to include in your add-on’s privacy policy.

+ +

All add-ons are subject to these policies, regardless of how they are distributed. Add-ons that do not comply with these policies may be subject to rejection or disabling by Mozilla.

+ +

No Surprises

+ +

Surprises can be appropriate in many situations, but they are not welcome when user security, privacy and control are at stake. It is extremely important to be as transparent as possible when submitting an add-on. Users should be able to easily discern what the functionality of your add-on is and not be presented with unexpected user experiences after installing it.

+ +

Unexpected Features

+ +

“Unexpected” features are those that are unrelated to the add-on’s primary function, and are not likely from the add-on name or description to be expected by a user installing that add-on.

+ +

Should an add-on include any unexpected feature that falls into one of the following categories:

+ + + +

Then the “unexpected” feature(s) must adhere to all of the following requirements:

+ + + +

Content

+ +

Add-ons that make use of Mozilla trademarks must comply with the Mozilla Trademark Policy. If the add-on uses “Firefox” in its name, the naming standard the add-on is expected to follow is “<Add-on name> for Firefox”.

+ +

In addition, add-ons listed on addons.mozilla.org (AMO) must adhere to the following policies:

+ + + +

Submission Guidelines

+ +

Add-ons must function only as described, and should provide an appealing user experience. Based on the description of the add-on, a user must be able to understand and use the add-on’s features without requiring expert knowledge. Tips on how to create a good user experience for your add-on can be found here.

+ +

During review, the add-on undergoes basic testing in addition to code review. To facilitate the functional testing, the add-on author must provide testing information and, if applicable, testing credentials required to use the add-on if an account is needed for any part of the add-on’s functionality.

+ +

Issues brought up during review must be addressed using best efforts. If corrections have been requested, the new version should not contain unrelated changes, as this complicates the review process and can lead to further rejections.

+ +

Source Code Submission

+ +

Add-ons may contain transpiled, obfuscated, minified or otherwise machine-generated code, but Mozilla needs to review a copy of the human-readable source code. The author must provide this information to Mozilla during submission as well as instructions on how to reproduce the build.

+ +

The provided source code will be reviewed by an administrator and will not be redistributed in any way. The code will only be used for the purpose of reviewing the add-on. Failure to provide this information will result in rejection.

+ +

Please read our Source Code Submission guidelines to avoid unexpected rejections.

+ +

Development Practices

+ +

In general, developers are free to maintain their add-ons in the manner they choose. However, in order to maintain appropriate data security and effectively review code, we do have certain technical requirements that all add-ons must meet. In particular, potentially dangerous APIs may only be used in ways that are demonstrably safe, and code within add-ons that cannot be verified as behaving safely and correctly may need to be refactored.

+ +

While any code, method or practice in a submitted add-on is subject to review and rejection, the following requirements are of particular importance:

+ + + +

Data Disclosure, Collection and Management

+ +

You must disclose how the add-on collects, uses, stores and shares user data in the privacy policy field on AMO. Mozilla expects that the add-on limits data collection whenever possible, in keeping with Mozilla’s Lean Data Practices and Mozilla’s Data Privacy Principles, and uses the data only for the purpose for which it was originally collected.

+ +

User data includes all information the add-on collects, regardless of the manner. It can be personal data actively provided by the user (such as a name or email address), technical data (such as operating system, build ID, version numbers, crash reports, activation, updates), and interaction or activity data (add-on activity data, visited URLs, console logs), including interactions with Firefox.

+ +

The add-on’s privacy policy must be the full policy text; it cannot be a link to an externally hosted privacy policy. In addition, the privacy policy must:

+ + + +

A summary of this information must be included in the add-on’s listing description. Finally, you and your add-on must also comply with all applicable data privacy laws as well as any other laws that may apply to your specific add-on.

+ +

User Interactions & Technical Data

+ + + +

Cookies

+ + + +

Personal Data

+ + + +

Additional Privacy Protocols

+ + + +

Security Vulnerabilities

+ +

Because add-ons run in an environment with elevated privileges relative to ordinary web pages, they present a very serious set of security considerations. They have the potential to open security holes not only in the add-ons themselves, but also in the browser, in web pages, and, in particularly distressing cases, the entire system the browser is running on.

+ +

As a result, we take our security policies very seriously and apply them to all add-ons, whether hosted on AMO or not. We expect all add-ons to be secure and well-maintained in handling both their own data and their user’s data. They must also securely manage all of their interactions with the web, the browser and the operating system.

+ +

Monetization

+ + + +

Compliance & Blocklisting

+ +

For add-ons that don’t meet these policies, Mozilla may reject or blocklist affected versions or entire add-ons, depending on the extent of their non-compliance.

+ +

Generally, Mozilla will attempt to contact the add-on’s developer(s) and provide a reasonable time frame for the problems to be corrected before a block is deployed. If an add-on is considered malicious or its developers have proven unreachable or unresponsive, or in case of repeat violations, blocklisting may be immediate.

+ +

Mozilla reserves the right to block or delete the developer’s account on addons.mozilla.org, thereby preventing further use of the service.

diff --git a/files/es/mozilla/add-ons/code_snippets/index.html b/files/es/mozilla/add-ons/code_snippets/index.html new file mode 100644 index 0000000000..1d5fd8b90d --- /dev/null +++ b/files/es/mozilla/add-ons/code_snippets/index.html @@ -0,0 +1,138 @@ +--- +title: Code snippets +slug: Mozilla/Add-ons/Code_snippets +tags: + - Add-ons + - Code snippets + - Extensions + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons/Code_snippets +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}

+ +

This is a quick list of useful code snippets (small code samples) available for developers of extensions for the various Mozilla applications. Many of these samples can also be used in XULRunner applications, as well as in actual Mozilla code itself.

+ +

These examples demonstrate how to accomplish basic tasks that might not be immediately obvious.

+ +

General

+ +
+
Examples and demos from MDN articles
+
A collection of examples and demos from articles.
+
Window code
+
Opening and manipulating windows
+
Toolbar
+
Toolbar related code
+
Sidebar
+
Sidebar related code
+
Forms
+
Forms related code
+
XML
+
Code used to parse, write, manipulate, etc. XML
+
File I/O
+
Code used to read, write and process files
+
Drag & Drop
+
Code used to setup and handle drag and drop events
+
Dialogs
+
Code used to display and process dialog boxes
+
Alerts and Notifications
+
Modal and non-modal ways to notify users
+
Preferences
+
Code used to read, write, and modify preferences
+
JS XPCOM
+
Code used to define and call XPCOM components in JavaScript
+
Running applications
+
Code used to run other applications
+
<canvas> related
+
WHAT WG Canvas-related code
+
Signing a XPI
+
How to sign an XPI with PKI
+
Delayed Execution
+
Performing background operations.
+
Miscellaneous
+
Miscellaneous useful code fragments
+
HTML to DOM
+
Using a hidden browser element to parse HTML to a window's DOM
+
+ +

JavaScript libraries

+ +

Here are some JavaScript libraries that may come in handy.

+ +
+
StringView
+
A library that implements a StringView view for JavaScript typed arrays. This lets you access data in typed arrays using C-like string functions.
+
Rosetta
+
By default, the only possible standardized scripting language for HTML is ECMAScript. Hence, if you are going to use another scripting language you might expect that most of the browsers will not recognize it. Nevertheless, the increasing computational power of modern browsers together with the introduction of typed arrays in ECMAScript allow us, in theory, to build full virtual machines in pure ECMAScript. Therefore, it is also possible, in theory, to use ECMAScript for a smaller task: parsing exotic programming languages (i.e., creating compilers). This snippets shows a possible way to start from.
+
+ +

Browser-oriented code

+ +
+
Tabbed browser code (Firefox/SeaMonkey)
+
Basic operations, such as page loading, with the tabbed browser, which is the heart of Mozilla's browser applications
+
Cookies
+
Reading, writing, modifying, and removing cookies
+
Page Loading
+
Code used to load pages, reload pages, and listen for page loads
+
Interaction between privileged and non-privileged code
+
How to communicate from extensions to websites and vice-versa.
+
Downloading Files
+
Code to download files, images, and to monitor download progress
+
Password Manager
+
Code used to read and write passwords to/from the integrated password manager
+
Bookmarks
+
Code used to read and write bookmarks
+
JavaScript Debugger Service
+
Code used to interact with the JavaScript Debugger Service
+
+ +

SVG

+ +
+
General
+
General information and utilities
+
SVG Animation
+
Animate SVG using JavaScript and SMIL
+
SVG Interacting with Script
+
Using JavaScript and DOM events to create interactive SVG
+
Embedding SVG in HTML and XUL
+
Using SVG to enhance HTML or XUL based markup
+
+ +

XUL Widgets

+ +
+
HTML in XUL for Rich Tooltips
+
Dynamically embed HTML into a XUL element to attain markup in a tooltip
+
Label and description
+
Special uses and line breaking examples
+
Tree
+
Setup and manipulation of trees using XUL and JS
+
Scrollbar
+
Changing style of scrollbars. Applies to scrollbars in browser and iframe as well.
+
Autocomplete
+
Code used to enable form autocomplete in a browser
+
Boxes
+
Tips and tricks when using boxes as containers
+
Tabbox
+
Removing and manipulating tabs in a tabbox
+
+ +

Windows-specific

+ +
+
Finding Window Handles (HWND) (Firefox)
+
How to use Windows API calls to find various kinds of Mozilla window handles. Window handles can be used for IPC and Accessibility purposes.
+
Using the Windows Registry with XPCOM
+
How to read, write, modify, delete, enumerate, and watch registry keys and values.
+
+ + + +

The content at MozillaZine Example Code is slowly being moved here, but you can still find useful examples there for now.

diff --git a/files/es/mozilla/add-ons/code_snippets/queryselector/index.html b/files/es/mozilla/add-ons/code_snippets/queryselector/index.html new file mode 100644 index 0000000000..ff3b7d1258 --- /dev/null +++ b/files/es/mozilla/add-ons/code_snippets/queryselector/index.html @@ -0,0 +1,99 @@ +--- +title: QuerySelector +slug: Mozilla/Add-ons/Code_snippets/QuerySelector +translation_of: Archive/Add-ons/Code_snippets/QuerySelector +--- +

 {{ fx_minversion_header(3.5) }}

+ +

Siguiendo con lineas de otros frameworks como "jQuery" o "Prototype", acortar el nombre de "querySelector" podria ser conveniente:

+ +
function $ (selector, el) {
+     if (!el) {el = document;}
+     return el.querySelector(selector);
+}
+function $$ (selector, el) {
+     if (!el) {el = document;}
+     return el.querySelectorAll(selector);
+     // Note: the returned object is a NodeList.
+     // If you'd like to convert it to a Array for convenience, use this instead:
+     // return Array.prototype.slice.call(el.querySelectorAll(selector));
+}
+alert($('#myID').id);
+
+ +

(Note that while using the Firefox Web Console, the above functions are available automatically.)

+ +

Both XUL and even XML can be easily made supportable (an alternative approach to the following would be to add ChromeWindow.prototype or Window.prototype, accessing this.document.querySelector, or following the jQuery style of chaining by returning 'this' within each prototype method of $()):

+ +
HTMLDocument.prototype.$ = function (selector) { // Only for HTML
+    return this.querySelector(selector);
+};
+
+Example:
+
+<h1>Test!</h1>
+<script>
+HTMLDocument.prototype.$ = function (selector) {
+    return this.querySelector(selector);
+};
+alert(document.$('h1')); // [object HTMLHeadingElement]
+</script>
+
+ +
XULDocument.prototype.$ = function (selector) { // Only for XUL
+    return this.querySelector(selector);
+};
+
+Example:
+
+<label value="Test!"/>
+<script type="text/javascript"><![CDATA[
+XULDocument.prototype.$ = function (selector) { // Only for XUL
+    return this.querySelector(selector);
+};
+
+alert(document.$('label')); // [object XULElement]
+]]></script>
+
+ +
Document.prototype.$ = function (selector) { // Only for plain XML
+    return this.querySelector(selector);
+};
+var foo = document.implementation.createDocument('someNS', 'foo', null); // Create an XML document <foo xmlns="someNS"/>
+var bar = foo.createElementNS('someNS', 'bar'); // add <bar xmlns="someNS"/>
+foo.documentElement.appendChild(bar);
+alert(foo.$('bar').nodeName); // gives 'bar'
+
+ +
Element.prototype.$ = function (selector) { // Works for HTML, XUL, and plain XML
+    return this.querySelector(selector);
+};
+
+HTML example:
+<h1><a>Test!<a/></h1>
+<script>
+Element.prototype.$ = function (selector) {
+    return this.querySelector(selector);
+};
+alert(document.getElementsByTagName('h1')[0].$('a').nodeName); // 'A'
+
+XUL example:
+<hbox><vbox/></hbox>
+<script type="text/javascript"><![CDATA[
+Element.prototype.$ = function (selector) {
+    return this.querySelector(selector);
+};
+var XULNS = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
+alert(document.getElementsByTagNameNS(XULNS, 'hbox')[0].$('vbox').nodeName); // vbox
+]]></script>
+
+XML example:
+<foo xmlns="someNS"><bar/></foo> in document earlier
+var foo = document.getElementsByTagNameNS('someNS', 'foo')[0];
+alert(foo.$('bar'));
+
+
+ +

Note that for plain XML, the # 'id' selector will not work with an 'id' attribute (since a such-named attribute need not necessarily be of type ID in XML, though it is in HTML and XUL), nor will it work with xml:id.

+ +

However, it will work with attribute selectors that target non-prefixed attributes (such as 'id', but not xml:id: http://www.w3.org/TR/selectors-api/#resolving) (even though CSS3 does support namespaced attribute selectors: http://www.w3.org/TR/css3-selectors/#attrnmsp and potentially xml:id as #: http://www.w3.org/TR/css3-selectors/#id-selectors ).

diff --git a/files/es/mozilla/add-ons/index.html b/files/es/mozilla/add-ons/index.html new file mode 100644 index 0000000000..5a24f7e862 --- /dev/null +++ b/files/es/mozilla/add-ons/index.html @@ -0,0 +1,104 @@ +--- +title: Complementos +slug: Mozilla/Add-ons +tags: + - Complementos + - Destino + - Mozilla + - extensiones +translation_of: Mozilla/Add-ons +--- +
{{AddonSidebar}}
+ +
 
+ +

Los complementos permiten a los desarrolladores extender y modificar las funcionalidades de Firefox. Están escritos utilizando las tecnologías estándar Web - JavaScript, HTML y CSS - más algunas APIs dedicadas JavaScript. Entre otras cosas, un complemento puede:

+ + + +

Existen varios tipos de complementos, pero el tipo más común son las extensiones.

+ +

Desarrollo de las extensiones

+ +

En el pasado, habían varias juegos de herramientas para el desarrollo de las extensiones de Firefox, pero al finalizar el mes de noviembre de 2017, las extensiones deben crearse utilizando las API de WebExtensions. Los otros juegos de herramientas, incluidos los complementos de overlay, los complementos de bootstrap y el complemento SDK, se espera que queden obsoletos durante el mismo período de tiempo.

+ +

Si usted está escribiendo un nuevo complemento, le recomendamos que utilice la API de WebExtensions.

+ +

Las WebExtensions están diseñadas para que sean compatibles cross-browser. En la mayoría de los casos podran ser ejecutadas por Chrome, Edge, y Opera con pocos o ningún cambio. También serán completamente compatibles con el multiproceso Firefox.
+
+ Vea las APIs soportada actualmente por Firefox y otros navegadores. Seguimos diseñando e implementando nuevas API en respuesta a las necesidades de los desarrolladores.
+
+ La mayoría de las APIs de WebExtensions estarán también disponibles para Firefox para Android.

+ +

Migrar un complemento ya existente

+ +

Si tu mantienes extensiones que están por ser remplazados, tales como XUL overlay, bootstrapped, o extensiones basadas en SDK, le recomendamos que investige como portarlos a WebExtensions. Existen algunos recursos de portación en MDN.

+ +

Hemos recolectado recursos en una página wiki para proporcionar soporte a los desarrolladores mediante la transición. Para empezar, utilice la herramienta de compatibilidad Lookup Tool para ver si su herramienta será afectada.

+ +

Publicar los complementos

+ +

Addons.mozilla.org, comúnmente conocidos como "AMO," es un sitio oficial de Mozilla para que los desarrolladores registren los complementos, y para que los usuarios los descubran. Al subir tu complemento a AMO, puedes participar en nuestra comunidad de usuarios y creadores y encontrar una audiencia para tu complemento.

+ +

No es requerido que tu registres tu complemento en AMO, pero tu complemento será firmado por Mozilla o los usuarios no podrán instalarlos.

+ +

Para obtener una visión general del proceso de publicación de su complemento, consulte Firme y distribuya su complemento.

+ +

Otros tipos de complementos

+ +

Además de las extensiones, hay algunos otros tipos de complemento que permiten a los usuarios personalizar Firefox. Estos complementos incluyen:

+ + + +
+

Contáctenos

+ +

Puede utilizar los vínculos siguientes para obtener ayuda, mantenerse al día con las noticias sobre los complementos y darnos su opinión.

+ +

Foro de complementos

+ +

Use el foro de discusión sobre complementos para discutir todos los aspectos del desarrollo de los complementos y para obtener ayuda.

+ +

Listas de correo

+ +

Utilice la lista dev-addons para discutir el desarrollo del ecosistema de complementos, incluyendo el desarrollo del sistema WebExtensions y de AMO:

+ + + +

Utilice la lista webextensions-support para obtener ayuda para portar o realizar la transición a WebExtensions:

+ +

webextensions-support lista de información
+ webextensions-support archivos

+ +

IRC

+ +

Si eres un fan de IRC, puedes ponerte en contacto:

+ + + +

Informar de problemas

+ +

Vulnerabilidades de seguridad

+ +

Si descubre una vulnerabilidad de segurida en un complemento, incluso si no está hospedado en un sitio de Mozilla, permítanos saberlo y trabajaremos con el desarrollador para corregir el problema. Por favor, infórmelos confidencialmente en Bugzilla o enviando un correo a amo-admins@mozilla.org.

+ +

Errores en addons.mozilla.org (AMO)

+ +

Si encuentra un problema en el sitio, nos encantaría arreglarlo. Por favor, presente un informe de error e incluya tantos detalles como sean posibles.

diff --git a/files/es/mozilla/add-ons/lineamientos_de_complementos/index.html b/files/es/mozilla/add-ons/lineamientos_de_complementos/index.html new file mode 100644 index 0000000000..3c490d101e --- /dev/null +++ b/files/es/mozilla/add-ons/lineamientos_de_complementos/index.html @@ -0,0 +1,113 @@ +--- +title: Líneamientos Generales para complementos +slug: Mozilla/Add-ons/Lineamientos_de_complementos +tags: + - Complementos +translation_of: 'https://extensionworkshop.com/documentation/publish/add-on-policies/' +--- +

Estos lineamientos para complementos se crearon para fomentar una comunidad de desarrolladores de complementos abierta y diversa mientras que al mismo tiempo se garantiza una excelente experiencia de usuario. Se aplican a todos los complementos y actualizaciones complementos independientemente del lugar donde se alojan y también se aplican a las personalizaciones realizadas por instaladores que configuran Firefox sin necesidad de utilizar un complemento. Los complementos alojados en AMO están sujetos a políticas adicionales.

+

Se transparente

+ +

Se Respetuoso con los Usuarios

+ +

Se Seguro

+ +

Se Estable

+ +

Excepciones

+ +

Otras Excepciones pueden aplicar.

+

Cumplimiento

+

Los complementos que no sigan estos lineamientos pueden calificar para ser bloqueados, dependiendo en la extensión de las violaciones. Los lineamientos calificados con la palabra debe son especialmente importantes y las violaciones de estos seguramente en una nominación a ser bloqueados.

+

El equipo de complementos hará lo mejor posible para tratar de contactar al desarrollador de complementos y proveerá un lapso de tiempo razonable para resolver los problemas antes de que el bloqueo se haga efectivo. Si el complemento es considerado malicioso o su desarrollador es imposible de localizar o posee repetitivas violaciones el bloqueo se llevará acabo de inmediato.

+

Las violaciones de los lineamientos deben ser reportadas vía Bugzilla, bajo evangelización tecnológica > Complementos. Las preguntas deben ser publicadas en elCanal de IRC #addons.

+

Estos lineamientos pueden cambiar en futuro. Todas las actualizaciones serán anunciadas en el Blog de complementos.

diff --git a/files/es/mozilla/add-ons/overlay_extensions/index.html b/files/es/mozilla/add-ons/overlay_extensions/index.html new file mode 100644 index 0000000000..1522f3ba35 --- /dev/null +++ b/files/es/mozilla/add-ons/overlay_extensions/index.html @@ -0,0 +1,57 @@ +--- +title: Extensiones de Superposición +slug: Mozilla/Add-ons/Overlay_Extensions +tags: + - Extensions + - Overlay + - extensiones +translation_of: Archive/Add-ons/Overlay_Extensions +--- +

Esta página contiene enlaces a la documentaciónpara aproximarse al desarrollo de extensiones basadas en aplicaciones Gecko que usa:

+ + + +

Antes de que Gecko 2.0 fuera lanzado esta era la única manera de desarrollar extensiones. Ahora hay dos técnicas alternativas: extensionen sin reinicio y extensiones complementarias basadas SDK. Las privilegiadas APIs de  JavaScript descriptas aquí, aún pueden ser utilizadas por las técnicas más nuevas.

+ +

Escuela XUL

+ +

La escuela XUL es una exhaustivo tutorial para el desarrollo de complementos que se enfoca en el desarrollo de extensiones Firefox pero mayoritariamente aplicable a otras aplicaciones basadas en Gecko.

+ +

Más recursos

+ +
+
+
+
Configurando tu entorno
+
Configurar la aplicación para el desarollo de la extensión.
+
XUL
+
Tutoriales and referencia para el lenguaje de interfaz de usuario utilizadopor las extensiones XUL.
+
Trozos de códigos
+
Código de muestra para muchas de las cosas que querrás hacer.
+
Instalando extensiones
+
Cómo instalar una extensión copiando los archivos de extensión en un directorio de instalación de la aplicación.
+
Firefox add-ons developer guide
+
Una guía para desarrollar extensiones de superposición.
+
+
+ +
+
+
Módulos de código JavaScript
+
Módulos JavaScript disponibles para desarrolladores de extensiones.
+
Preferencias de una extension
+
Cómo especificar las preferencias para tu extensión que aparecerá en el administrador de complementos.
+
Preguntas frecuentes
+
Cuestiones comunes en el desarrollo de una extensión.
+
Empaquetado de la extensión
+
Cómo se empaquetan e instalan las extensiones.
+
Extensiones binarias de Firefox 
+
Crear extensiones binarias para Firefox.
+
+
+
+ +

 

diff --git a/files/es/mozilla/add-ons/sdk/builder/index.html b/files/es/mozilla/add-ons/sdk/builder/index.html new file mode 100644 index 0000000000..be566483c0 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/builder/index.html @@ -0,0 +1,13 @@ +--- +title: Builder +slug: Mozilla/Add-ons/SDK/Builder +translation_of: Archive/Add-ons/Add-on_SDK/Builder +--- +

El Builder Add-on fue basado en un ambiente de desarrollo web que permitió a desarrolladores la creación de add-ons usando las APIs de SDK, pero sin tener que usar las herramientas de linea de comando cfx. El cual fue retirado el primero de Abril 2014 y ahora el dominio direccionara a esta pagina "builder.addons.mozilla.org".
+
+ Sí tu solo has usado el SDK a trabes del Builder, probablemente ya sabes lo que necesitas para el desarrollo con en el SDK. En el alto nivel y el bajo nivel de las APIs usadas por Builder add-ons son exactamente la misma para el Builder y SDK. Para cambiar al  SDK se necesita:

+ diff --git a/files/es/mozilla/add-ons/sdk/index.html b/files/es/mozilla/add-ons/sdk/index.html new file mode 100644 index 0000000000..6681924d2e --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/index.html @@ -0,0 +1,84 @@ +--- +title: Add-on SDK +slug: Mozilla/Add-ons/SDK +tags: + - Add-on SDK + - Jetpack +translation_of: Archive/Add-ons/Add-on_SDK +--- +

Usando el Add-on SDK puedes crear complementos de Firefox utilizando tecnologías Web estándar: JavaScript, HTML y CSS. El SDK incluye una API de JavaScript que se puede utilizar para crear complementos y herramientas para creación, funcionamiento, pruebas y empaquetado de complementos.

+ +
+

Tutoriales

+ +
+
+
+
Comencemos
+
Como instalar el SDK y usar el cfx tool para desarrollar, testear y empaquetar complementos.
+
Interactuar con el browser
+
Abrir paginas web, "escuchar" la carga de paginas, y listar las paginas abiertas.
+
Técnicas de desarrollo
+
Aprender sobre las técnicas comunes de desarrollo, como las pruebas unitarias, logueos, creacion de modulos reutilizables, localizacion, y desarrollo para mobile.
+
+
+ +
+
+
Creando compenentes para la intefaz de usuario
+
Crear componentes de interfaz de usuario, tales como botones de barras de herramientas, menús contextuales, elementos de menu y cuadros de dialogo.
+
Modificación de páginas web
+
Modificar las páginas que coincidan con un patron de URL o dinámicamente modificar una ficha particular.
+
Juntando todo
+
Tutorial del ejemplo de add-on Annotator.
+
+
+
+ +
+

Guias

+ +
+
+
+
Guide de cómo contribuir
+
Aprender como empezar a contribuir en la SDK, y sobre los idiomas más importantes que se utilizan en el código SDK, como los modulos, classes y herancias, propiedad privada, y procesos de contenido.
+
SDK infrastructura
+
Aspectos de la tecnología subyacente de la SDK: modulos, la identificacion del Programa, y las reglas que definen la compatibilidad de Firefox .
+
Contentido scripts
+
Una guía detallada para trabajar con scripts.
+
+
+ +
+
+
Idiomas SDK
+
Los eventos del framework del SDK y las diferenciación entre add-on scripts y scripts de contenido.
+
XUL migración
+
Una guía para incluir add-ons XUL al SDK. Esta guia incluye una comparación de dos conjuntos de herramientas y un ejemplo para trabajar incluyendo un XUL add-on.
+
+
+
+ +
+

Referencias

+ +
+
+
+
APIs de alto nivel
+
Documentación de referencia para las API del SDK de alto nivel.
+
Referencias de herramientas
+
Documentación de referencia para la herramienta cfx usada para el desarrollo, pruebas, y empaquetado add-ons, la consola global usada para el registro, el paquete package.json.
+
+
+ +
+
+
APIs de bajo nivel
+
Documentación de referencia para las API del SDK de bajo nivel.
+
+
+
+ +

 

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html b/files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html new file mode 100644 index 0000000000..f493c0ab0e --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html @@ -0,0 +1,119 @@ +--- +title: Agregar una opción al Menú Contextual +slug: Mozilla/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item +tags: + - Add-on SDK + - Firefox + - Guide +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Add_a_Context_Menu_Item +--- +
+

Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básico de cfx.

+
+ +

Para agregar opciones y submenús al menú contextual de Firefox, se usa el módulo context-menu.

+ +

Aquí se presenta un add-on que agrega una nueva opción al menú contextual. La opción es mostrada en cualquier parte donde sea seleccionado algo en la página. Cuando se hace clic, la selección es enviada al código principal del add-on, el cual simplemente lo registra:

+ +
var contextMenu = require("sdk/context-menu");
+ var menuItem = contextMenu.Item({
+  label: "Log Selection",
+  context: contextMenu.SelectionContext(),
+  contentScript: 'self.on("click", function () {' +
+                 '  var text = window.getSelection().toString();' +
+                 '  self.postMessage(text);' +
+                 '});',
+  onMessage: function (selectionText) {
+    console.log(selectionText);
+  }
+});
+ +

Pruebe lo siguiente: ejecute el add-on, cargue una página web, seleccione algún texto y haga clic derecho sobre el. Debe aparecer una nueva opción:

+ +

+ +

Haga clic en ella, y la selección es registrada en la terminal:

+ +
info: elephantine lizard
+
+ +

Detalles

+ +

Todo lo que hace este add-on es construir una opción en el menú contextual. No se necesita agregarla: una vez construida la opción, esta es agregada automáticamente en el contexto correcto. En este caso el constructor toma cuatro opciones: label, context, contentScript, y onMessage.

+ +

label

+ +

El label es simplemente la cadena de caracteres que es mostrada.

+ +

context

+ +

El context describe las circunstancias en las cuales la opción debe ser mostrada. El módulo context-menu  provee varios contextos simples integrados, incluyendo el SelectionContext(), el cual refiere: muestra la opción cuando algo es seleccionado en la página.

+ +

Si estos contextos simples no son suficientes, puede definir contextos más sofisticados usando scripts.

+ +

contentScript

+ +

Este adjunta un script a la opción. En este caso el script escucha hasta que se hace clic en la opción, luego envía un mensaje al add-on que contiene el texto seleccionado.

+ +

onMessage

+ +

La propiedad onMessage proporciona una vía para que el código del add-on responda a los mensajes del script integrado a la opción del menú contextual. En este caso solo registra el texto seleccionado.

+ +

Por lo tanto:

+ +
    +
  1. El usuario o la usuaria hace clic en la opción
    2. +
  2. se activa el evento click del script de contenido, retorna el texto seleccionado y envía un mensaje al add-on
    3. +
  3. se activa el evento message del add-on, la función responsable en el código del add-on pasa el texto seleccionado, el cual registra
    4. +
+ +

Más opciones

+ +

Agregar una imágen

+ +

Se puede agregar una imagen a la opción del menú contextual con la opción image. Esta es una URL que apunta a un icono de tamaño 16x16 que es mostrado a la izquierda de la opción en el menú contextual. Generalmente se guarda la imagen en el directorio "data" del add-on, y se construye la URL usando self.data.url():

+ +
var self = require("sdk/self");
+
+var contextMenu = require("sdk/context-menu");
+var menuItem = contextMenu.Item({
+  label: "Log Selection",
+  context: contextMenu.SelectionContext(),
+  contentScript: 'self.on("click", function () {' +
+                 '  var text = window.getSelection().toString();' +
+                 '  self.postMessage(text);' +
+                 '});',
+  image: self.data.url("icon-16.png"),
+  onMessage: function (selectionText) {
+    console.log(selectionText);
+  }
+});
+ +

Agregar tecla de acceso directo

+ +
+

Nuevo en Firefox 35.

+
+ +

Desde Firefox 35 es posible especificar una tecla de acceso directo usando la opción accessKey. Esta debe ser una cadena de un solo carácter. Al presionar la tecla se selecciona la opción cuando el menú contextual esta abierto:

+ +
var contextMenu = require("sdk/context-menu");
+var menuItem = contextMenu.Item({
+  label: "Log Selection",
+  context: contextMenu.SelectionContext(),
+  contentScript: 'self.on("click", function () {' +
+                 '  var text = window.getSelection().toString();' +
+                 '  self.postMessage(text);' +
+                 '});',
+  accessKey: "l",
+  onMessage: function (selectionText) {
+    console.log(selectionText);
+  }
+});
+
+ +

 

+ +

Conozca más

+ +

Para conocer más sobre el módulo context-menu, puede ver la referencia de la API context-menu.

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html b/files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html new file mode 100644 index 0000000000..f30a388a88 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html @@ -0,0 +1,114 @@ +--- +title: Agregar una opción de Menú en Firefox +slug: Mozilla/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Add_a_Menu_Item_to_Firefox +--- +
+

Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básico de cfx.

+
+ +
+

Si esta usando jpm en vez de cfx, el método para usar módulos externos es diferente, y debe leer la versión jmp en vez de esta guía.

+
+ +

El SDK aún no posee una API para agregar nuevas opciones de menú a Firefox. Pero su diseño permite que sus funcionalidades sean ampliadas, por lo tanto cualquiera puede desarrollar y publicar módulos para que sean usados por los desarrolladores de add-on. Afortunadamente, Erik Vold escribió el módulo menuitems que permite agregar opciones al menú.

+ +

Este manual cumple con una doble funcionalidad. Describe el método general para usar un módulo externo, de terceras partes en el add-on, y describe como agregar una opción al menú usando el módulo menuitems en particular.

+ +

Primero, cree una nuevo add-on. Cree un directorio llamado "clickme" donde desee, ingrese en el directorio recien creado y ejecute cfx init.

+ +
mkdir clickme
+cd clickme
+cfx init
+
+ +

La estructura del directorio sera creada:

+ + + +
 
+ +

Instalar menuitems

+ +

Cree un directorio llamado "packages" dentro del directorio "clickme". Luego descargue el paquete menuitems package desde https://github.com/mykmelez/menuitems-jplib y extraiga el archivo dentro del directorio "packages" que acaba de crear:

+ +
mkdir packages
+cd packages
+tar -xf ../erikvold-menuitems-jplib-d80630c.zip
+
+ +

Dependencias del Módulo

+ +

Si los módulos de terceras partes solo dependen de los módulos de SDK, puede usarlos inmediatamente, pero si dependen de otros módulos de terceras partes, debe instalar también esas dependencias.

+ +

En el directorio principal del paquete encontrará un archivo llamado "package.json". Abralo y busque una entrada llamada "dependencies". La entrada para el paquete menuitems es:

+ +
"dependencies": ["vold-utils"]
+
+ +

Esto significa que se debe instalar el paquete vold-utils, lo cual puede hacerse descargándolo desde https://github.com/mykmelez/vold-utils-jplib y agregándolo dentro del directorio packages junto a menuitems.

+ +

Usar menuitems

+ +

La documentación para el módulo menuitems nos dice que creemos una opción del menú usando MenuItem(). De las opciones aceptadas por MenuItem(), usaremos este resumido conjunto:

+ + + +
+
+
var menuitem = require("menuitems").Menuitem({
+  id: "clickme",
+  menuid: "menu_ToolsPopup",
+  label: "Click Me!",
+  onCommand: function() {
+    console.log("clicked");
+  },
+  insertbefore: "menu_pageInfo"
+});
+ +
 
+
+
+ +

Luego, se debe declarar la dependencia en el paquete menuitems. En el archivo package.json del add-on se agrega:

+ +
"dependencies": "menuitems"
+
+ +

Note que debido al bug 663480, si agrega una línea dependencies en package.json, y usa cualquier módulo del SDK, tendrá que declarar la dependencia a ese paquete integrado, como sigue:

+ +
"dependencies": ["menuitems", "addon-sdk"]
+
+ +

Ahora esta todo listo. Ejecute el add-on y verá la nueva opción de menú en el menú Herramientas: seleccionela y verá aparecer en la terminal info: clicked.

+ +

Advertencia

+ +

Los módulos de terceras partes son una manera genial de usar funcionalidades que no son proporcionadas directamente por SDK, pero debido a que los módulos de terceras partes usan APIs de bajo nivel pueden no funcionar correctamente en las nuevas versiones de Firefox.

+ +

 

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html b/files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html new file mode 100644 index 0000000000..91bde8e45c --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html @@ -0,0 +1,85 @@ +--- +title: Agregar un Botón a la Barra de Herramienta +slug: Mozilla/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Adding_a_Button_to_the_Toolbar +--- +
+

Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básico de cfx.

+ +

Este manual usa la API action button, que esta disponible solo para Firefox 29 en adelante.

+
+ +

Para agregar un botón a la barra de herramientas, use los módulos action button o toggle button.

+ +

Cree un nuevo directorio, accese al directorio recien creado, y ejecute cfx init.

+ +

Luego guarde estos tres iconos en el directrio "data":

+ + + + + + + + + + + + + + + + +
icon-16.png
icon-32.png
icon-64.png
+ +

Luego abra el archivo llamado "main.js" en el directorio "lib" y agregue el siguiente código:

+ +
var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://www.mozilla.org/");
+}
+ +

Ahora ejecute el add-on con cfx run. El botón es agregado a la barra de herramientas en la parte superior de la ventana del navegador:

+ +

Puede fijar la localización inicial del botón, pero el usuario puede moverlo usando la función para personalizar del navegador. El atributo id es obligatorio, y es usado para recordar la posición del botón, por lo tanto no debería cambiarse en las versiones siguientes del add-on.

+ +

Hacer clic en el botón cargará la página https://www.mozilla.org/ en una nueva pestaña.

+ +

Especificar el icono

+ +

La propiedad del icono puede especificar un solo icono o una colección de iconos de diferentes tamaños, como en el ejemplo anterior. Si se especifica una colección de iconos de diferentes tamaños el navegador automáticamente seleccionará el que mejor se ajuste a la resolución de pantalla y el lugar en la IU del navegador que alberga el botón. Lea mas sobre especificar múltiples iconos.

+ +

El archivo del icono debe ser empacado con el add-on: no debe referenciar a una archivo remoto.

+ +

Puede cambiar el icono en cualquier momento estableciendo la propiedad del icono del botón. Puede cambiar el icono, y otros atributos de estado, incluso globalmente, para una ventana o pestaña específica. Lea mas sobre la actualización de estado.

+ +

Fijando un panel

+ +

Si necesita fijar un panel a un botón, use la API toggle button. Esta es similar a la API action button pero agrega la propiedad booleana checked cuyo estado cambia cuando el botón es seleccionado. Para fijar el panel, pase el botón al método show() del panel. Para más detalles sobre esto, vea la documentación de toggle button.

+ +

Mostrar contenido mas sofisticado

+ +

Para crear interfaces de usuario más complejas de las que son posibles con solo un botón, use la AIP toolbar. Con la API toolbar obtiene una franja horizontal completa de la interfaz de usuario. Puede agregar botones a la barra de herramientas y también marcos, que pueden contener HTML, CSS, y JavaScript.

+ +

Aprender más

+ + diff --git a/files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html b/files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html new file mode 100644 index 0000000000..8a65788a64 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html @@ -0,0 +1,164 @@ +--- +title: Mostrar una ventana emergente +slug: Mozilla/Add-ons/SDK/Tutorials/Display_a_Popup +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Display_a_Popup +--- +
+

Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básico de cfx.

+ +

Esta guía usa la API action button, la cual esta solo disponible para Firefox 29 en adelante.

+
+ +

Para mostrar un dialogo emergente, se usa el modulo panel.  El contenido de un panel se define usando HTML. Puede ejecutar scripts de contenido en el panel: aunque el script que se ejecuta en el panel no pueda acceder directamente al código principal del add-on, puede intercambiar mensajes entre el script del panel y el código del add-on.

+ +

En esta guía se crea un add-on que agrega un botón de acción en la barra de herramientas,  que al ser presionado muestra un panel. El panel solo contiene un elemento <textarea> : cuando se presiona la tecla return, el contenido del <textarea> es enviado al código principal del add-on. El código principal del add-on registra el mensaje en la terminal.

+ +

El add-on consta de seis archivos:

+ + + +

El archivo "main.js" contiene lo siguiente:

+ +
var data = require("sdk/self").data;
+// Construct a panel, loading its content from the "text-entry.html"
+// file in the "data" directory, and loading the "get-text.js" script
+// into it.
+var text_entry = require("sdk/panel").Panel({
+  contentURL: data.url("text-entry.html"),
+  contentScriptFile: data.url("get-text.js")
+});
+
+// Create a button
+require("sdk/ui/button/action").ActionButton({
+  id: "show-panel",
+  label: "Show Panel",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+// Show the panel when the user clicks the button.
+function handleClick(state) {
+  text_entry.show();
+}
+
+// When the panel is displayed it generated an event called
+// "show": we will listen for that event and when it happens,
+// send our own "show" event to the panel's script, so the
+// script can prepare the panel for display.
+text_entry.on("show", function() {
+  text_entry.port.emit("show");
+});
+
+// Listen for messages called "text-entered" coming from
+// the content script. The message payload is the text the user
+// entered.
+// In this implementation we'll just log the text to the console.
+text_entry.port.on("text-entered", function (text) {
+  console.log(text);
+  text_entry.hide();
+});
+ +

El script de contenido "get-text.js" muestra:

+ +
+
// When the user hits return, send the "text-entered"
+// message to main.js.
+// The message payload is the contents of the edit box.
+var textArea = document.getElementById("edit-box");
+textArea.addEventListener('keyup', function onkeyup(event) {
+  if (event.keyCode == 13) {
+    // Remove the newline.
+    text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
+    self.port.emit("text-entered", text);
+    textArea.value = '';
+  }
+}, false);
+// Listen for the "show" event being sent from the
+// main add-on code. It means that the panel's about
+// to be shown.
+//
+// Set the focus to the text area so the user can
+// just start typing.
+self.port.on("show", function onShow() {
+  textArea.focus();
+});
+ +
 
+
+ +

Finalmente, el archivo "text-entry.html" define el elemento <textarea> :

+ +
+
+
<html>
+<head>
+    <style type="text/css" media="all">
+      textarea {
+        margin: 10px;
+      }
+      body {
+        background-color: gray;
+      }
+    </style>
+  </head>
+<body>
+    <textarea rows="13" cols="33" id="edit-box"></textarea>
+  </body>
+</html>
+ +
 
+
+
+ +

Por último, se guardan estos tres iconos en el directorio "data":

+ + + + + + + + + + + + + + + + +
icon-16.png
icon-32.png
icon-64.png
+ +

Pruebe lo siguiente: el archivo "main.js" se encuentra en el directorio lib del add-on, y los otros cinco archivos el el directorio data :

+ +
my-addon/
+         data/
+              get-text.js
+              icon-16.png
+              icon-32.png
+              icon-64.png
+              text-entry.html
+         lib/
+             main.js
+
+ +

Ejecute el add-on, presione el botón, y debería poder ver el panel. Escriba algo en el cuadro de texto y presione "return" y verá la salida en la terminal.

+ +

Desde Firefox 30 en adelante, si usa botón del selección simple, puede acoplar el panel al botón.

+ +

Conozca más

+ +

Para conocer más sobre el módulo panel, puede ver la referencia de la API panel.

+ +

Para conocer más sobre los botones,  puede ver la referencia de la API action button y toggle button.

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html b/files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html new file mode 100644 index 0000000000..04c901f4f9 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html @@ -0,0 +1,214 @@ +--- +title: Primeros pasos +slug: Mozilla/Add-ons/SDK/Tutorials/Getting_started +translation_of: Mozilla/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29 +--- +

Este tutorial recorre los pasos para la creación de un add-on simple usando el SDK.

+ +

Requisitos previos

+ +

Para crear add-ons para Firefox usando el SDK, primero es necesario seguir las instrucciones para instalar y activar el SDK. Una vez hecho esto, se debe ir directamente a la terminal.

+ +

Inicializar un add-on vacío

+ +

En la terminal, cree un directorio nuevo. El directorio no tiene que estar bajo la raíz del SDK: puede crearlo donde quiera. Dirijase al directorio recién creado, escriba cfx init, y presione la tecla enter o intro:

+ +
mkdir my-addon
+cd my-addon
+cfx init
+
+ +

Visualizará una salida como esta:

+ +
* lib directory created
+* data directory created
+* test directory created
+* doc directory created
+* README.md written
+* package.json written
+* test/test-main.js written
+* lib/main.js written
+* doc/main.md written
+Your sample add-on is now ready for testing:
+try "cfx test" and then "cfx run". Have fun!"
+
+ +

Implementar el add-on

+ +

Ahora puede escribir el código del add-on, el cual se ubica en el archivo "main.js" en el directorio "lib". Este archivo fue creado en el paso anterior. Abra este archivo y agrege el siguiente código:

+ +
var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://www.mozilla.org/");
+}
+
+ +

Guarde los cambios.

+ +

Luego, guarde estos tres iconos en el directorio "data" :

+ + + + + + + + + + + + + + + + +
icon-16.png
icon-32.png
icon-64.png
+ +

Vuelva a la terminal y escriba:

+ +
cfx run
+
+ +

Esta es la orden del SDK para ejecutar una nueva instancia de Firefox con el add-on instalado. Cuando el Firefox es presentado, en la esquina superior derecha se puede ver un ícono con el logo de Firefox. Al hacer clic en el ícono, se abrirá una pestaña nueva donde se cargará la página https://www.mozilla.org/.

+ +
+

Es posible que vea un error como este al ejecutar cfx run:

+ +
A given cfx option has an inappropriate value:
+  ZIP does not support timestamps before 1980
+ +

De ser así, se ha encontrado con el bug 1005412, lo que significa que los archivos de los iconos que ha descargado están arrojando una marca de tiempo de 1970. Hasta que este error sea resuelto, la solución es usar la orden touch para actualizar la marca de tiempo:

+ +
touch icon-16.png
+
+ +

Esto es todo lo que este add-on hace. Usa dos módulos del SDK: el módulo action button, el cual permite agregar botones al navegador, y el módulo tabs, el cual permite llevar a cabo operaciones básicas con las pestañas. En este caso, se ha creado un botón cuyo icono es el logo de Firefox, y se le agregó un controlador que carga la página principal de Mozilla en una nueva pestaña al hacer clic en el icono.

+ +

Intente editar este archivo. Por ejemplo, puede cambiar la página que es cargada:

+ +
var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://developer.mozilla.org/");
+}
+ +

En la terminal, ejecute de nuevo cfx run. Ahora al hacer clic en el ícono se cargará la página https://developer.mozilla.org/.

+ +

Empaquetar el add-on

+ +

Cuando el add-on este terminado y listo para distribuirse, será necesario empaquetarlo como un archivo XPI. Este es el formato de archivo de instalación para los add-ons de Firefox. Puede distribuir los archivos XPI por cuenta propia o publicarlos en https://addons.mozilla.org para que otros usuarios puedan descargarlos e instalarlos.

+ +

Para construir un XPI, solo se debe ejecutar la orden cfx xpi desde el directorio del add-on:

+ +
cfx xpi
+
+ +

Visualizará una salida como esta:

+ +
Exporting extension to my-addon.xpi.
+
+ +

Para comprobar que funcione, intente instalar el archivo XPI en el Firefox instalado en su sistema. Lo puede hacer presionando la combinación de teclas Ctrl+O (Cmd+O en Mac) desde el Firefox, o seleccionando la opción "Abrir" desde el menú "Archivo" de Firefox. Esto abrirá un diálogo de selección; navegue hasta el archivo "my-addon.xpi", abra el archivo y siga las instrucciones para instalar el add-on.

+ +

Resumen

+ +

En este tutorial se ha construido y empaquetado un add-on usando tres órdenes:

+ + + +

Estas son las tres órdenes principales, usadas cuando se desarrollan add-ons con SDK. Existe una completa documentación de referencia que cubre todas las órdenes que pueden ser usadas y todas sus opciones disponibles.

+ +

El código del add-on usa dos módulos del SDK, action button y tabs. Existe una documentación de referencia para todas las APIs de alto-nivel y bajo-nivel en el SDK.

+ +

Qué sigue?

+ +

Para tener una idea de lo que se puede hacer con las APIs del SDK, puede revisar alguno de estos tutoriales.

+ +

Técnicas avanzadas

+ +

Sobrescribiendo los módulos integrados

+ +

Los módulos del SDK que son usados para implementar un add-on están integrados en Firefox. Cuando se ejecuta o empaqueta un add-on usando cfx run o cfx xpi, el add-on usará las versiones de los módulos de la versión de Firefox que los aloja.

+ +

Como desarrollador de add-on, esto es usualmente lo deseable. Pero si esta desarrollando los módulos del SDK, por supuesto, que no lo es. En este caso se asume que se accedió al SDK desde el repositorio de GitHub y se ejecutó la secuencia de comandos bin/activate desde la raíz de checkout.

+ +

Luego al aplicar cfx run or cfx xpi, se agrega la opción "-o":

+ +
cfx run -o
+
+ +

Esto le indica a cfx a usar las copias locales de los módulos del SDK, y no aquellas en Firefox.

+ +

Desarrollar sin cfx run

+ +

Debido a que cfx run reinicia el navegador cada vez que es invocado, en ocasiones puede resultar un poco incómodo si se realizan cambios frecuentes al add-on. Un modelo alternativo de desarrollo es usar el add-on Extension Auto-Installer: el cual esta atento a la existencia de nuevos archivos XPI en un puerto determinado y los instala automáticamente. De esta manera se pueden probar los cambios realizados sin necesidad de reiniciar el navegador:

+ + + +

Incluso, se puede automatizar este proceso con una simple secuencia de comandos. Por ejemplo:

+ +
while true ; do cfx xpi ; wget --post-file=codesy.xpi http://localhost:8888/ ; sleep 5 ; done
+
+ +

Nótese que el nivel de acceso definido para la terminal cuando se usa este método es diferente, comparado con el nivel de acceso usado cuando un add-on es ejecutado usando cfx run. Esto significa que si se desea ver la salida desde los mensajes de  console.log(), se debe modificar la configuración. Vea la documentación en niveles de acceso para más detalles.

+ +

Otra alternativa es con el uso de grunt y grunt-shell:

+ +
module.exports = function(grunt) {
+  'use strict';
+  require('matchdep').filterDev('grunt-!(cli)').forEach(grunt.loadNpmTasks);
+  grunt.initConfig({
+    shell: {
+      xpi: {
+        command: [
+          'cd pluginpath',
+          'cfx xpi',
+          'wget --post-file=pluginname.xpi http://localhost:8888/ || echo>/dev/null'
+        ].join('&&')
+      }
+    },
+    watch: {
+      xpi: {
+        files: ['pluginpath/**'],
+        tasks: ['shell:xpi']
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-shell');
+  grunt.registerTask('default', ['watch']);
+};
diff --git a/files/es/mozilla/add-ons/sdk/tutorials/index.html b/files/es/mozilla/add-ons/sdk/tutorials/index.html new file mode 100644 index 0000000000..478d88d56a --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/index.html @@ -0,0 +1,146 @@ +--- +title: Tutoriales +slug: Mozilla/Add-ons/SDK/Tutorials +tags: + - Add-on SDK + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials +--- +

Esta página lista prácticos artículos funcionales sobre como lograr realizar tareas específicas usando SDK.

+ +
+

Primeros pasos

+ +
+
+
+
Instalación
+
Descargar, instalar, e inicializar el SDK en Windows, OS X y Linux.
+
+ +
+
Resolución de problemas
+
Algunos consejos para solucionar problemas comunes y obtener más ayuda.
+
+
+ +
+
+
Primeros pasos
+
Guía paso a paso para la creación de un add-on simple con SDK.
+
+
+
+ +
+

Crear interfaces de usuario

+ +
+
+
+
Agregar un botón a la barra de herramientas
+
Fijar un botón a la barra de herramientas de Add-on de Firefox.
+
Agregar una opción de menú en Firefox
+
Agregar opciones a los menú principales de Firefox.
+
+
+ +
+
+
Mostrar una ventana emergente
+
Mostrar una ventana de dialogo emergente implementando HTML y JavaScript.
+
Agregar una opción al menú contextual
+
Agregar opciones al menú contextual de Firefox
+
+
+
+ +
+

Interactuar con el navegador

+ +
+
+
+
Abrir una página web
+
Abrir una página web en una nueva pestaña o ventana del navegador usando el modulo de pestañas, y accediendo a su contenido.
+
Atender las cargas de página
+
Usar el módulo de pestañas para recibir notificaciones cuando una página web nueva sea cargada, y acceder a su contenido.
+
+
+ +
+
+
Obtener la lista de las pestañas abiertas
+
Usar el módulo de pestañas para recorrer las pestañas abiertas actualmente, y acceder a su contenido.
+
+
+
+ +
+

Modificar páginas web

+ +
+
+
+
Modificar páginas web basándose en el URL
+
Crear filtro para páginas web basándose en el URL: siempre que una página web cuyo URL coincida con el filtro cargado, ejecuta una secuencia de comandos específica en él.
+
+
+ +
+
+
Modificar la página web activa
+
Cargar de forma dinámica una secuencia de comandos dentro de la página web activa.
+
+
+
+ +
+

Técnicas de desarrollo

+ +
+
+
+
Registro de actividad
+
Registrar los mensajes a la terminal con propósitos de diagnósticos.
+
Crear módulos reusables
+
Estructurar el add-on en módulos separados para hacer más fácil el desarrollo, depuración, y mantenimiento. Crear paquetes reusables que contengan los módulos, de esta manera otros desarrolladores puedan usarlos también.
+
Pruebas unitarias
+
Escribir y ejecutar pruebas unitarias usando el marco de trabajo para pruebas de SDK.
+
Autoridad Chrome
+
Ganar acceso al objeto Components, permitiendo al add-on cargar y usar el objeto XPCOM.
+
Creando destinos del evento
+
Permite a los objetos definidos emitir sus propios eventos.
+
+
+ +
+
+
Encargarse de las cargas y descargas
+
Obtener las notificaciones cuando el add-on sea cargado y descargado por Firefox, y pasar argumentos en el add-on desde la terminal.
+
Usar módulos externos (jpm)
+
Instalar y usar módulos adicionales que no son entregados con el SDK.
+
Localización
+
Escribir código que pueda ser adaptado a otro idioma.
+
Desarrollo Móbil
+
Desarrollar add-ons para Firefox Móbil en Android.
+
Depurador de Add-on
+
Depurar el código JavaScript del add-on.
+
+
+
+ +
+

Juntando todo

+ +
+
+
+
Add-on Anotador
+
Un manual de un add-on relativamente complejo.
+
+
+
+ +

 

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/installation/index.html b/files/es/mozilla/add-ons/sdk/tutorials/installation/index.html new file mode 100644 index 0000000000..655c6e098f --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/installation/index.html @@ -0,0 +1,145 @@ +--- +title: Instalación +slug: Mozilla/Add-ons/SDK/Tutorials/Installation +tags: + - Guía + - Principiante +translation_of: Mozilla/Add-ons/SDK/Tools/jpm#Installation +--- +

Requerimientos previos

+ +

Para desarrollar add-ons usando el SDK Add-o, necesitaras:

+ + + +

Instalación

+ +

Instalación en OS X, FreeBSD, Linux

+ +

Extrae el contenido del archivo en el lugar de tu preferencia, y navega hasta el directorio principal del SDK con una shell/command prompt. Por ejemplo:

+ +
tar -xf addon-sdk.tar.gz
+cd addon-sdk
+
+ +

Luego, si eres un usuario Bash, ejecuta:

+ +
source bin/activate
+
+ +

Si no eres un usuario Bash, debes ejecutar:

+ +
bash bin/activate
+
+ +

En la línea de entrada de tu terminal ahora deberías tener un prefijo con el nombre del directorio raíz del SDK:

+ +
(addon-sdk)~/mozilla/addon-sdk >
+
+ +

La orden activate establece algunas variables de entorno necesarias para el SDK. Establece las variables solo para la terminal actual. Si abres una terminal nueva, el SDK no estará activo hasta que ejecutes nuevamente activate. Si deseas una activación permanente, dirigete a Establecer activate permanentemente mas abajo.

+ +

Instalación en OS X usando Homebrew

+ +

Si usas Mac, puedes usar Homebrew para instalar el SDK, usando la siguiente orden:

+ +
brew install mozilla-addon-sdk
+ +

Una vez que el proceso se haya completado satisfactoriamente, puedes usar el programa cfx en tu línea de órdenes en cualquier momento: no necesitas ejecutar bin/activate.

+ +

Instalación en Windows

+ +

Extrae el contenido del archivo en el lugar de tu peferencia, y navega hasta el directorio principal de SDK con la terminal. Por ejemplo:

+ +
7z.exe x addon-sdk.zip
+cd addon-sdk
+
+ +

Luego ejecuta:

+ +
bin\activate
+
+ +

En la línea de entrada de tu terminal ahora deberías tener un prefijo con el nombre completo del directorio raíz del SDK:

+ +
(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk>
+
+ +

La orden activate establece algunas variables de entorno necesarias para el SDK. Establece las variables solo para la terminal actual. Si abres una terminal nueva, el SDK no estará activo hasta que ejecutes nuevamente activate. Si deseas una activación permanente, dirigete a Estableciendo activate permanentemente mas abajo.

+ +

Verificar congruencia

+ +

Ejecuta esto en tu terminal:

+ +
cfx
+ +

Esto debería arrojar una salida cuyas primeras lineas deberían verse algo parecido a esto, seguidas de muchas línas de información útil:

+ +
Usage: cfx [options] [command]
+ +

Este es el  programa de la línea de órdnes cfx. Es tu principal interfaz con el Add-on SDK. Lo usas para ejecutar Firefox y probar tu add-on, empaquetar tu add-on para distribuirlo, ver documentación, y ejecutar pruebas unitarias.

+ +

Si no puedes ver esto, dirigete a la página Resolución de problemas.

+ +

Próximos Pasos

+ +

Ahora, dale un vistazo al tutorial Comenzando con cfx, en el cual se explica como crear add-ons usando la herramienta cfx.

+ +

Tópicos avanzados

+ +

Usar el SDK desde Git

+ +

El SDK es desarrollado en GitHub. En vez de usar versiones en archivos comprimidos, puedes echar un vistazo al repositorio GitHub: con esto puedes usar la última versión de desarrollo en vez de usar el lanzamiento oficial.

+ +

Si usas la última versión de desarrollo, debes usarla con la versión Nightly de Firefox, y no podrás enviar a addons.mozilla.org (AMO) ningún add-ons que desarrolles, porque AMO solicita que uses el lanzamiento oficial.

+ +

Desarrollar add-ons para AMO desde Git

+ +

Si deseas desarrollar add-ons que puedan ser admitidos en AMO usando Git, entonces deberás:

+ + + +
git checkout 1.17
+
+git archive 1.17 python-lib/cuddlefish/_version.py | tar -xvf -
+ +

Establecer activate permanentemente

+ +

La orden activate establece algunas variables de entorno necesarias para el SDK. Establece las variables solo para la terminal actual. Si abres una terminal nueva, el SDK no estará activo hasta que ejecutes nuevamente activate.

+ +

Esto significa que puedes tener multiples copias del SDK en diferentes partes del disco y cambiar entre ellas, o incluso tenerlas activas al mismo tiempo en diferentes terminales.

+ +

Estableciendo estas variables de forma permanente en tu entorno para que cada nueva terminal pueda leerlas, podrás hacer que la activación sea permanente. Por lo tanto no tendrás que ejecutar activate cada vez que habrás una nueva terminal.

+ +

Debido a que el conjunto exacto de variables pueden cambiar en nuevas versiones del SDK, lo mejor es consultar la secuencia de órdenes de activación para determinar cuales variables deben ser establecidas. La activación usa diferentes secuencias de órdenes de activación para entornos bash (Linux and OS X) y ambientes Windows .

+ +

Windows

+ +

En Windows, bin\activate usa activate.bat, y puedes hacer la activación permanente usando la herramienta setx de la terminal o el Panel de Control.

+ +

Pasos para el establecimiento permanente:

+ +

Paso 0. Abre el Panel de Control > Sistema > Avanzado > Variables de Entorno.
+ Paso 1. Agrega el directorio Python y el directorio SDK\bin a la Variable de la Ruta del Sistema.
+ Path=...;C:\PYTHON26\;C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15\bin
+ Paso 2. Agrega una Variable de usuario llamada CUDDLEFISH_ROOT y establece su valor a "C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15"
+ Paso 3. Agrega una Variable de usuario llamada PYTHONPATH y establece su valor a "C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15\python-lib"
+ Paso 4. Agrega una Variable de usuario llamada VIRTUAL_ENV y establece su valor a "C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15"

+ +

Linux / OS X

+ +

En Linux y OS X, source bin/activate usan la secuencia de órdenes bash activate, y puedes hacer la activación permanente usando tu ~/.bashrc (en Linux) o ~/.bashprofile (en OS X).

+ +

Como alternativa a esto, puedes crear un enlace simbólico al programa cfx en tu directorio ~/bin:

+ +
ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx
+
+ +

Si usaste Homebrew para instalar SDK, las variables de entorno ya estan establecidas permanentemente.

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html b/files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html new file mode 100644 index 0000000000..e817b40495 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html @@ -0,0 +1,66 @@ +--- +title: Obtener la lista de las pestañas abiertas +slug: Mozilla/Add-ons/SDK/Tutorials/List_Open_Tabs +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/List_Open_Tabs +--- +
+

Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básico de cfx.

+ +

Este ejemplo usa la API action button, la cual esta solo disponible para Firefox 29 en adelante.

+
+ +

Para listar las pestañas abiertas, se puede iterar sobre el mismo objeto tabs.

+ +

El siguiente add-on agrega un action button que registra las URLs de las pestañas abiertas cuando el/la usuario/a hacen click en el:

+ +
require("sdk/ui/button/action").ActionButton({
+  id: "list-tabs",
+  label: "List Tabs",
+  icon: "./icon-16.png",
+  onClick: listTabs
+});
+
+function listTabs() {
+  var tabs = require("sdk/tabs");
+  for (let tab of tabs)
+    console.log(tab.url);
+}
+
+ +

Observe que para hacer que esto funcione debe guardar un icono para el botón al directorio "data" del add-on con el nombre de "icon-16.png": puede descargarlo de aqui: .

+ +

Ejecute el add-on, cargue algunas pestañas y hace click en el botón. Verá en la terminal una salida similar a esta:

+ +
info: http://www.mozilla.org/en-US/about/
+info: http://www.bbc.co.uk/
+
+ +

No tiene acceso directo a ningún contenido de la pestaña. Para acceder al contenido de la pestaña necesita adjuntar un script usando tab.attach(). Este add-on adjunta un script a todas las pestañas abiertas. El script agrega un borde rojo al documento de la pestaña:

+ +
require("sdk/ui/button/action").ActionButton({
+  id: "list-tabs",
+  label: "List Tabs",
+  icon: "./icon-16.png",
+  onClick: listTabs
+});
+
+function listTabs() {
+  var tabs = require("sdk/tabs");
+  for (let tab of tabs)
+    runScript(tab);
+}
+
+function runScript(tab) {
+  tab.attach({
+    contentScript: "document.body.style.border = '5px solid red';"
+  });
+}
+
+ +

Conozca más

+ +

Para conocer más sobre las pestañas en el SDK, puede dirigirse a la referencia de tabs en la API.

+ +

Para conocer mas sobre la ejecución de scripts en las pestañas, puede diregirse a usando tab.attach() en el tutorial.

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html b/files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html new file mode 100644 index 0000000000..99642fade4 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html @@ -0,0 +1,38 @@ +--- +title: Atender las cargas de página +slug: Mozilla/Add-ons/SDK/Tutorials/Listen_for_Page_Load +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Listen_for_Page_Load +--- +
Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básico de cfx.
+ +

Se pueden obtener notificaciones sobre la carga de nuevas paǵinas a través del módulo tabs. El siguiente add-on escucha el evento integrado de la pestaña ready  y simplemente registra el URL de cada pestaña en la medida que el/la usuario/a realiza la carga:

+ +
require("sdk/tabs").on("ready", logURL);
+
+function logURL(tab) {
+  console.log(tab.url);
+}
+
+ +

No se obtiene acceso directo a ningún contenido de la pestaña.

+ +

Para acceder al contenido de la pestaña se necesita adjuntar un script a la pestaña usando tab.attach(). Este add-on adjunto un script para abrir todas las pestañas. El script agrega un borde rojo al documento de la pestaña:

+ +
require("sdk/tabs").on("ready", runScript);
+
+function runScript(tab) {
+  tab.attach({
+    contentScript: "if (document.body) document.body.style.border = '5px solid red';"
+  });
+}
+
+ +

(Este ejemplo es solo para mostrar la idea: para implementar algo como esto, se debería usar page-mod, y especificar un "*" como el patron de coincidencia.)

+ +

Conozca más

+ +

Para conocer más sobre las pestañas en el SDK, puede dirigirse a la referencia de tabs en la API. Puede escuchar varios eventos relacionados con las pestañas incluyendo open, close, y activate.

+ +

Para conocer mas sobre la ejecución de scripts en las pestañas, puede diregirse a usando tab.attach() en el tutorial.

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html b/files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html new file mode 100644 index 0000000000..08a0a80224 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html @@ -0,0 +1,135 @@ +--- +title: Modificar la página web activa +slug: Mozilla/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab +--- +
+

Para seguir esta guía. necesita instalar el add-on SDK y saber lo basico sobre jpm (para Firefox 38 en adelante) o lo  basicp sobre cfx .

+ +

Esta guía usa la API action button, la cual esta disponible para Firefox 29 en adelante.

+
+ +

Para modificar la página web activa, se carga uno o mas scripts de contenido dentro de ella usando el método attach() del objeto tab. El trabajo de estos scripts es interactuar con el contenido de la web.

+ +

Aquí se muestra un ejemplo simple:

+ +
var button = require("sdk/ui/button/action").ActionButton({
+  id: "style-tab",
+  label: "Style Tab",
+  icon: "./icon-16.png",
+  onClick: function() {
+    require("sdk/tabs").activeTab.attach({
+      contentScript: 'document.body.style.border = "5px solid red";'
+    });
+  }
+});
+ +

Para ejecutar este ejemplo, se guarda el icono llamado "icon-16.png" en el directorio "data" del add-on. Puede descargar este icono:  .

+ +

Este add-on crea un botón con el icono de Mozilla. Este tienen un controlador de eventos del ratón el cual busca la pestaña activa y carga un script dentro de la página activa. El script es especificado usando la opción contentScript, y simplemente dibuja un borde rojo alrededor de la página.

+ +

Abra cualquier página web en el navegador, y haga clic en el botón. Deberá poder ver un borde rojo que aparecerá alrededor de la página, como este:

+ +

+ +

Mantener los Scripts de Contenido en un archivo diferente

+ +

En el ejemplo anterior, hemos pasado el contenido del script como una cadena.

+ +

A menos que el script sea extremadamente simple, manten el script como un archivo separado en el directorio data del add-on. Esto hace que el código sea más fácil de mantener, depurar, y revisar. Para hacer esto, utiliza la opción contentScriptFile y no contentScript, cuyos valores es una URL que apunta a uno o varios archivos con el contenido de los scripts.

+ +

Por ejemplo,  si guardamos el script anterior bajo el directorio data  del add-on en un archivo llamado my-script.js:

+ +
var self = require("sdk/self");
+
+var button = require("sdk/ui/button/action").ActionButton({
+  id: "style-tab",
+  label: "Style Tab",
+  icon: "./icon-16.png",
+  onClick: function() {
+    require("sdk/tabs").activeTab.attach({
+      contentScriptFile: self.data.url("my-script.js")
+    });
+  }
+});
+
+ +

Puedes cargar mas de un script, y los scripts pueden interactuar directamente entre ellos. Por lo tanto puede cargar jQuery, y luego tu script de contenido puede usarlo.

+ +

Cargar varios archivo de script de contenido

+ +

Los datos asignados a contentScriptFile pueden ser un vector. Los scripts serán cargados en el mismo orden del vector.

+ +

En el siguiente ejemplo, estamos cargando dos scripts, first.js & second.js. Ambos scripts serán ejecutados en el mismo contexto, por lo tanto todo lo definido como publico en first.js será accedible desde second.js.

+ +
// lib/main.js
+
+var self = require("sdk/self");
+var tabs = require("sdk/tabs");
+
+require("sdk/ui/button/action").ActionButton({
+  id: "load-several",
+  label: "load several scripts",
+  icon: "./icon-16.png",
+  onClick: function () {
+    tabs.activeTab.attach({
+      contentScriptFile: [self.data.url('first.js'),
+                          self.data.url('second.js')]
+    });
+  }
+});
+
+ +

Comunicación con los Scripts de Contenido

+ +

Tu script del add-on tus scripts de contenido no pueden acceder directamente a las variables del otro o llamar a las funciones del otro, pero pueden enviarse mensajes entre ellos.

+ +

Para enciar un mensaje de un lado a otro, el remitente llama a port.emit() y el receptor escucha usando port.on().

+ + + +

Re escribamos el ejemplo anterior para pasar un mensaje desde el add-on al script de contenido.

+ +

El script de contenido debe verse así_

+ +
// "self" is a global object in content scripts
+// Listen for a "drawBorder"
+self.port.on("drawBorder", function(color) {
+  document.body.style.border = "5px solid " + color;
+});
+
+ +

En el script del add-on, enviaremos un mensaje "drawBorder" al script de contenido usando el objeto devuelto desde attach():

+ +
var self = require("sdk/self");
+var tabs = require("sdk/tabs");
+
+var button = require("sdk/ui/button/action").ActionButton({
+  id: "style-tab",
+  label: "Style Tab",
+  icon: "./icon-16.png",
+  onClick: function() {
+    var worker = tabs.activeTab.attach({
+      contentScriptFile: self.data.url("my-script.js")
+    });
+    worker.port.emit("drawBorder", "red");
+  }
+});
+
+ +

El mensaje drawBorder no es un mensaje construido, es un mensaje que el add-on define en la llamada port.emit().

+ +

Inyectando CSS

+ +

Al contrario de la API page-mod, tab.attach() no te permite inyectar CSS directamente dentro de la página.

+ +

Para modificar el estilo de la página, tienes que usar Javascript, como en el ejemplo anteriot.

+ +

Aprender más

+ +

Para aprender más sobre el trabajo con pestañas en el SDK, puede ver la guía Open a Web Page, la guía List Open Tabs, y la tabs API reference.

+ +

Para aprender mpas sobre los scripts de contenido, puede ver content scripts guide.

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html b/files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html new file mode 100644 index 0000000000..e20146d84d --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html @@ -0,0 +1,227 @@ +--- +title: Modificar páginas web basándose en el URL +slug: Mozilla/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Modifying_Web_Pages_Based_on_URL +--- +
Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básicos de jpm (Firefox 38 en adelante) o cfx.
+ +

Para modificar cualquier página que coincida con un patrón en particular (por ejemplo, "http://example.org/") mientras es cargada, se usa el módulo page-mod.

+ +

Para crear un page-mod, es necesario especificar dos cosas:

+ + + +

El siguiente es un fragmento de código donde el script de contenido es provisto como una opción de contentScript y el patrón de URL es dado como una opción de  include:

+ +
// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+
+// Create a page-mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScript: 'document.body.innerHTML = ' +
+                 ' "<h1>Page matches ruleset</h1>";'
+});
+
+ +

Haga lo siguiente:

+ + + +

Abajo se muestra lo que debe poder ver.

+ +

+ +

Especificar el Patrón de Coincidencia

+ +

El patrón de coincidencia usa la sintaxis match-pattern. Se puede definir un patrón de coincidencia como una única cadena o una matriz.

+ +

Mantener el Script de Contenido en un Archivo Separado

+ +

En el ejemplo anterior, se definió el script de contenido como una cadena de caracteres.

+ +

A menos que el script sea muy simple, se debe mantener el script en un archivo separado. Esto hace al código más fácil de mantener, depurar, y revisar. Para hacer esto es necesario:

+ + + +

Por ejemplo, si se guarda el script anterior en un archivo llamado my-script.js bajo el directorio data del add-on:

+ +
// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+// Import the self API
+var self = require("sdk/self");
+
+// Create a page-mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: self.data.url("my-script.js")
+});
+ +

O para Firefox 34 en adelante:

+ +
// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+
+// Create a page-mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: "./my-script.js"
+});
+ +

Cargar Múltiples Scripts de Contenido

+ +

Es posible cargar mas de un script, y los scripts pueden interactuar directamente.

+ +

Por ejemplo, se puede reescribir my-script.js para usar jQuery.

+ +
$("body").html("<h1>Page matches ruleset</h1>");
+
+ +

Luego se descarga jQuery al directorio data del add-on, y se carga conjuntamente el script y el jQuery (asegurándose de cargar primero el jQuery).

+ +
// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+// Import the self API
+var self = require("sdk/self");
+
+// Create a page mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: [self.data.url("jquery-1.7.min.js"), self.data.url("my-script.js")]
+});
+
+ +

Se puede usar contentScript y contentScriptFile juntos en el mismo page-mod. Si se hace esto, los script cargados usando contentScriptFile son cargados primero.

+ +
// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+// Import the self API
+var self = require("sdk/self");
+
+// Create a page-mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: self.data.url("jquery-1.7.min.js"),
+  contentScript: '$("body").html("<h1>Page matches ruleset</h1>");'
+});
+
+ +

Note, sin embargo, que no es posible cargar un script desde un sitio web. El script debe ser cargado desde el directorio data.

+ +

Comunicarse con el Script de Contenido

+ +

El script del add-on y los scripts de contenido no pueden acceder directamente a las variables o llamar a las funciones de los demás, pero pueden enviar mensajes.

+ +

Para enviar un mensaje de un lado a otro, el emisor llama a port.emit() y el receptor escucha usando port.on().

+ + + +

Se reescribe el ejemplo anterior para pasar un mensaje desde el add-on al script de contenido. El mensaje contendrá el nuevo contenido para ser insertado en el documento.

+ +

El script de contenido ahora necesita lucir de esta manera:

+ +
// "self" is a global object in content scripts
+// Listen for a message, and replace the document's
+// contents with the message payload.
+self.port.on("replacePage", function(message) {
+  document.body.innerHTML = "<h1>" + message + "</h1>";
+});
+
+ +

En el script del add-on, se enviará al script de contenido un mensaje desde onAttach.

+ +
// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+// Import the self API
+var self = require("sdk/self");
+
+// Create a page-mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: self.data.url("my-script.js"),
+  // Send the content script a message inside onAttach
+  onAttach: function(worker) {
+    worker.port.emit("replacePage", "Page matches ruleset");
+  }
+});
+
+ +

El mensaje replacePage no es un mensaje ya definido: es un mensaje definido por el add-on en la llamada port.emit().

+ +
+

Inyectar CSS

+ +

Note que la característica descrita en esta sección es experimental por los momentos. Se continuará dando soporte a esta característica, pero los detalles dela API pueden cambiar.

+ +

En vez de inyectar JavaScript en una página, es posible inyectar CSS configurando la opción contentStyle del page-mod.

+ +
var pageMod = require("sdk/page-mod").PageMod({
+  include: "*",
+  contentStyle: "body {" +
+                "  border: 5px solid green;" +
+                "}"
+});
+
+ +

Como con el contentScript, hay una opción correspondiente a contentStyleFile que toma una URL de un archivo CSS en el directorio "data" ; es una buena practica usar esta opción en vez de contentStyle si el CSS un poco complejo.

+ +
var pageMod = require("sdk/page-mod").PageMod({
+  include: "*",
+  contentStyleFile: require("sdk/self").data.url("my-style.css")
+});
+
+ +

O, para Firefox 34, se puede usar una versión más simple:

+ +
var pageMod = require("sdk/page-mod").PageMod({
+  include: "*",
+  contentStyleFile: "./my-style.css"
+});
+
+ +

Conociendo más

+ +

Para conocer más sobre page-mod, puede dirigirse a la página de referencia de la API. En particular, el constructor de PageMod toma algunas opciones adicionales para tomar el control de este comportamiento:

+ + + +

Para conocer más sobre los scripts de contenido en general, puede dirigirse a la  guía de scripts de contenido.

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html b/files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html new file mode 100644 index 0000000000..1140029e16 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html @@ -0,0 +1,48 @@ +--- +title: Abrir una página web +slug: Mozilla/Add-ons/SDK/Tutorials/Open_a_Web_Page +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Open_a_Web_Page +--- +
Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básico de cfx.
+ +

Para abrir una nueva página web, se usa el módulo tabs:

+ +
var tabs = require("sdk/tabs");
+tabs.open("http://www.example.com");
+
+ +

Esta función es asíncrona, por lo tanto no se tendrá inmediatamanete un objeto tab  el cual se pueda examinar. Para hacer esto, se pasa una función de retrollamada en open(). La retrollamada es asignada a pa propiedad onReady, y pasará la pestaña como argumento:

+ +
var tabs = require("sdk/tabs");
+tabs.open({
+  url: "http://www.example.com",
+  onReady: function onReady(tab) {
+    console.log(tab.title);
+  }
+});
+
+ +

Incluso ahora, no se tiene acceso directo a ningún contenido dentro de la pestaña.

+ +

Para acceder al contenido de la pstaña se necesita adjuntar un script a la pestaña usando tab.attach(). Este add-on carga una página, luego adjunta un script a la página el cual le agrega un borde rojo:

+ +
var tabs = require("sdk/tabs");
+tabs.open({
+  url: "http://www.example.com",
+  onReady: runScript
+});
+
+function runScript(tab) {
+  tab.attach({
+    contentScript: "document.body.style.border = '5px solid red';"
+  });
+}
+
+ +

Conozca más

+ +

Para conocer más sobre las pestañas en el SDK, puede dirigirse a la referencia de tabs en la API.

+ +

Para conocer mas sobre la ejecución de scripts en las pestañas, puede diregirse a usando tab.attach() en el tutorial.

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html b/files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html new file mode 100644 index 0000000000..cb2c3d7b18 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html @@ -0,0 +1,143 @@ +--- +title: Resolución de problemas +slug: Mozilla/Add-ons/SDK/Tutorials/Troubleshooting +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Troubleshooting +--- +

Si tiene problemas para lograr que el Add-on SDK funcione correctamente, ¡no entre en pánico! Esta página lista algunos puntos de inicio que pueden ayudarte a solucionar el problema.

+ +

Problema de Cuarentena en Mac OS X

+ +

En Mac OS X, puede aparecer el siguiente error cuando intenta ejecutar cfx:

+ +
/path/to/sdk/bin/cfx: /usr/bin/env: bad interpreter: Operation not permitted
+
+ +

Esto puede ser causado debido a que el archivo ejecutable de cfx fue puesto en cuarentena durante la descarga desde Internet.

+ +

Pra sacar el archivo de la cuarentena, use xattr -d, especificando com.apple.quarantine como el nombre del atributo a ser eliminado, y cfx como el archivo desde el cual borrar ese atributo:

+ +
xattr -d com.apple.quarantine /path/to/sdk/bin/cfx
+
+ +

Verificar Python

+ +

La herramienta cfx del SDK se ejecuta sobre Python. Si tiene problemas para ejecutar cfx de cualquier manera, asegúrese de tener Python correctamente instalado.

+ +

Intente ejecutar la siguiente línea desde una terminal:

+ +
  python --version
+
+ +

cfx espera contar con Python 2.5, 2.6 o 2.7. Versiones anteriores o superiores pueden o no funcionar correctamente. Los espacios en blanco en la ruta de instalación no estan soportados.

+ +

Verificar Firefox o XULRunner

+ +

cfx busca lugares conocidos en el sistema para encontrar a Firefox o XULRunner. cfx puede no haber encontrado una instalación, o si tiene múltiples instalaciones, cfx puede haber encontrado la instalación menos apropiada. En esos casos debe usar  la opción --binary de cfx. Vea la guia cfx Tool para más información.

+ +

Cuando ejecuta cfx para probar el add-on o realiza pruebas unitarias, se muestra en pantalla la ubicación de los binarios de Firefox o XULRunner encontrados, por lo que puede asegurarse de la ubicación revisando estas salidas.

+ +

Verificar la Terminal de Texto

+ +

Cuando se generan errores en la API del SDK y el código, estos son registrados en la terminal de texto. Esta debería ser la misma terminal desde la cual ejecuta cfx.

+ +

No deje sueltos los Archivos No-SDK

+ +

Actualmente el SDK no maneja de manera adecuada los archivos y directorios que no espera encontrar. Si hay directorios vacíos, directorios o archivos  que no estan relacionados con el SDK dentro del directorio addon-sdk o sus subdirectorios, intente eliminarlos.

+ +

Buscar Problemas Conocidos

+ +

Alguien mas debe haber experimentado su mismo problema. Frecuentemente otras personas publican sus problemas a la lista de correo del proyecto. Usted también puede explorar la lista de problemas conocidos ó buscar palabras claves específicas.

+ +

Contactar al Equipo del Proyecto y al Grupo de Usuarios

+ +

Las personas usuarias del SDK y las personas miembro del equipo del proyecto discuten problemas y propuestas en la lista de correo del proyecto. Alguien más puede haber tenido un problema igual al suyo, por lo tanto puede intentar buscar en la lista. Igualmente puede publicar una pregunta si así lo desea.

+ +

También puede hablar en tiempo real con otras personas usuarias de SDK en el canal #jetpack en la red IRC de Mozilla.

+ +

Y si desea reportar un error en el SDK, es siempre bienvenido! Para esto deberá crear una cuenta con Bugzilla, el rastreador de errores de Mozilla.

+ +

Ejecutar Pruebas Unitarias en SDK

+ +

El SDK trae consigo un conjunto de pruebas las cuales aseguran el correcto funcionamiento de las APIs. Puede ejecutaras de la siguiente manera:

+ +
  cfx testall
+
+ +

Algunas de las pruebas abren la ventana de Firefox para verificar las APIs relacionadas a la interfaz de usuario, no se preocupe. Por favor deje que el proceso culmine antes de reanudar su trabajo.

+ +

Cuando el proceso culmine, la terminal debe mostrar la salida que puede verse de la siguiente manera:

+ +
  Testing cfx...
+  .............................................................
+  ----------------------------------------------------------------------
+  Ran 61 tests in 4.388s
+
+OK
+  Testing reading-data...
+  Using binary at '/Applications/Firefox.app/Contents/MacOS/firefox-bin'.
+  Using profile at '/var/folders/FL/FLC+17D+ERKgQe4K+HC9pE+++TI/-Tmp-/tmpu26K_5.mozrunner'.
+  .info: My ID is 6724fc1b-3ec4-40e2-8583-8061088b3185
+  ..
+  3 of 3 tests passed.
+  OK
+  Total time: 4.036381 seconds
+  Program terminated successfully.
+  Testing all available packages: nsjetpack, test-harness, api-utils, development-mode.
+  Using binary at '/Applications/Firefox.app/Contents/MacOS/firefox-bin'.
+  Using profile at '/var/folders/FL/FLC+17D+ERKgQe4K+HC9pE+++TI/-Tmp-/tmp-dzeaA.mozrunner'.
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  ...............................................
+
+3405 of 3405 tests passed.
+  OK
+  Total time: 43.105498 seconds
+  Program terminated successfully.
+  All tests were successful. Ship it!
+
+ +

Si la salida revela muchos errores, puede ser una señal que el SDK no se esta ejecutando correctamente en su sistema. En ese caso, por favor reporte el error o envíe un mensaje a la lista de correo. Vea la sección anterior para más información sobre como hacer esto.

diff --git a/files/es/mozilla/add-ons/themes/obsolete/index.html b/files/es/mozilla/add-ons/themes/obsolete/index.html new file mode 100644 index 0000000000..d420b6ebf0 --- /dev/null +++ b/files/es/mozilla/add-ons/themes/obsolete/index.html @@ -0,0 +1,10 @@ +--- +title: Obsolete +slug: Mozilla/Add-ons/Themes/Obsolete +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/Themes/Obsolete +--- +

This page collects theme docs that we don't expect will ever be updated, but which we're keeping for the time being as potential source material for updated docs.

+

{{ ListSubPages ("/en-US/Add-ons/Themes/Obsolete", 5) }}

diff --git a/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/add_toolbar_button/index.html b/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/add_toolbar_button/index.html new file mode 100644 index 0000000000..216b120445 --- /dev/null +++ b/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/add_toolbar_button/index.html @@ -0,0 +1,33 @@ +--- +title: Añadir botón a la barra de herramientas +slug: >- + Mozilla/Add-ons/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Add_Toolbar_Button +translation_of: >- + Mozilla/Thunderbird/Thunderbird_extensions/HowTos/Common_Thunderbird_Extension_Techniques/Add_Toolbar_Button +--- +

{{AddonSidebar}}

+ +

Fichero XUL de ejemplo:

+ +
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://demo/skin/overlay.css" type="text/css" ?>
+
+<overlay id="messengerWindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <script type="application/x-javascript" src="overlay.js" />
+  <toolbarpalette id="MailToolbarPalette">
+    <toolbarbutton id="demo-button"
+      class="demo-button toolbarbutton-1"
+      label="Demo"
+      type="button"
+      oncommand="Demo.load();"
+      />
+  </toolbarpalette>
+</overlay>
+
+ +

Añada el siguiente código al fichero CSS referenciado en el fichero XUL:

+ +
#demo-button, [place="palette"] > #demo-button {
+  list-style-image: url("chrome://demo/skin/icon.png") !important;
+}
+
diff --git a/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/index.html b/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/index.html new file mode 100644 index 0000000000..8711130729 --- /dev/null +++ b/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/index.html @@ -0,0 +1,13 @@ +--- +title: Common Thunderbird Extension Techniques +slug: Mozilla/Add-ons/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques +tags: + - NeedsTranslation + - TopicStub + - thunderbird +translation_of: >- + Mozilla/Thunderbird/Thunderbird_extensions/HowTos/Common_Thunderbird_Extension_Techniques +--- +

{{AddonSidebar}}

+ +

{{ tree() }}

diff --git a/files/es/mozilla/add-ons/thunderbird/howtos/index.html b/files/es/mozilla/add-ons/thunderbird/howtos/index.html new file mode 100644 index 0000000000..6d5cb0424a --- /dev/null +++ b/files/es/mozilla/add-ons/thunderbird/howtos/index.html @@ -0,0 +1,128 @@ +--- +title: Thunderbird HowTos +slug: Mozilla/Add-ons/Thunderbird/HowTos +tags: + - Add-ons + - Extensions + - NeedsTranslation + - TopicStub + - thunderbird +translation_of: Mozilla/Thunderbird/Thunderbird_extensions/HowTos +--- +

{{AddonSidebar}}

+ +
+

This page is badly broken (https://bugzilla.mozilla.org/show_bug.cgi?id=868872), use http://mdn.beonex.com/en/Extensions/Thunderbird/HowTos.html in the meanwhile.

+
+ +

Please add questions or answers to this page so that other people can benefit from your work. Also, you will see that there are many topics for which there is a question, but no answer. Please help by adding an answer! (Adding another question helps too!)

+ +

To get started creating the most basic extension framework, please see Building a Thunderbird Extension.

+ +

This page is organized into two parts: common extension techniques and Thunderbird-specific APIs. The former discusses general methods to hook into Thunderbird, while the latter is more focused on how to do interesting things once Thunderbird has started running your code.

+ +

See also "An overview of Thunderbird components". Many of the components described on that page have links to related examples.

+ +

Common Extension Techniques

+ +
+ +
+ +

Thunderbird-specific APIs for Extensions

+ +

Each of the pages listed in this section contains a number of related topics. For example, the "Compose New Message" page contains sections that describe how to open a new message window, modify a message body, etc.

+ +

Folders and message lists

+ + + +

View message

+ + + +

Compose new messages

+ + + +

Reply to message

+ + + +

Access address book

+ + + +
+ + +

Activity Manager

+
+ + diff --git a/files/es/mozilla/add-ons/thunderbird/index.html b/files/es/mozilla/add-ons/thunderbird/index.html new file mode 100644 index 0000000000..4e66877136 --- /dev/null +++ b/files/es/mozilla/add-ons/thunderbird/index.html @@ -0,0 +1,137 @@ +--- +title: Thunderbird extensions +slug: Mozilla/Add-ons/Thunderbird +tags: + - Add-ons + - Extensions + - NeedsTranslation + - TopicStub + - thunderbird +translation_of: Mozilla/Thunderbird/Thunderbird_extensions +--- +
Building a Thunderbird extension
+Step-by-step explanation on how to build an extension for Thunderbird.
+ +
+

{{AddonSidebar}}

+The following documentation provides help for creating extensions for Mozilla's Thunderbird email client. Although there are many similarities with Firefox extensions there are also some differences that may confound the starting developer.
+ +

+Please help! You can add a how-to (a question or an answer or a code snippet), summarize and link to a relevant newsgroup discussion, or create a tutorial. Need help? Contact jenzed.
+ + + + + + + + +
+

Documentation

+ +

Getting started with Thunderbird

+ +

A brave, young developer wants to develop an add-on for Thunderbird. Here's a few links to help them through this journey.

+ +
    +
  • Start by reading the tutorial and learn how to build a Thunderbird extension (Outdated, still talks about overlays and the add-on builder is no longer available but the tutorial has not been updated.)
    • +
  • Read about the main windows so that you know what one means when they say « thread pane », « preview pane », and « folder pane ».
    • + +
  • Want to do some real stuff? See how to inspect a message (demo add-on included!)
    • +
  • Play with our other demo add-on that exercises some more advanced Thunderbird-specific features
    • +
  • Want to do even more stuff? Don't reinvent the wheel: steal functions from the thunderbird-stdlib project (doc here). Functions for dealing with messages (delete them, archive them, change their tags, etc.) are included.
    • +
  • Haven't found what you're looking for? Read the Thunderbird how-tos; they contain a lot of recipes for things extensions want to do.
    • +
  • Still haven't managed to do what you wanted? See the list of all Thunderbird communication channels so that you know where to ask when you get stuck :-).
    • +
  • Feeling really brave? Read the source using a fancy interface; you can often find tests that demonstrate how to do what you're trying to achieve.
    • +
+ +

The Gloda database

+ +

Thunderbird has a subsystem called Gloda. Gloda stands for « Global Database », and creates Thunderbird-wide relations between objects. Gloda provides concepts such as Conversations, Messages, Identities, Contacts. All these concepts are related together: a Conversation contains Messages which are linked to Identities (from field, to field) which are themselves part of a Contact: indeed, a contact has multiple identities.

+ +

Typical use cases for Gloda: find all messages whose subject matches [search term], find all messages from [person], find all messages in the same thread as [a given message], find all messages involving [person], etc. etc.

+ +

Gloda is extremely powerful and is used heavily by add-ons such as Thunderbird Conversations. Learn more about Gloda:

+ + + + + +

Some of these links may be wildly out of date, but they still provide valuable information on the codebase.

+ + + + + + + 		+

Community

+ + + +

{{ DiscussionList("dev-extensions", "mozilla.dev.extensions") }}

+ + + +

Tools

+ + + +

... more tools ...

+ +

View All...

+ + + +
+
XUL, JavaScript, XPCOM, Themes, Developing Mozilla
+
+
+ +

Categories

+ +

{{ languages( { "ja": "ja/Extensions/Thunderbird" } ) }}

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