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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: Anatomia de uma extensão
slug: Mozilla/Add-ons/WebExtensions/Anatomia_de_uma_extensao
tags:
- Extensões da Web
translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
---
<div>{{AddonSidebar}}</div>
<p>Uma extensão consiste numa coleção de ficheiros, empacotados para distribuição e instalação. Neste artigo, nós passaremos rapidamente pelos ficheiros que podem estar presentes numa extensão.</p>
<h2 id="manifest.json">manifest.json</h2>
<p>This is the only file that must be present in every extension. It contains basic metadata such as its name, version and the permissions it requires. It also provides pointers to other files in the extension.</p>
<p>This manifest can also contain pointers to several other types of files:</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">Background pages</a>: Implement long-running logic.</li>
<li>Icons for the extension and any buttons it might define.</li>
<li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Sidebars_popups_options_pages">Sidebars, popups, and options pages</a>: HTML documents that provide content for various user interface components.</li>
<li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">Content scripts</a>: JavaScript included with your extension, that you will inject into web pages.</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>
<p>See the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> reference page for all the details.</p>
<p>Other than those referenced from the manifest, an extension can include additional <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Extension_pages">Extension pages</a> with supporting files.</p>
<h2 id="Scripts_de_fundo_(segundo_plano)"><em>Scripts</em> de fundo (segundo plano)</h2>
<p>Extensions often need to maintain long-term state or perform long-term operations independently of the lifetime of any particular web page or browser window. That is what background scripts are for.</p>
<p>Background scripts are loaded as soon as the extension is loaded and stay loaded until the extension is disabled or uninstalled. You can use any of the <a href="/en-US/Add-ons/WebExtensions/API">WebExtension APIs</a> in the script, as long as you have requested the necessary <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a>.</p>
<h3 id="Especificar_os_scripts_de_fundo">Especificar os <em>scripts</em> de fundo</h3>
<p>You can include a background script using the <code>background</code> key in "manifest.json":</p>
<pre class="brush: json">// manifest.json
"background": {
"scripts": ["background-script.js"]
}</pre>
<p>You can specify multiple background scripts: if you do, they run in the same context, just like multiple scripts that are loaded into a single web page.</p>
<h3 id="Ambiente_de_script_de_fundo">Ambiente de <em>script</em> de fundo</h3>
<h4 id="APIS_de_DOM">APIS de DOM</h4>
<p>Background scripts run in the context of special pages called background pages. This gives them a <code><a href="/en-US/docs/Web/API/Window">window</a></code> global, along with all the standard DOM APIs provided by that object.</p>
<p>You do not have to supply your background page. If you include a background script, an empty background page will be created for you.</p>
<p>However, you can choose to supply your background page as a separate HTML file:</p>
<pre class="brush: json">// manifest.json
"background": {
"page": "background-page.html"
}</pre>
<h4 id="APIs_da_Extensão_da_Web">APIs da Extensão da Web</h4>
<p>Background scripts can use any of the <a href="/en-US/Add-ons/WebExtensions/API">WebExtension APIs</a> in the script, as long as their extension has the necessary <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a>.</p>
<h4 id="Acesso_cruzado_da_origem">Acesso cruzado da origem</h4>
<p>Background scripts can make XHR requests to any hosts for which they have <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">host permissions</a>.</p>
<h4 id="Conteúdo_da_Web">Conteúdo da Web</h4>
<p>Background scripts do not get direct access to web pages. However, they can load <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> into web pages and can <a href="/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">communicate with these content scripts using a message-passing API</a>.</p>
<h4 id="Política_de_segurança_do_conteúdo">Política de segurança do conteúdo</h4>
<p>Background scripts are restricted from certain potentially dangerous operations, like the use of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>, through a Content Security Policy. See <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a> for more details on this.</p>
<h2 id="Barras_laterais_janelas_(popups)_opções_de_páginas">Barras laterais, janelas (popups), opções de páginas</h2>
<p>A sua extensão pode inclur vários componentes da interface do utilizador cujo conteúdo é definido utilizando um documento HTML:</p>
<ul>
<li>uma <a href="/pt-PT/Add-ons/WebExtensions/interface_do_utilizador/Barras_laterais">barra lateral</a> é um painel que é exibido no lado esquerdo da janela do navegador, junto à página da <em>web</em></li>
<li>uma <a href="/pt-PT/Add-ons/WebExtensions/interface_do_utilizador/Popups">janela (popup</a>) é uma janela que pode exibir quando o utilizador clica num <a href="/pt-PT/Add-ons/WebExtensions/interface_do_utilizador/A%C3%A7%C3%A3o_navegador">botão da barra de ferramentas</a> ou <a href="/pt-PT/Add-ons/WebExtensions/interface_do_utilizador/Acoes_pagina">botão da barra de endereço</a></li>
<li>uma <a href="/pt-PT/Add-ons/WebExtensions/interface_do_utilizador/Options_pages">página de opções </a>é uma página que é mostrada quando o utilizador acede ao seu extra de preferências no gestor de extras nativo do navegador</li>
</ul>
<p>For each of these components, you create an HTML file and point to it using a specific property in <a href="/pt-PT/Add-ons/WebExtensions/manifest.json">manifest.json</a>. The HTML file can include CSS and JavaScript files, just like a normal web page.</p>
<p>All of these are a type of <a href="/pt-PT/Add-ons/WebExtensions/interface_do_utilizador/Paginas_de_extens%C3%A3o">Extension pages</a>, and unlike a normal web page, your JavaScript can use all the same privileged WebExtension APIs as your background script. They can even directly access variables in the background page using {{WebExtAPIRef("runtime.getBackgroundPage()")}}.</p>
<h2 id="Páginas_de_extensão">Páginas de extensão</h2>
<p>You can also include HTML documents in your extension which are not attached to some predefined user interface component. Unlike the documents you might provide for sidebars, popups, or options pages, these don't have an entry in manifest.json. However, they do also get access to all the same privileged WebExtension APIs as your background script.</p>
<p>You'd typically load a page like this using {{WebExtAPIRef("windows.create()")}} or {{WebExtAPIRef("tabs.create()")}}.</p>
<p>See <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">Extension pages</a> to learn more.</p>
<h2 id="Scripts_de_conteúdo"><em>Scripts</em> de conteúdo</h2>
<p>Use content scripts to access and manipulate web pages. Content scripts are loaded into web pages and run in the context of that particular page.</p>
<p>Content scripts are extension-provided scripts which run in the context of a web page; this differs from scripts which are loaded by the page itself, including those which are provided in {{HTMLElement("script")}} elements within the page.</p>
<p>Content scripts can see and manipulate the page's DOM, just like normal scripts loaded by the page.</p>
<p>Unlike normal page scripts, they can:</p>
<ul>
<li>Make cross-domain XHR requests.</li>
<li>Use a small subset of the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">WebExtension APIs</a>.</li>
<li>Exchange messages with their background scripts and can in this way indirectly access all the WebExtension APIs.</li>
</ul>
<p>Content scripts cannot directly access normal page scripts but can exchange messages with them using the standard <code><a href="/en-US/docs/Web/API/Window/postMessage">window.postMessage()</a></code> API.</p>
<p>Usually, when we talk about content scripts, we are referring to JavaScript, but you can inject CSS into web pages using the same mechanism.</p>
<p>See the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> article to learn more.</p>
<h2 id="Recursos_de_acessibilidade_da_Web">Recursos de acessibilidade da Web</h2>
<p>Web accessible resources are resources such as images, HTML, CSS, and JavaScript that you include in the extension and want to make accessible to content scripts and page scripts. Resources which are made web-accessible can be referenced by page scripts and content scripts using a special URI scheme.</p>
<p>For example, if a content script wants to insert some images into web pages, you could include them in the extension and make them web accessible. Then the content script could create and append <code><a href="/en-US/docs/Web/HTML/Element/img">img</a></code> tags which reference the images via the <code>src</code> attribute.</p>
<p>To learn more, see the documentation for the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a> manifest.json key.</p>
<p> </p>
<p> </p>
|
