1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
title: Anatomía de una extension
slug: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
tags:
- WebExtensions
translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
original_slug: Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension
---
<div>{{AddonSidebar}}</div>
<p>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.</p>
<p>Toda extensión debe contener un archivo llamado <a href="/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#manifest.json">"manifest.json"</a>. Este puede tener enlaces a otros tipos de archivos:</p>
<ul>
<li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Scripts_en_segundo_plano">Páginas en segundo plano</a>: implementan la lógica de larga ejecución.</li>
<li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Scripts_de_contenido">Scripts de contenido</a>: interactúan con las páginas web (note que esto no es lo mismo que JavaScript en un elemento {{HTMLElement("script")}} dentro de una página).</li>
<li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Acciones_del_navegador_2">Archivos de acción del navegador</a>: implementan los botones de la barra de herramientas.</li>
<li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Acciones_de_las_páginas">Archivos de acción de la página: </a>Implementan botones en la barra de direcciones.</li>
<li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Opciones_de_las_páginas">Páginas de opciones</a>: Definen una IU para que los usuarios vean y cambien las configuraciones de la extensión.</li>
<li>
<div id="gt-res-content">
<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="es"><span><a href="/es/Add-ons/WebExtensions/user_interface/Sidebars">archivos de la barra lateral</a>: agregue una barra lateral al navegador.</span></span></div>
</div>
</li>
<li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Recursos_web_accesibles">Recursos Web accesibles</a>: Hace posible que el contenido empaquetado acceda a páginas web y scripts.</li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/13669/webextension-anatomy.png" style="display: block; height: 581px; margin-left: auto; margin-right: auto; width: 600px;"></p>
<h2 id="manifest.json">manifest.json</h2>
<p>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.</p>
<p>Mira la página de referencia <a href="/es/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> para ver todos los detalles.</p>
<h2 id="Scripts_en_segundo_plano">Scripts en segundo plano</h2>
<p>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.</p>
<p>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 <a href="/es/Add-ons/WebExtensions/API">API de WebExtensions</a> en el script, siempre y cuando hayas solicitado el <a href="/es/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permiso</a> necesario.</p>
<h3 id="Especificando_los_scripts_en_segundo_plano">Especificando los scripts en segundo plano</h3>
<p>Puedes incluir un script en segundo plano usando la propiedad <code>background</code> en "manifest.json":</p>
<pre class="brush: json">// manifest.json
"background": {
"scripts": ["background-script.js"]
}</pre>
<p>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.</p>
<h3 id="Entorno_del_script_en_segundo_plano">Entorno del script en segundo plano</h3>
<h4 id="APIs_del_DOM">APIs del DOM</h4>
<p>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 <code><a href="/es/docs/Web/API/Window">window</a></code>, junto con todas las APIs estándar del DOM que proporciona.</p>
<p>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.</p>
<p>Sin embargo, puedes escoger y proveer tu página en segundo plano como un archivo HTML separado:</p>
<pre class="brush: json">// manifest.json
"background": {
"page": "background-page.html"
}</pre>
<h4 id="APIs_de_WebExtension">APIs de WebExtension</h4>
<p>Los scripts en segundo plano pueden usar cualquier <a href="/es/Add-ons/WebExtensions/API">API de WebExtension</a> en el script, siempre que tu extensión tenga los <a href="/es/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permisos</a> necesarios.</p>
<h4 id="Acceso_de_origen_cruzado">Acceso de origen cruzado</h4>
<p>Los scripts en segundo plano pueden hacer peticiones XHR a cualquier host para los cuales tienen <a href="/es/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permisos del host</a>.</p>
<h4 id="Acciones_del_navegador">Acciones del navegador</h4>
<p>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 <code><a href="/es/Add-ons/WebExtensions/API/browserAction#onClicked">onClicked</a></code> de las acciones del navegador:</p>
<pre class="brush: js">browser.browserAction.onClicked.addListener(handleClick);</pre>
<h4 id="Contenido_web">Contenido web</h4>
<p>Los scripts en segundo plano no tienen acceso directo a las páginas web. Sin embargo, pueden cargar <a href="/es/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">scripts de contenido</a> en páginas web, y <a href="/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">comunicarse con esos scripts empleando la API de paso de mensajes</a>.</p>
<h4 id="Políticas_de_segurdiad_para_el_contendio">Políticas de segurdiad para el contendio</h4>
<p>Los scripts de segundo plano están restringidos de algunas operaciones dañinas, como el uso de <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>, a través de la Política de Seguridad del Contenido. Vea la <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Política de Segurdiad del Contenido </a>para más detalles sobre esto.</p>
<h2 id="Scripts_de_contenido">Scripts de contenido</h2>
<p>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.</p>
<p>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.</p>
<p>Los scripts de contenido pueden ver y manipular el DOM de las páginas, igual que los scripts cargados normalmente por la página.</p>
<p>A diferencia de los scripts normales, ellos pueden:</p>
<ul>
<li>Realizar peticiones XHR de dominio cruzado</li>
<li>Usar un pequeño subconjunto de las <a href="/es/docs/Mozilla/Add-ons/WebExtensions/API">APIs de WebExtension</a></li>
<li>Intercambiar mensajes con sus scripts en segundo plano, y por esta vía, tener acceso indirecto a todas las APIs de WebExtension.</li>
</ul>
<p>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 <code><a href="/es/docs/Web/API/Window/postMessage">window.postMessage()</a></code>.</p>
<p>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.</p>
<p>Mira el artículo <a href="/es/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">scripts de contenido</a> para aprender más.</p>
<h2 id="Recursos_web_accesibles">Recursos web accesibles</h2>
<p>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.</p>
<p>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 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">img</a></code> que referencia a las imágenes mediante el atributo <code>src</code>.</p>
<p>Para aprender más, vea la documentación para la el parámetro <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resource</a> del manifest.json.</p>
|
