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
|
---
title: O que são extensões?
slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
tags:
- Extensões
- Extensões da Web
translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
original_slug: Mozilla/Add-ons/WebExtensions/O_que_sao_WebExtensions
---
<div>{{AddonSidebar}}</div>
<p>Uma extensão adiciona funcionalidades e funções a um navegador. É criada, utilizando a tecnologia padrão baseada na Web - CSS, HTML e JavaScript. Esta tira vantagem de algumas APIs da Web, como JavaScript pode em uma página da web, mas uma extensão também tem acesso ao seu próprio conjunto de APIs de JavaScript. Isto significa que pode fazer muito mais numa extensão do que pode com o código numa página da Web. Aqui estão apenas alguns exemplos das coisas que pode fazer.</p>
<p><strong>Melhore ou complemente um site da Web</strong>: utilize um extra para fornecer funcionalidades adicionais no navegador ou informação do seu site da Web. Permita que os utilizadores recolham detalhes das páginas que eles visitam, para melhorar o serviço que oferece.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15808/Amazon_add_on.png"></p>
<p>Exemplos: <a href="https://addons.mozilla.org/en-US/firefox/addon/amazon-browser-bar/">Amazon Assistant para Firefox</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/onenote-clipper/">OneNote Web Clipper</a>, e <a href="https://addons.mozilla.org/en-US/firefox/addon/grammarly-1/">Grammarly for Firefox</a></p>
<p><strong>Deixe que os utilizadores mostrem a sua personalidade</strong>: Browser extensions can manipulate the content of pages browsed by a user. Help the user add a favorite logo or picture as the background to every page they visit. Extensions also give you the ability to update the look of the Firefox UI. (Update the Firefox UI using standalone <a href="https://developer.mozilla.org/en-US/Add-ons/Themes/Theme_concepts">theme add-ons</a> too).</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15809/MyWeb_New_Tab_add_on.png" style="height: 398px; width: 540px;"></p>
<p>Exemplos: <a href="https://addons.mozilla.org/en-US/firefox/addon/myweb-new-tab/">MyWeb New Tab</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/tabliss/">Tabliss</a>, e <a href="https://addons.mozilla.org/en-US/firefox/addon/vivaldifox/">VivaldiFox</a></p>
<p><strong>Adicionar ou remover conteúdo das páginas da Web</strong>: You might want to help users block intrusive ads from web pages, provide access to a travel guide whenever a country or city is mentioned in a web page, or reformat page content to offer a consistent reading experience. With the ability to access and update both a page’s HTML and CSS, you can help users see the web the way they want to.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15807/ublock_origin_add_on.png" style="height: 480px; width: 640px;"></p>
<p>Exemplos: <a href="https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/">uBlock Origin</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/reader/">Reader</a>, e <a href="https://addons.mozilla.org/en-US/firefox/addon/toolbox-google-play-store/">Toolbox para Google Play Store™</a></p>
<p><strong>Adicionar ferramentas e novas funcionalidades de navegação</strong>: Add new features to a taskboard, or generate QR code images from URLs, hyperlinks, or page text. With flexible UI options and the power of the WebExtensions APIs you can easily add new features to a browser. And, you can enhance almost any website’s features or functionality, it doesn't have to be your website.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15806/QR_Code_Image_Generator_add_on.png"></p>
<p>Examples: <a href="https://addons.mozilla.org/en-US/firefox/addon/qr-code-image-generator/">QR Code Image Generator</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/swimlanes-for-trello/">Swimlanes for Trello</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/tomato-clock/">Tomato Clock</a></p>
<p><strong>Jogos</strong>: Offer traditional computer games, with off-line play features, but also explore new game possibilities, for example, by incorporating gameplay into everyday browsing.</p>
<p> <img alt="" src="https://mdn.mozillademos.org/files/15805/Asteroids_in_Popup_add_on%20.png" style="height: 438px; width: 700px;"></p>
<p>Examples: <a href="https://addons.mozilla.org/en-US/firefox/addon/asteroids-in-popup/">Asteroids in Popup</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/solitaire-card-game-new-tab/">Solitaire Card Game New Tab</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/2048-prime/">2048 Prime</a>.</p>
<p><strong>Adicionar ferramentas de desenvolvimento</strong>: You may provide web development tools as your business or have developed a useful technique or approach to web development that you want to share. Either way, you can enhance the built-in Firefox developer tools by adding a new tab to the developer toolbar.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15804/aXe_Developer_Tools_add_on.png" style="height: 261px; width: 700px;"></p>
<p>Examples: <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/react-devtools/">Web React Developer Tools</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/">aXe Developer Tools</a></p>
<p>Extensions for Firefox are built using the WebExtensions APIs, a cross-browser system for developing extensions. To a large extent, the API is compatible with the <a class="external external-icon" href="https://developer.chrome.com/extensions">extension API</a> supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or Microsoft Edge with just a few <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">changes</a>. The API is also fully compatible with <a href="/en-US/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>.</p>
<p>If you have ideas or questions, or need help migrating a legacy add-on to WebExtensions APIs, you can reach us on the <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> or in <a href="irc://irc.mozilla.org/extdev">#extdev</a> on <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a>.</p>
<h2 id="E_a_seguir">E a seguir?</h2>
<ul>
<li>Consulte o desenvolvimento de uma extensão simples em <a href="https://developer.mozilla.org/pt-PT/Add-ons/WebExtensions/A_sua_primeira_extensao">A sua primeira extensão</a>.</li>
<li>Saiba sobre a estrutura de uma extensão em <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomia de uma extensão</a>.</li>
<li>Experimente alguns exemplos de extensões em <a href="/pt-PT/Add-ons/WebExtensions/Exemplos_extensoes">Exemplos de extensões</a>.</li>
</ul>
|
