HTTP/2 - Glossário do MDN Web Docs: Definições de termos relacionados à Web

HTTP/2
======

**HTTP/2** é a principal revisão do protocolo de rede HTTP. Os princiais objetivos do HTTP/2 são reduzir a latência, permitindo a multiplexação total das requisições e respostas, minimizar a sobrecarga do protocolo por meio da compactação eficiente dos campos do cabeçalho HTTP e adicionar suporte para priorização de requisições e notificações dos servidores.

HTTP/2 não modifica a semântica de aplicativo do HTTP de nenhuma maneira. Todos os principais conceitos encontrados no HTTP 1.1, como métodos HTTP, códigos de status, URIs e campos de cabeçalho, permanecem no lugar. Em vez disso, o HTTP/2 modifica como os dados são formatados (enquadrados) e transportados entre o cliente e o servidor, sendo que ambos gerenciam todo o processo e ocultam a complexidade do aplicativo na nova camada de enquadramento. Como resultado, todas as aplicações existentes podem ser entregues sem modificação.

Veja também
-----------

* HTTP on MDN
* HTTP/2 na Wikipedia


Ruby - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Ruby
====

*Ruby* é uma linguagem de programação de código aberto. Em um contexto Web (en-US), Ruby é geralmente usado em servidores com o framework *Ruby On Rails* (ROR) para produzir websites/apps.

Aprenda Mais
------------

### Conhecimento geral

* Ruby on Wikipedia
### Referência técnica

* Site oficial do Ruby
* Site oficial do Ruby On Rails


Idempotente - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Idempotente
===========

Um método HTTP é **idempotente** se uma requisição idêntica pode ser feita uma ou mais vezes em sequência com o mesmo efeito enquanto deixa o servidor no mesmo estado. Em outras palavras, um método idempotente não deveria possuir nenhum efeito colateral (exceto para manter estatísticas). Implementados corretamente, o `GET`, `HEAD`, `PUT`, e `DELETE` são métodos **idempotentes**, mas não o método `POST`. Todos os métodos seguros também são idempotentes.

Para ser idempotente, somente o estado atual do *back-end* de um servidor deve ser considerado, o código de status retornado por cada requisição pode variar: a primeira chamada de um `DELETE` vai provavelmente retornar um `200`, enquanto as chamadas sucessivas vão provavelmente retornar `404`. Outra implicação do `DELETE` ser idempotente é de que os desenvolvedores não deveriam implementar APIs RESTful com a funcionalidade de deleção de última entrada usando o método `DELETE`.

Note que a idempotência de um método não é garantida pelo servidor, algumas aplicações também podem quebrar a constante de idempotência.

`GET /pageX HTTP/1.1` é idempotente. Chamado diversas vezes em sequência, ele vai retornar o mesmo resultado:
```

GET /pageX HTTP/1.1
GET /pageX HTTP/1.1
GET /pageX HTTP/1.1
GET /pageX HTTP/1.1
```

`POST /add_row HTTP/1.1` não é idempotente. Se ele for chamado diversas vezes, ele adicionará novas entradas:
```

POST /add_row HTTP/1.1
POST /add_row HTTP/1.1   -> Adiciona a 2ª linha
POST /add_row HTTP/1.1   -> Adiciona a 3ª linha
```

`DELETE /idX/delete HTTP/1.1` é idempotente, mesmo que o código de status mude entre requisições:
```

DELETE /idX/delete HTTP/1.1   -> Retorna 200 se idX existe
DELETE /idX/delete HTTP/1.1   -> Retorna 404 como ele acabou de ser deletado
DELETE /idX/delete HTTP/1.1   -> Retorna 404
```

Aprenda mais
------------

### Conhecimento geral

* Definição de idempotente na especificação HTTP.
### Conhecimento técnico

* Descrição de métodos idempotentes comuns: `GET`, `HEAD`, `PUT`, `DELETE`, `OPTIONS`, `TRACE`
* Descrição de métodos não-idempotentes comuns: `POST`,`PATCH`, `CONNECT`


String - Glossário do MDN Web Docs: Definições de termos relacionados à Web

String
======

Em qualquer linguagem de programação, uma string é uma sequência de caracteres usados para representar texto

Em JavaScript, uma String é um dos valores primitivos e o objeto `String` é um wrapper em cima do tipo primitivo string.

Leia mais
---------

### Conhecimento Geral

* String (computer science) (em inglês) na Wikipedia
* Estruturas e tipos de dados em JavaScript


Cabeçalho de entidade - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Cabeçalho de entidade
=====================

Um cabeçalho de entidade é um HTTP header (en-US) descrevendo o conteúdo do corpo da mensagem. Cabeçalhos da entidade são usados em ambos, respostas e requerimentos HTTP. Cabeçalhos como `Content-Length`, `Content-Language`, `Content-Encoding` são cabeçalhos de entidade.

Mesmo se cabeçalhos de entidade não sejam requerimentos ou cabeçalhos de resposta, eles são muitas vezes incluídos nestes termos.

No exemplo a seguir, `Content-Length` é um cabeçalho de entidade, enquanto `Host` e `User-Agent` são request headers:
```

POST /myform.html HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Content-Length: 128
```

Aprenda mais
------------

### Conhecimento técnico

* List of all HTTP headers


Função Callback - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Função Callback
===============

Uma função callback é uma função passada a outra função como argumento, que é então invocado dentro da função externa para completar algum tipo de rotina ou ação.

Aqui está um pequeno exemplo:

```js
function greeting(name) {
  alert("Olá " + name);
}

function processUserInput(callback) {
  var name = prompt("Por favor insira seu nome.");
  callback(name);
}

processUserInput(greeting);
```

O exemplo acima é de uma synchronous callback, uma vez que é executada imediatamente.

Note, no entanto, que callbacks são normalmente utilizados para continuar a execução do código após uma operação asynchronous ser terminada — essas são chamadas asynchronous callbacks. Um bom exemplo são as funções callback executadas dentro de um bloco `.then()` encadeado ao final de uma promessa após essa promessa ser cumprida ou rejeitada. Essa estrutura é usada em muitas APIs da web modernas, como a `fetch()`.

Aprenda mais
------------

### Conhecimento geral

* Callback no Wikipedia


OTA - Glossário do MDN Web Docs: Definições de termos relacionados à Web

OTA
===

*Over-The-Air* (**OTA** ou "Pelo-Ar") refere-se à atualização automática de programas de dispositivos conectados a partir de um servidor central. Todos os proprietários de dispositivos recebendo um determinado conjunto de atualizações estão sob o mesmo "canal"; e cada dispositivo pode amiúde acessar vários canais (e.g. para "builds" de produção ou engenharia).

Aprenda mais
------------

### Conhecimentos Gerais

* Over-the-air na Wikipedia
* Criando e aplicando pacotes de atualização para o Firefox OS


Cabeçalho HTTP - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Cabeçalho HTTP
==============

Um **Cabeçalho HTTP** é um campo de uma requisição ou resposta HTTP que passa informações adicionais, alterando ou melhorando a precisão da semântica da mensagem ou do corpo. Cabeçalhos são *case-insensitive*, iniciam-se no começo da linha e são seguidos imediamente por um `':'` e um valor dependendo do cabeçalho em si. O valor termina no próximo CRLF ou no fim da mensagem.

Tradicionalmente, cabeçalhos são classificados em categorias, apesar disso, essa classificação não faz mais parte de nenhuma especificação:

* General header: Cabeçalhos aplicados ambos em requisições e respostas mas sem nenhuma relação com os dados eventualmente transmitidos no corpo.
* Request header: Cabeçalhos contendo mais informação sobre o recurso a ser buscado ou sobre o cliente em si.
* Response header (en-US): Cabeçalhos com informação adicional sobre a resposta, como localização ou sobre o servidor em si (nome, versão etc.).
* Entity header: Cabeçalhos contendo mais informação sobre o corpo da entidade, como o tamanho do conteúdo ou o seu *MIME-type.*

Uma requisição básica com um cabeçalho:
```

GET /example.http HTTP/1.1
Host: example.com
```

Redirecionamentos possuem cabeçalhos mandatários (`Location`):
```

302 Found
Location: /NewPage.html
```

Um típicos conjunto de cabeçalhos:
```

304 Not Modified
Access-Control-Allow-Origin: *
Age: 2318192
Cache-Control: public, max-age=315360000
Connection: keep-alive
Date: Mon, 18 Jul 2016 16:06:00 GMT
Server: Apache
Vary: Accept-Encoding
Via: 1.1 3dc30c7222755f86e824b93feb8b5b8c.cloudfront.net (CloudFront)
X-Amz-Cf-Id: TOl0FEm6uI4fgLdrKJx0Vao5hpkKGZULYN2TWD2gAWLtr7vlNjTvZw==
X-Backend-Server: developer6.webapp.scl3.mozilla.com
X-Cache: Hit from cloudfront
X-Cache-Info: cached
```

1. Especificações
    1. Sintaxe dos cabeçalhos na especificação HTTP.
2. Referência Técnica
    1. Lista de todos os cabeçalhos HTTP
3. Glossário
    1. HTTP header
    2. General header
    3. Request header
    4. Response header (en-US)
    5. Entity header
    6. Forbidden header name
    7. Forbidden response header name
    8. CORS-safelisted request header (en-US)
    9. CORS-safelisted response header (en-US)


Conversão de Tipo - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Conversão de Tipo
=================

**Conversão de Tipo** (ou *typecasting*) significa transferência de dados de um **tipo de dado** para o outro. A **conversão implícita** ocorre quando o compilador atribui automaticamente os **tipos de dados**, mas o código fonte também pode **explicitamente** exigir uma conversão de tipo. Por exemplo, dada a instrução `5+2.0`, o *float* `2.0` será implicitamente convertido para *integer*, mas dada a instrução `Number("0x11")`, a *string* "0x11" será explicitamente convertida para o número 17.

Aprender mais
-------------

### Conhecimento Geral

* Conversão de Tipos em Wikipedia


Internet - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Internet
========

A Internet é a rede mundial de redes que utiliza o conjunto de protocolos da Internet (também chamado TCP/IP dos seus dois mais importantes protocolos).

Aprenda mais
------------

### Saiba mais sobre isso

* How the Internet works (Introdução para iniciantes)


OpenGL - Glossário do MDN Web Docs: Definições de termos relacionados à Web

OpenGL
======

**OpenGL** (**Open Graphics Library**) é uma API (*Application Programming Interface*) multiplataforma e multilíngue para renderizar gráficos vetoriais 2D e 3D. A API é normalmente usada para interagir com uma GPU (*Graphics Processing Unit*) para obter renderização acelerada por hardware.

Saiba mais
----------

### Conhecimento geral

* OpenGL em Wikipedia


JPEG - Glossário do MDN Web Docs: Definições de termos relacionados à Web

JPEG
====

**JPEG** (*Joint Photographic Experts Group*) é um método de compreensão com perda geralmente usado para imagens digitais.

Saiba mais
----------

### Conhecimento geral

* JPEG na Wikipedia


Port - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Port
====

Porta

 Para um computador se conectar à rede mundial de computadores com um endereço de IP(Protocolo de internet - Internet Protocol),
 uma porta é um ponto terminal de comunicação.
 Portas são designadas por números, e abaixo são especificados 1024 portas que é associado por padrão com um protocolo específico.

 Por exemplo, a porta padrão para a HTTP (Protocolo de transferência de hiper texto - Hyper Text Transfer Protocol) é 80 e o
 padrão para o HTTPS (Protocolo de transferência de hiper texto Seguro - Hyper Text Transfer Protocol Secure) é 443,
 então um http servidor espera pelas requisições naquelas portas.Cada protocolo de internet está associado com uma porta padrão:
 SMTP(25), POP3(110), IMAP(143), IRC(194) e assim em diante.

Aprenda mais
------------

### Conhecimento geral

* Port no Wikipedia


Wrapper - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Wrapper
=======

Em linguagens de programação, como o JavaScript, um wrapper é uma função destinada a chamar uma ou mais funções, às vezes diretamente por conveniência, e às vezes adaptá-las para fazer uma tarefa ligeiramente diferente no processo.

Por exemplo, as bibliotecas do SDK para AWS são exemplos de wrappers.

Aprender mais
-------------

### Conhecimento Geral

Wrapper function em Wikipedia


XHR (XMLHttpRequest) - Glossário do MDN Web Docs: Definições de termos relacionados à Web

XHR (XMLHttpRequest)
====================

`XMLHttpRequest` (XHR) é uma API JavaScript para criar requisições AJAX. Os métodos desta API fornecem opções para enviar requisições entre o browser e o server.

Veja mais
---------

### Geral

* XMLHttpRequest on Wikipedia
* Synchronous vs. Asynchronous Communications
### Informações técnicas

* O objeto `XMLHttpRequest`.
* Veja como utilizar o XMLHttpRequest na documentação.


XHTML - Glossário do MDN Web Docs: Definições de termos relacionados à Web

XHTML
=====

O HTML pode ser transferido através da internet para o navegador usando duas sintaxes: sintaxe HTML e sintaxe XML (en-US), também conhecido como XHTML.

HTML5 e HTML/XHTML
------------------

Ambas as sintaxes são definidas através do padrão HTML5. A escolha da sintaxe é dedicada ao tipo MIME, que é enviado no cabeçalho HTTP `Content-Type` . O tipo MIME para sintaxe HTML é `text/html`, e o tipo MIME para sintaxe XHTML é `aplication/xhtml+xml`.

O exemplo mostra um documento HTML e um XHTML incluindo os cabeçalhos relevantes do HTTP.

### Documento HTML

```html
<!-- Content-Type: text/html -->

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>HTML</title>
  </head>
  <body>
    <p>Eu sou um documento HTML</p>
  </body>
</html>
```

### Documento XHTML

```xml
<!-- Content-Type: application/xhtml+xml -->

<html xml:lang="en" xmlns="https://www.w3.org/1999/xhtml">
  <head>
    <title>XHTML</title>
  </head>
  <body>
    <p>Eu sou um documento XHTML</p>
  </body>
</html>
```

Tipo MIME contra DOCTYPE
------------------------

Antes do HTML5, as duas sintaxes eram definidas por duas especificações diferentes: HTML 4.01 e XHTML 1.0. O padrão XHTML1 afirma que você poderia usar XHTML declarando um DOCTYPE especial. Porém, isso nunca foi implementado por nenhum navegador,e tem sido trocado pelo padrão HTML5. **Se sua página é enviada como `text/html` você não pode usar XHTML**.

Observe que o tipo MIME deve ser declarado no `Content-Type` HTTP header. Se você apenas inseriu a meta tag no HTML como `<meta http-equiv=…>`, ele será ignorado e tratado como `text/html`.

Se você apresentar suas páginas `text/html` e acreditar que você está escrevendo XHTML, você poderá enfrentar vários problemas, tal como descritos nos seguintes artigos:

* No to XHTML um artigo excelente do Spartanicus
* Beware of XHTML por David Hammond
* Sending XHTML as text/html Considered Harmful por Ian Hickson
* XHTML's Dirty Little Secret por Mark Pilgrim
* XHTML - What's the Point? por Henri Sivonen
* XHTML is not for Beginners por Lachlan Hunt
Suporte
-------

O XHTML é suportado pela maioria dos navegadores modernos, incluindo Firefox, Chrome, Safari, e Opera. Entretanto, o Internet Explorer suporta XHTML somente a partir da versão 9. O Internet Explorer 8 e suas versões mais antigas mostrarão uma mensagem de tipo de arquivo desconhecido quando aberto um documento XHTML com o tipo XHTML MIME correto.

Também é bom observar que muitas bibliotecas populars de JavaScript e ferramentas para desenvolvedores não suportam XHTML ou tem suporte limitado.

Diferenças entre HTML
---------------------

Veja Properly Using CSS and JavaScript in XHTML Documents para uma lista com algumas das diferenças entre HTML e XHTML.

Ferramentas
-----------

* Standards-Compliant Authoring Tools
Veja também
-----------

* HTML
* Namespaces


Base64 - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Base64
======

**Base64** é um grupo de esquemas de codificação binários para texto semelhantes que representam dados binários em um formato de string ASCII, traduzindo-os em uma representação radix-64. O termo *Base64* se origina de uma codificação de transferência de conteúdo MIME.

Os esquemas de codificação Base64 são comumente usados quando há necessidade de codificar dados binários que precisam ser armazenados e transferidos por meio de mídia projetada para lidar com ASCII. Isso é para garantir que os dados permaneçam intactos sem modificação durante o transporte. *Base64* é comumente usado em vários aplicativos, incluindo e-mail via MIME e armazenamento de dados complexos em XML (en-US)

Uma aplicação comum da codificação Base64 na web é codificar dados binários para que possam ser incluídos em um data: URL (en-US).

Em JavaScript existem duas funções respectivamente para decodificar e codificar strings Base64:

* `btoa()` (en-US): cria uma string ASCII codificada em Base64 a partir de uma "string" de dados binários ("btoa" deve ser lido como "binário para ASCII").
* `atob()`: decodifica uma string codificada em Base64 ("atob" deve ser lida como "ASCII para binário").

O algoritmo usado por `atob()` e `btoa()` é especificado na RFC 4648, seção 4.

Observe que `btoa()` espera receber dados binários e lançará uma exceção se a string fornecida contiver quaisquer caracteres cuja representação UTF-16 ocupe mais de um byte. Para obter mais detalhes, consulte a documentação de `btoa()` (en-US).

Aumento de tamanho codificado
-----------------------------

Cada dígito Base64 representa exatamente 6 bits de dados. Assim, três bytes de 8 bits da string de entrada/arquivo binário (3×8 bits = 24 bits) podem ser representados por quatro dígitos Base64 de 6 bits (4×6 = 24 bits).

Isso significa que a versão Base64 de uma string ou arquivo terá pelo menos 133% do tamanho de sua fonte (um aumento de ~33%). O aumento pode ser maior se os dados codificados forem pequenos. Por exemplo, a cadeia "a" com length === 1 fica codificado para "YQ==" com length === 4— um aumento de 300%.

O "Unicode Problem"
-------------------

Como as strings JavaScript são codificadas em 16 bits, na maioria dos navegadores que chamam `window.btoa` em uma string Unicode causará um `Character Out Of Range`, exceção se um caractere exceder o intervalo de um caractere codificado em ASCII de 8 bits. Existem dois métodos possíveis para resolver este problema:

* a primeira é escapar de toda a string e depois codificá-la;
* a segunda é converter a string UTF-16 em uma matriz de caracteres UTF-8 e depois codificá-la.

Aqui estão os dois métodos possíveis.

### Solução nº 1 – escapando da string antes de codificá-la

```js
function utf8\_to\_b64(str) {
  return window.btoa(unescape(encodeURIComponent(str)));
}

function b64\_to\_utf8(str) {
  return decodeURIComponent(escape(window.atob(str)));
}

// Usage:
utf8\_to\_b64("✓ à la mode"); // "4pyTIMOgIGxhIG1vZGU="
b64\_to\_utf8("4pyTIMOgIGxhIG1vZGU="); // "✓ à la mode"
```

Esta solução foi proposta por Johan Sundström.

 Outra solução possível sem utilizar as funções 'unescape' e 'escape' agora obsoletas.
 Essa alternativa, no entanto, não executa a codificação base64 da string de entrada. Observe as diferenças nas saídas de `utf8_to_b64` e `b64EncodeUnicode`. Adotar essa alternativa pode levar a problemas de interoperabilidade com outros aplicativos.

```js
function b64EncodeUnicode(str) {
  return btoa(encodeURIComponent(str));
}

function UnicodeDecodeB64(str) {
  return decodeURIComponent(atob(str));
}

b64EncodeUnicode("✓ à la mode"); // "JUUyJTlDJTkzJTIwJUMzJUEwJTIwbGElMjBtb2Rl"
UnicodeDecodeB64("JUUyJTlDJTkzJTIwJUMzJUEwJTIwbGElMjBtb2Rl"); // "✓ à la mode"
```

### Solution #2 – rewriting `atob()` and `btoa()` using `TypedArray`s and UTF-8

>
> **Note:** The following code is also useful to get an ArrayBuffer from a Base64 string and/or vice versa (see below).
>
>
>

```js
"use strict";
// Array of bytes to Base64 string decoding
function b64ToUint6(nChr) {
  return nChr > 64 && nChr < 91
    ? nChr - 65
    : nChr > 96 && nChr < 123
      ? nChr - 71
      : nChr > 47 && nChr < 58
        ? nChr + 4
        : nChr === 43
          ? 62
          : nChr === 47
            ? 63
            : 0;
}

function base64DecToArr(sBase64, nBlocksSize) {
  const sB64Enc = sBase64.replace(/[^A-Za-z0-9+/]/g, "");
  const nInLen = sB64Enc.length;
  const nOutLen = nBlocksSize
    ? Math.ceil(((nInLen \* 3 + 1) >> 2) / nBlocksSize) \* nBlocksSize
    : (nInLen \* 3 + 1) >> 2;
  const taBytes = new Uint8Array(nOutLen);

  let nMod3;
  let nMod4;
  let nUint24 = 0;
  let nOutIdx = 0;
  for (let nInIdx = 0; nInIdx < nInLen; nInIdx++) {
    nMod4 = nInIdx & 3;
    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << (6 \* (3 - nMod4));
    if (nMod4 === 3 || nInLen - nInIdx === 1) {
      nMod3 = 0;
      while (nMod3 < 3 && nOutIdx < nOutLen) {
        taBytes[nOutIdx] = (nUint24 >>> ((16 >>> nMod3) & 24)) & 255;
        nMod3++;
        nOutIdx++;
      }
      nUint24 = 0;
    }
  }

  return taBytes;
}

/\* Base64 string to array encoding \*/
function uint6ToB64(nUint6) {
  return nUint6 < 26
    ? nUint6 + 65
    : nUint6 < 52
      ? nUint6 + 71
      : nUint6 < 62
        ? nUint6 - 4
        : nUint6 === 62
          ? 43
          : nUint6 === 63
            ? 47
            : 65;
}

function base64EncArr(aBytes) {
  let nMod3 = 2;
  let sB64Enc = "";

  const nLen = aBytes.length;
  let nUint24 = 0;
  for (let nIdx = 0; nIdx < nLen; nIdx++) {
    nMod3 = nIdx % 3;
    if (nIdx > 0 && ((nIdx \* 4) / 3) % 76 === 0) {
      sB64Enc += "\r\n";
    }

    nUint24 |= aBytes[nIdx] << ((16 >>> nMod3) & 24);
    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
      sB64Enc += String.fromCodePoint(
        uint6ToB64((nUint24 >>> 18) & 63),
        uint6ToB64((nUint24 >>> 12) & 63),
        uint6ToB64((nUint24 >>> 6) & 63),
        uint6ToB64(nUint24 & 63),
      );
      nUint24 = 0;
    }
  }
  return (
    sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) +
    (nMod3 === 2 ? "" : nMod3 === 1 ? "=" : "==")
  );
}

/\* UTF-8 array to JS string and vice versa \*/

function UTF8ArrToStr(aBytes) {
  let sView = "";
  let nPart;
  const nLen = aBytes.length;
  for (let nIdx = 0; nIdx < nLen; nIdx++) {
    nPart = aBytes[nIdx];
    sView += String.fromCodePoint(
      nPart > 251 && nPart < 254 && nIdx + 5 < nLen /\* six bytes \*/
        ? /\* (nPart - 252 << 30) may be not so safe in ECMAScript! So…: \*/
          (nPart - 252) \* 1073741824 +
            ((aBytes[++nIdx] - 128) << 24) +
            ((aBytes[++nIdx] - 128) << 18) +
            ((aBytes[++nIdx] - 128) << 12) +
            ((aBytes[++nIdx] - 128) << 6) +
            aBytes[++nIdx] -
            128
        : nPart > 247 && nPart < 252 && nIdx + 4 < nLen /\* five bytes \*/
          ? ((nPart - 248) << 24) +
            ((aBytes[++nIdx] - 128) << 18) +
            ((aBytes[++nIdx] - 128) << 12) +
            ((aBytes[++nIdx] - 128) << 6) +
            aBytes[++nIdx] -
            128
          : nPart > 239 && nPart < 248 && nIdx + 3 < nLen /\* four bytes \*/
            ? ((nPart - 240) << 18) +
              ((aBytes[++nIdx] - 128) << 12) +
              ((aBytes[++nIdx] - 128) << 6) +
              aBytes[++nIdx] -
              128
            : nPart > 223 && nPart < 240 && nIdx + 2 < nLen /\* three bytes \*/
              ? ((nPart - 224) << 12) +
                ((aBytes[++nIdx] - 128) << 6) +
                aBytes[++nIdx] -
                128
              : nPart > 191 && nPart < 224 && nIdx + 1 < nLen /\* two bytes \*/
                ? ((nPart - 192) << 6) + aBytes[++nIdx] - 128
                : /\* nPart < 127 ? \*/ /\* one byte \*/
                  nPart,
    );
  }
  return sView;
}

function strToUTF8Arr(sDOMStr) {
  let aBytes;
  let nChr;
  const nStrLen = sDOMStr.length;
  let nArrLen = 0;

  /\* mapping… \*/
  for (let nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) {
    nChr = sDOMStr.codePointAt(nMapIdx);

    if (nChr > 65536) {
      nMapIdx++;
    }

    nArrLen +=
      nChr < 0x80
        ? 1
        : nChr < 0x800
          ? 2
          : nChr < 0x10000
            ? 3
            : nChr < 0x200000
              ? 4
              : nChr < 0x4000000
                ? 5
                : 6;
  }

  aBytes = new Uint8Array(nArrLen);

  /\* transcription… \*/
  let nIdx = 0;
  let nChrIdx = 0;
  while (nIdx < nArrLen) {
    nChr = sDOMStr.codePointAt(nChrIdx);
    if (nChr < 128) {
      /\* one byte \*/
      aBytes[nIdx++] = nChr;
    } else if (nChr < 0x800) {
      /\* two bytes \*/
      aBytes[nIdx++] = 192 + (nChr >>> 6);
      aBytes[nIdx++] = 128 + (nChr & 63);
    } else if (nChr < 0x10000) {
      /\* three bytes \*/
      aBytes[nIdx++] = 224 + (nChr >>> 12);
      aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63);
      aBytes[nIdx++] = 128 + (nChr & 63);
    } else if (nChr < 0x200000) {
      /\* four bytes \*/
      aBytes[nIdx++] = 240 + (nChr >>> 18);
      aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63);
      aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63);
      aBytes[nIdx++] = 128 + (nChr & 63);
      nChrIdx++;
    } else if (nChr < 0x4000000) {
      /\* five bytes \*/
      aBytes[nIdx++] = 248 + (nChr >>> 24);
      aBytes[nIdx++] = 128 + ((nChr >>> 18) & 63);
      aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63);
      aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63);
      aBytes[nIdx++] = 128 + (nChr & 63);
      nChrIdx++;
    } /\* if (nChr <= 0x7fffffff) \*/ else {
      /\* six bytes \*/
      aBytes[nIdx++] = 252 + (nChr >>> 30);
      aBytes[nIdx++] = 128 + ((nChr >>> 24) & 63);
      aBytes[nIdx++] = 128 + ((nChr >>> 18) & 63);
      aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63);
      aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63);
      aBytes[nIdx++] = 128 + (nChr & 63);
      nChrIdx++;
    }
    nChrIdx++;
  }

  return aBytes;
}
```

### Testes

```js
/\* Tests \*/

const sMyInput = "Base 64 \u2014 Mozilla Developer Network";

const aMyUTF8Input = strToUTF8Arr(sMyInput);

const sMyBase64 = base64EncArr(aMyUTF8Input);

alert(sMyBase64);

const aMyUTF8Output = base64DecToArr(sMyBase64);

const sMyOutput = UTF8ArrToStr(aMyUTF8Output);

alert(sMyOutput);
```

### Appendix: Decodifique uma string Base64 para Uint8Array ou ArrayBuffer

Essas funções nos permitem criar também uint8Arrays (en-US) ou arrayBuffers a partir de strings codificadas em Base64:

```js
// "Base 64 \u2014 Mozilla Developer Network"
const myArray = base64DecToArr(
  "QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==",
);

// "Base 64 \u2014 Mozilla Developer Network"
const myBuffer = base64DecToArr(
  "QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==",
).buffer;

alert(myBuffer.byteLength);
```

>
>
> **Note:** A função `base64DecToArr(sBase64[, nBlocksSize])` retorna
>  um uint8Array (en-US) de bytes.
>  Se o seu objetivo é construir um buffer de dados brutos de 16 bits / 32 bits / 64 bits,
>  use o argumento `nBlocksSize`,
>  que é o número de bytes dos quais a propriedade `uint8Array.buffer.bytesLength` deve resultar em múltiplos
>  (`1` ou omitido para ASCII, strings binárias
>  (ou seja, uma string na qual cada caractere na string é tratado como um byte de dados binários)
>  ou strings codificadas em UTF-8, `2` para strings UTF-16, `4` para strings UTF-32).
>
>
>
>


Adobe Flash - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Adobe Flash
===========

Flash é uma tecnologia obsolescente desenvolvida pela Adobe que possibilita aplicativos Web, gráficos de vetor e multimídia. Você precisa instalar o plugin certo para usar o Flash dentro de um navegador web.

Saiba mais
----------

### Conhecimento geral

* Official web site
* Shumway, a free implementation by Mozilla
* Gnash, a free implementation by GNU


PHP - Glossário do MDN Web Docs: Definições de termos relacionados à Web

PHP
===

PHP (um inicialismo recursivo para PHP: Hypertext Preprocessor) é uma linguagem de script do lado do servidor de código aberto que pode ser utilizada junto com HTML para construir aplicações web e sites dinâmicos.

HTML pode ser usando dentro do PHP, mas não vice versa.
```

 // Sintaxe básica do PHP
<? php
 // Imprime dados na tela
 echo "Olá mundo!";

 // ou
 print "Olá mundo!";
?>
```

A melhor coisa em usar o PHP é que ele é extremamente simples para um iniciante, mas oferece muitos recursos avançados para um programador profissional. Não tenha medo de ler a longa lista de recursos do PHP. Pode entrar com tudo, o mais rápido que puder, e começar a escrever scripts simples em poucas horas.

### Variáveis em PHP
```

<?php
 // Variáveis
 $nome='Jorge';
 $sobrenome='Clésio';
 $pais='Brasil';
 $email='jorgeclesio@mozilla.org';

 // Imprimir variáveis
 echo $nome;
 echo $sobrenome;
 echo $pais;
 echo $email;
?>
```

Conheça mais sobre variáveis em PHP

### Tratando Formulários com PHP

Confira aqui.

Saber mais
----------

* Website oficial
* PHP na Wikipedia
* PHP no Wikilivros
* Introdução ao PHP W3Schools


DOM - Glossário do MDN Web Docs: Definições de termos relacionados à Web

DOM
===

O Modelo de Objeto de Documentos (do inglês **Document Object Model, DOM**) é uma API definida pelo W3C para representar e interagir com qualquer documento HTML ou XML.

O *DOM* é um modelo de documento carregado pelo navegador. Este documento é representado através de uma árvore de nós, onde cada um destes nós representa uma parte do documento (por ex. um elemento, texto ou comentário).

 O *DOM* é uma das APIs mais usadas na Web (en-US) porque ele permite que cada código rodando no navegador acesse e interaja com cada nó do documento.
 Os nós podem ser criados, movidos ou modificados. *Listeners* de evento podem também ser adicionados aos nós para serem disparados quando um dado evento ocorrer.

 O *DOM* não foi originalmente especificado. Ele apareceu quando os navegadores começaram a implementar o JavaScript. Este legado é às vezes chamado de *DOM 0*.
 Hoje o W3C conduz a especificação do *DOM*; e o DOM Working Group está atualmente preparando a versão 4.

Saiba mais
----------

### Conhecimentos Gerais

* DOM
### Referência Técnica

* A Documentação DOM no MDN (en-US)
* As várias especificações do DOM no W3C


WebP - Glossário do MDN Web Docs: Definições de termos relacionados à Web

WebP
====

**WebP** é um formato de compressão de imagem lossless e lossy desenvolvido pelo Google.

Saiba mais
----------

### Conhecimentos gerais

* WebP na Wikipedia


Nome de domínio - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Nome de domínio
===============

Um nome de domínio é um endereço de uma página na Internet. Nomes de domínios são usados em URLs para identificar a qual servidor uma página específica pertence. O domínio consiste de uma sequência hierárquica de nomes (rótulo) separados por períodos (pontos) e terminando com uma extensão (en-US).

Saiba mais
----------

### Conhecimento geral

* Domínio na Wikipedia
* Understanding domain names


UX - Glossário do MDN Web Docs: Definições de termos relacionados à Web

UX
==

**UX** é um acrônimo que significa experiência do usuário (User eXperience). É o estudo da interação entre usuários e um sistema. Seu objetivo é tornar um sistema fácil de interagir do ponto de vista do usuário.

O sistema pode ser qualquer produto ou aplicativo com o qual um usuário final deve interagir. Os estudos de UX realizados em uma página da web podem demostrar, por exemplo, se é fácil para os usuários entenderem a página, navegarem para diferentes áreas e concluírem tarefas comuns, e onde tais processos poderiam ter menos fricção.

Saber mais
----------

### Conhecimento geral

* Experiência do Usuário na Wikipédia


Tag - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Tag
===

Em HTML a tag é usada para criar um elemento. O **nome** de um elemento HTML é o nome usado entre colchetes angulares como "<p>" para criar parágrafos. Note que ao fechar uma tag ela tem uma barra antes de seu nome, "</p>" , e que em elementos vazios a tag final não é requirida e nem permitida. Se os atributos não forem mencionados, os valores padrões serão usados em cada caso.

Aprenda mais
------------

### Conhecimentos gerais

* HTML element no Wikipedia (em inglês)
* Tags de HTML no W3 (em inglês)
### Referência técnica

* Introdução ao HTML (em inglês)


Global object - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Global object
=============

Um objeto global é um objeto que sempre está definido no escopo global.

Em JavaScript, um objeto global é sempre definido. No browser, quando scripts criam variáveis globais, elas são criadas como membros desse objeto global (Em Node.js isso não se aplica). A interface do objeto global depende do contexto de execução no qual o script está sendo executado. Por exemplo:

* Num navegador, qualquer código que o script não inicie especificamente como uma tarefa em background, tem um `Window` como seu objeto global. Isto se aplica para a vasta maioria dos códigos JavaScript na Web.
* Códigos rodando num `Worker` tem um objeto `WorkerGlobalScope` (en-US) como seu objeto global.
* Scripts que executam no Node.js tem um objeto `global` como seu objeto global.


Truthy - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Truthy
======

Em JavaScript, um valor **truthy** é um valor que se traduz em verdadeiro quando avaliado em um contexto Booleano. Todos os valores são **truthy** a menos que eles sejam definidos como falsy (ou seja., exceto para `false`, `0`, `""`, `null`, `undefined`, e `NaN`).

O JavaScript usa coerção de tipo em contextos booleanos.

Exemplos de valores *truthy* em JavaScript (que se traduzirão em true, e então executar o bloco `if`):
```

if (true)
if ({})
if ([])
if (42)
if ("foo")
if (new Date())
if (-42)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)
```

Veja também
-----------

* Falsy
* Coercion
* Boolean


Advance measure - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Advance measure
===============

A **advance measure** é o espaço total que o glyph ocupa, horizontal ou verticalmente, dependendo da direção de escrita atual. É igual à distância percorrida pelo cursor, colocado diretamente na frente e depois deslocado para trás do caractere.

Este termo é usado na definição de um número de unidades CSS `<length>` (en-US). A *advanced measure* da unidade `ch` é a largura ou a altura do caractere "0" no tipo de letra fornecido, dependendo se o eixo horizontal ou vertical está sendo usado no momento. Uma *advanced measure* de unidade `ic` é a largura ou altura do caractere "水".

Veja também
-----------

* `<length>` (en-US)


Self-Executing Anonymous Function - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Self-Executing Anonymous Function
=================================

(Self-Executing Anonymous Function) é uma função JavaScript que é executada assim que definida. Ela também é conhecida como **IIFE** (Immediately Invoked Function Expression).

Veja a página IIFE para mais informações.


Declaração - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Declaração
==========

Em uma linguagem de programação, uma **declaração** é uma linha de código que dá comando para execução de uma tarefa. Cada programa é composto por uma sequência de declarações.

Aprenda mais
------------

### Conhecimento geral

* Declaração na Wikipedia
### Referencia técnica

* JavaScript declarações


BigInt - Glossário do MDN Web Docs: Definições de termos relacionados à Web

BigInt
======

No JavaScript, **BigInt** é um tipo de dado numérico que representa inteiros no formato de precisão arbritrária. Em outras linguagens de programação existem tipos numéricos diferentes, como por exemplo: Integers, Floats, Doubles ou Bignums.

Saiba mais
----------

### General knowledge

* Numeric types no Wikipedia
### Technical reference

* The JavaScript data structure: BigInt
* The JavaScript global object `BigInt`


Grade - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Grade
=====

Uma *grade no CSS* é definida usando o valor `grid` da propriedade `display`; você pode definir colunas e linhas na sua grade usando as propridades `grid-template-rows` e `grid-template-columns`.

A grade que você define usando essas propriedades é descrita como uma *grade explícita*.

Se você colocar o conteúdo fora dessa grade explícita ou se estiver utilizando o posicionamento automático e o algoritmo da grade precisar criar linhas ou colunas adicionais tracks (en-US) para manter grid items, então serão criadas faixas extras na grade implícita. A *grade implícita* é a grade criada automaticamente devido ao conteúdo adicionado fora das faixas definidas.

No exemplo abaixo, criamos uma *grade explícita* de três colunas e duas linhas. A terceira linha da grade é uma *faixa implícita de linha da grade*, formada por serem mais do que os seis os itens que preenchem as faixas explícitas.
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
```

```html
<div class="wrapper">
  <div>Um</div>
  <div>dois</div>
  <div>três</div>
  <div>quatro</div>
  <div>cinco</div>
  <div>seis</div>
  <div>sete</div>
  <div>oito</div>
</div>
```

1. CSS Grid Layout Guide:
 *Basic concepts of grid layout*
2. Property reference
    1. `grid-template-columns`
    2. `grid-template-rows`
    3. `grid`
    4. `grid-template` (en-US)


JavaScript - Glossário do MDN Web Docs: Definições de termos relacionados à Web

JavaScript
==========

Sumário
-------

JavaScript (ou "JS") é uma linguagem de programação utilizada principalmente para scripts dinâmicos do lado do cliente em páginas web, podendo também ser utilizada no lado do servidor, usando um interpretador (em inglês: *runtime*) como o Node.js.

O JavaScript **não deve** ser confundido com a linguagem de programação Java. Apesar de *"Java"* e *"JavaScript"* serem marcas comerciais (ou marcas registradas) da Oracle nos EUA e em outros países, essas duas linguagens de programação são significativamente diferentes em sintaxe, semântica e casos de uso.

O JavaScript é utilizado principalmente no navegador, permitindo que os desenvolvedores manipulem o conteúdo de uma página web por meio do DOM, manipulem dados com o AJAX e o IndexedDB, desenhem gráficos com o canvas (en-US), interajam com o dispositivo que está executando o navegador através de várias APIs e muito mais. JavaScript é uma das linguagens mais utilizadas no mundo, devido ao recente crescimento e melhoria de desempenho das APIs disponíveis nos navegadores.

Origem e História
-----------------

Concebido como uma linguagem do lado do servidor por Brendan Eich (então empregado pela Netscape Corporation), o JavaScript logo chegou ao Netscape Navigator 2.0 em setembro de 1995. O JavaScript obteve sucesso imediato e o Internet Explorer 3.0 (en-US) introduziu o suporte ao JavaScript sob o nome JScript em agosto de 1996.

 Em novembro de 1996, a Netscape começou a trabalhar com a ECMA International para tornar o JavaScript um padrão do setor. Desde então, o JavaScript padronizado é chamado de
 ECMAScript e especificado sob a ECMA-262, cuja última edição (décima primeira, ES2020) está disponível desde junho de 2020.

Recentemente, a popularidade do JavaScript se expandiu ainda mais através do bem-sucedido Node.js, o interpretador multiplataforma mais popular de ambiente de execução JavaScript fora do navegador. Node.js foi criado utilizando o V8 Javascript Engine permitindo que os desenvolvedores utilizem o JavaScript como linguagem de script para automatizar as coisas em um PC e criar servidores HTTP e WebSocket (en-US) totalmente funcionais.

Aprenda mais
------------

### Conhecimento geral

* JavaScript no Wikipédia
### Aprendendo JavaScript

* Guia JavaScript no MDN
* Workshop de JavaScript na NodeSchool
* Curso em vídeo de JavaScript para iniciantes
* Série "You Don't Know JS" - parcialmente traduzida para português
* Conceitos que todo desenvolvedor JavaScript deveria saber na Udemy - nível intermediário
* "Learn JavaScript" na codecademy.com
### Referência técnica

* Últimas padronizações do ECMAScript
* [Referência JavaScript](/pt-BR/docs/Web/JavaScript/reference) no MDN
* Eloquent JavaScript Segunda Edição


Pseudo-class - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Pseudo-class
============

No CSS, um seletor do tipo **pseudo-classe** referencia um elemento dependendo do seu estado e não de informações da arvore do documento. Por exemplo, o seletor a`:visited` aplica estilo somente aos links que o usuário já visitou

Saiba mais
----------

### Referencia técnica

* Documentação de pseudo-class


HTTPS - Glossário do MDN Web Docs: Definições de termos relacionados à Web

HTTPS
=====

**HTTPS** (*HTTP Secure*) é uma versão do protocolo HTTP criptografado. É normalmente usado SSL (en-US) ou TLS para criptografar toda a comunicação entre um cliente e um servidor. Essa conexão segura permite aos clientes trocar com segurança dados confidenciais com o servidor, por exemplo, para atividades bancárias ou compras online.

Saiba mais
----------

### Conhecimento geral

* HTTPS na Wikipedia


SEO - Otimização dos Mecanismos de Buscas - Glossário do MDN Web Docs: Definições de termos relacionados à Web

SEO - Otimização dos Mecanismos de Buscas
=========================================

**SEO** (Search Engine Optimization - Otimização dos Mecanismos de Pesquisa) é o processo de fazer com que um sítio fique mais visível nos resultados da procura, também denominado melhoramento na classificação da busca.

Os mecanismos de pesquisa crawl (en-US) vasculham a *web* seguindo vínculos de uma página para outra (*link*) e listando os resultados encontrados. Quando se faz uma busca, o mecanismo de pesquisa exibe o conteúdo classificado. Os rastreadores seguem regras. Se você seguir essas regras, metodicamente, ao fazer uma SEO para um sítio, existirão melhores chances de que o mesmo apareça entre os primeiros resultados, aumentando o tráfego e as possibilidades de rendimentos (pelo comércio eletrônico e publicidade).

Os motores de busca oferecem algumas diretrizes para SEO, mas os maiores deles mantém a classificação de resultados como um segredo comercial. A otimização - SEO - é uma combinação de orientações oficiais do mecanismo de pesquisa, conhecimento prático, entendimento de artigos científicos, ou patentes.

Os métodos SEO dividem-se em três grandes classes:

técnico

Rotular o conteúdo usando semântica HTML. Ao explorar os sítios da *web* os rastreadores devem encontrar, apenas, o conteúdo que você quer indexado.

autoria

Escrever conteúdos utilizando o vocabulário dos visitantes. Empregar texto e imagens de forma que os rastreadores possam entender do que se trata.

popularidade

Você consegue muito mais tráfego quando existem vínculos com outros sítios famosos.

Aprenda mais
------------

### Conhecimento Geral

* SEO na Wikipedia
### Aprenda SEO

* Central *Webmaster* Google


Propriedade (CSS) - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Propriedade (CSS)
=================

Uma **propriedade CSS** é uma característica (como a cor) cujo valor define o aspecto de como o navegador deve exibir o elemento.

Aqui está um exemplo de uma regra do CSS:

```css
/\* "div" é um seletor indicando que todos os elementos div \*/
/\* no documento serão estilizados por essa regra \*/
div {
  /\* A propriedade "color" (cor) com o valor "black" (preto) indica que \*/
  /\* todos os textos terão a cor preta \*/
  color: black;

  /\* A propredade "background-color" (cor de fundo) com o valor "white" \*/
  /\* (branco) indica que a cor de fundo dos elementos será branca \*/
  background-color: white;
}
```

Saiba Mais
----------

### Conhecimentos Gerais

* Aprenda CSS
### Referências Técnicas

* A referencia sobre CSS no MDN
* The CSS Working Group current work


Propriedade (JavaScript) - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Propriedade (JavaScript)
========================

Uma **propriedade Javascript** é uma característica de um objeto, frequentemente descrita como atributos associados à uma estrutura de dados.

Há dois tipos de propriedades:

* *Propriedades de instâncias* que contém informação específica para dada instância de objeto, e
* *Propriedades estáticas* que contém informação compartilhada com todas as instâncias de objetos.

Uma propriedade tem nome (uma string) e um valor (primitivo, método (en-US) ou uma referência a um objeto (en-US)). Perceba que quando dizemos que "uma propriedade contém um objeto", é apenas um atalho para "uma propriedade contém uma *referência* a um objeto". Essa distinção é importante porque o objeto referenciado original continua inalterado quando você altera o valor da propriedade.

Saiba mais
----------

### Conhecimento geral

* Property (programming) on Wikipedia
* Introdução a objetos em JavaScript


Bloco (CSS) - Glossário do MDN Web Docs: Definições de termos relacionados à Web

Bloco (CSS)
===========

Um **bloco** em uma página web é um elemento HTML que aparece em uma nova linha, Isto é, abaixo do elemento precedente em um modo de escrita horizontal e acima do elemento seguinte (comumente conhecido como um elemento de nível de bloco - *block-level element*). Por exemplo, `<p>` é por padrão um elemento em nível de bloco, enquanto `<a>` é um *elemento inline* — você pode colocar vários links próximos uns dos outros em seu HTML e eles ficarão na mesma linha como qualquer outro na saída renderizada.

Usando a propriedade `display` você pode alterar a forma como um elemento é exibido, como inline ou como bloco (entre muitas outras opções); **blocos** também estão sujeitos aos efeitos de esquemas de posicionamento e uso da propriedade `position`.

Saiba mais
----------

### Conhecimento geral

* Modelo de formatação visual (en-US)


Firefox - Mozilla

Firefox
=======

O Firefox é um popular navegador de internet da Mozilla, disponível para várias plataformas como Windows, Mac OS X e Linux no desktop, bem como Android e iOS nos dispositivos móveis. Sendo altamente compatível com as últimas tecnologias web e poderosas ferramentas de desenvolvimento, o Firefox é um excelente navegador tanto para usuários comuns quanto desenvolvedores web.

Firefox é um projeto de código aberto; muito do seu código vem de contribuições de uma gigantesca comunidade de voluntários. Aqui você irá aprender sobre como contribuir com o projeto Firefox, além de encontrar links para documentação sobre construção de add-ons do Firefox, uso de ferramentas do Firefox para desenvolvedores, entre outros.

Aprenda a criar complementos para Firefox, como desenvolver e compilar o Firefox, como funciona internamente o Firefox e subprojetos.

Notas de lançamento para o desenvolvedor

Notas de versão focada em desenvolvedores; aprenda quais são os novos recursos para ambos Web sites e add-on que chegam a cada versão do Firefox.

Documentação do projeto

Encontre informações detalhadas sobre o funcionamento do Firefox e o seu sistema de versões, assim você poderá encontrar o seu caminho no código.

Guia do desenvolvedor

Nosso guia para desenvolvedores provê tutoriais detalhados de como obter e compilar o código fonte do Firefox, como se encontrar, e como contribuir para o projeto.

Canais Firefox
--------------

O Firefox está disponível em cinco **canais**.

### Firefox Nightly

A cada noite nós geramos uma *build* do Firefox com o código mais recente no mozilla-central. Estas *builds* são destinadas aos desenvolvedores do Firefox ou aqueles que procuram testar as mais recentes funcionalidades que ainda estão com desenvolvimento ativo.

Baixar o Firefox Nightly

### Firefox Developer Edition

Esta é uma versão do Firefox feita para desenvolvedores. A cada seis semanas, nós pegamos as funcionalidades que estão no Firefox Nightly e são estáveis o suficiente e criamos uma nova versão do Firefox Developer Edition. Nós também adicionamos alguns recursos extras que estão disponíveis apenas neste canal.

Saiba mais sobre o Firefox Developer Edition.

Baixar o Firefox Developer Edition

### Firefox Beta

Depois de seis semanas no Firefox Developer Edition, nós pegamos as funcionalidades que estão estáveis o bastante, e criamos uma nova versão do Firefox Beta. As versões do Firefox Beta são para testadores entusiastas e está destinada a se tornar a proxima versão do Firefox.

Baixar o Firefox Beta

### Firefox

Após estabilizar por outras seis semanas no Beta, nós estamos prontos para entregar as novas funcionalidades para centenas de milhões de usuários em uma nova versão do Firefox.

Baixar o Firefox

### Firefox Extended Support Release (ESR)

Firefox ESR é uma edição de suporte de longo prazo do Firefox para desktop. Feito para ser usado em organizações como escolas, universidades, empresas e outras que necessitam de suporte extendido para distribuições em massa.

Saiba mais sobre o Firefox Extended Support Release.

Baixar o Firefox ESR

Perfis Firefox
--------------

Se você está usando múltiplos canais Firefox—ou apenas múltiplas configurações—em uma base regular, você deve ler sobre como usar múltiplos perfis Firefox com o Firefox Profile Manager e outras ferramentas para gerenciamento de perfis de sua preferência.


Complementos - Mozilla

Complementos
============

Modifique e amplie os aplicativos da Mozilla
**Complementos** acrescentam novas funcionalidades para os aplicativos baseados no Gecko tais como Firefox, SeaMonkey e Thunderbird. Há dois tipos de complementos principais Extensões adicionam novas características para o aplicativo, enquanto Temas modificam a interface do aplicativo do usuário.

Para ambos, extensões e temas, a Mozilla opera o repositório em addons.mozilla.org, também conhecido como AMO. Quando você Envia complementos para o AMO eles são revisados e depois de passados na revisão, são disponibilizados aos usuários. Você não tem que enviar complementos para AMO, mas se enviar, os usuários terão mais confiança no fato de que eles foram revisados, e você pode se beneficiar da visibilidade AMO como uma fonte confiável para complementos úteis.

O termo "complemento"(Add-ons) inclui plugins, extensões, temas, e plug-ins de mecanismos de busca (tal como google, bing, etc.).

O Gerenciador de complementos pode afetar o comportamento do aplicativo que o hospeda. Nós desenvolvemos orientações de complementos para ajudar a garantir que eles proveriam uma boa experiência para os usuários. Estas orientações se aplicam em todos tipos de complementos, mesmo se eles são hospedados em addons.mozilla.org ou não.

O Gerenciador de complementos dá acesso aos complementos a fim de determinar o que está disponível, instalar, remover, desativar e atualizar.

Extensões
---------

Extensões adicionam novas funcionalidades para aplicativos da Mozilla como Firefox e Thunderbird. Eles podem adicionar novos recursos ao navegador, como um jeito diferente de gerenciar as abas, e eles podem modificar o conteúdo da web para aperfeiçoar a usabilidade ou segurança sites específicos.

Há três tipos de técnicas diferentes que você pode utilizar para construir uma extensão: Add-on baseado em extensões SDK, extensões *restartless* inicializadas manualmente e extensões overlay.

* Desenvolva extensões que não requer a reinicialização do navegador utilizando um conjunto JavaScript APIs de alto nível.
* Extensões *Restartless*
 Desenvolva extensões que não requer a reinicialização do navegador.
* Extensões Overlay
 Extensões que requerem a reinicialização do navegador para instalar, geralmente usando overlays XUL.

Se você puder, é aconselhável utilizar o Add-on SDK, que usa o mecanismo de extensão restartless mas simplifica determinadas tarefas e limpa depois de si mesmo. Se o Add-on SDK não é suficiente para as suas necessidades, implemente uma extensão restartless manual no lugar.

Para obter mais informações sobre como escolher qual a técnica de usar, leia esta comparação.

### Práticas Recomendadas

Não importa como você desenvolve uma extensão, existem algumas orientações que você pode seguir para ajudar a garantir que sua extensão fornece uma experiência tão boa para o usuário o quão possível.

Desempenho

Assegurando que sua extensão é rápida, responsiva e eficiente para a memória.

Segurança

Assegurando que sua extensão não exponha o usuário para websites maliciosos.

Etiqueta

Assegurando que sua extensão funcione bem com outras extensões.

### Aplicativo específico

A maioria das documentações assume que você está desenvolvendo para o Firefox Desktop. Se você está desenvolvendo para algum outro aplicativo baseado no Gecko, há diferenças importantes que você precisa saber sobre.

Thunderbird

Desenvolvendo extensões para o Thunderbird mail client.

Firefox para Android

Desenvolvendo extensões para Firefox para Android.

SeaMonkey

Desenvolvendo extensões para SeaMonkey suíte de software.

Temas
-----

Os temas são add-ons que personalizam a IU do aplicativo. Existem dois tipos de temas: temas leves e temas completos.

Temas Leves são muito mais simples de implementar do que temas completos, mas fornece a personalização muito limitada.

Com Temas Completos você pode fazer modificações mais profundas na IU. A documentação para temas completos é fora da data, mas está ligada a aqui como uma possível base para a documentação atualizada.

Outros tipos de complementos
----------------------------

Plugins de Search Engine são um tipo simples e muito específico de add-on: eles adicionam novos mecanismos de busca para barra de pesquisa do navegador.

Plugins (en-US) ajuda a aplicação a entender o conteúdo web que não é suportado nativamente. Plugins NPAPI são uma tecnologia antiga e os novos sites não devem usá-las. Em geral, os plugins não estão disponíveis na maioria dos sistemas móveis modernos, e os sites devem evitar usar plugins.


Extensões do navegador - Mozilla

Extensões do navegador
======================

Extensões são capazes de extender e modificar a capacidade de um navegador. As extensões para Firefox são criadas usando a API WebExtensions, um sistema comum a vários navegadores para desenvolvimento de extensões. Em grande parte, o sistema é compatível com a API de extensões suportada pelo Google Chrome, Opera e W3C Draft Community Group.

Extensões escritas para esses navegadores na maioria dos casos vão funcionar no Firefox ou Microsoft Edge com apenas algumas alterações. A API é também totalmente compatível com o multiprocessamento do Firefox.

Se você tem dúvidas ou sugestões, ou precisa de ajuda para migrar um complemento legado para usar APIs WebExtensions, pode entrar em contato conosco pela newsletter de desenvolvimento de complementos ou #webextensions no IRC.

### Começando

* O que é uma extensão
* Sua primeira extensão
* Sua segunda extensão
* Anatomia de uma extensão
* Extensões de exemplo
* E depois?
### Conceitos

* Visão geral da API JavaScript
* Scripts de conteúdo
* Padrões de correspondência
* Trabalhando com arquivos
* Internacionalização
* Melhores práticas de segurança
* Política de segurança de conteúdo
* Troca de mensagens nativa
* Usando as APIs devtools
* Melhores práticas de experiência do usuário
* Manifestos nativos
### Interface do usuário

* Introdução
* Botão na barra de ferramenta
* Botão na barra de ferramenta com um popup
* Botão na barra de endereços
* Botão na barra de endereços com um popup
* Itens de menu de contexto
* Painéis laterais
* Página de opções
* Páginas da extensão
* Notificação
* Sugestões na barra de endereços
* Painéis na ferramenta do desenvolvedor
### Como

* Interceptar solicitações HTTP
* Modificar uma página da web
* Adicionar um botão na barra de ferramenta
* Implementar uma página de configurações
* Interagir com a área de transferência
* Trabalhar com a API de abas
* Trabalhar com a API de favoritos
* Trabalhar com a API de cookies
* Trabalhar com identidades contextuais
* Inserir conteúdo externo
### Portabilidade

* Portando uma extensão do Google Chrome
* Portando uma extensão legada do Firefox
* Desenvolvendo para o Firefox para Android
* WebExtensions incorporadas
* Comparação com Add-on SDK
* Comparação com extensões XUL/XPCOM
* Incompatibilidades com Chrome
* Diferenças entre desktop e Android
### Fluxo de trabalho do Firefox

* Experiência do usuário
* Instalando
* Depurando
* Testando funcionalidades de persistência e reinicialização
* Começando com web-ext
* Referência de comandos web-ext
* Extensões e ID de complementos
* Opções de distribuição alternativas
* Solicitando as permissões corretas
* Compartilhando objetos com scripts de páginas
* Publicando sua extensão
* Descontinuando sua extensão
* Dicas e truques
### Referências

#### APIs JavaScript

* Visão geral da API JavaScript
* Tabelas de compatibilidade de navegadores com APIs JavaScript

#### Chaves do Manifest

* Visão geral do manifest.json
* Compatibilidade de navegadores com manifest.json
* action
* author
* background
* browser\_action
* browser\_specific\_settings
* chrome\_settings\_overrides
* chrome\_url\_overrides
* commands
* content\_scripts
* content\_security\_policy
* declarative\_net\_request
* default\_locale
* description
* developer
* devtools\_page
* dictionaries
* externally\_connectable
* homepage\_url
* host\_permissions
* icons
* incognito
* manifest\_version
* name
* offline\_enabled
* omnibox
* optional\_permissions
* options\_page
* options\_ui
* page\_action
* permissions
* protocol\_handlers
* short\_name
* sidebar\_action
* storage
* theme
* theme\_experiment
* user\_scripts
* version
* version\_name
* web\_accessible\_resources


Interceptando requisições HTTP - Mozilla

Interceptando requisições HTTP
==============================

Para interceptar uma requisição HTTP, utilize a API `webRequest` (en-US). Esta API permite adicionar listeners para vários estágios de uma requisição HTTP. Nos listeners, você pode:

* ter acesso ao cabeçalho e o corpo da requisição e, o cabeçalho da resposta
* cancelar e redirecionar requisições
* modificar requisições e o cabeçalho da resposta

Neste artigo você verá três diferentes usos para o módulo `webRequest`:

* Logando como as URLs da requisição são feitas.
* Redirecionando requisições.
* Modificando os cabeçalhos da requisição.
Logando URLs de requisição
--------------------------

Crie um novo diretório chamado "requests". Neste diretório, crie um arquivo chamado "manifest.json" com seguinte conteúdo:

```json
{
  "description": "Demonstrating webRequests",
  "manifest\_version": 2,
  "name": "webRequest-demo",
  "version": "1.0",

  "permissions": ["webRequest", "<all\_urls>"],

  "background": {
    "scripts": ["background.js"]
  }
}
```

A seguir, crie um arquivo chamado"background.js" com o seguinte conteúdo:

```js
function logURL(requestDetails) {
  console.log("Loading: " + requestDetails.url);
}

browser.webRequest.onBeforeRequest.addListener(logURL, {
  urls: ["<all\_urls>"],
});
```

Aqui vamos usar `onBeforeRequest` (en-US) para chamar a função `logURL()` antes do inicio da requisição. A função `logURL()` guarda a URL da requisição para o objeto event e efetua log no console do navegador. O padrão `{urls: ["<all_urls>"]}` significa que iremos interceptar as requisições HTTP para todas URLs.

Para testá-lo, instale a extensão, abra o console do navegador, e abra alguma página da internet. No console do navegador você pode ver as URLs para alguns recursos que o navegador requisita:

Redirecionando requisições
--------------------------

Agora vamos usar o `webRequest` para redirecionar requisições HTTP. Primeiro, substitua o manifest.json com o seguinte conteúdo:

```json
{
  "description": "Demonstrating webRequests",
  "manifest\_version": 2,
  "name": "webRequest-demo",
  "version": "1.0",

  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "https://developer.mozilla.org/",
    "https://mdn.mozillademos.org/"
  ],

  "background": {
    "scripts": ["background.js"]
  }
}
```

A única alteração aqui é a adição da permissão `"webRequestBlocking"`. Precisamos invocar esta permissão extra toda vez que estamos ativamente modificando a requisição.

A seguir, substitua o "background.js" com o seguinte conteúdo:

```js
var pattern = "https://mdn.mozillademos.org/\*";

function redirect(requestDetails) {
  console.log("Redirecting: " + requestDetails.url);
  return {
    redirectUrl:
      "https://38.media.tumblr.com/tumblr\_ldbj01lZiP1qe0eclo1\_500.gif",
  };
}

browser.webRequest.onBeforeRequest.addListener(
  redirect,
  { urls: [pattern], types: ["image"] },
  ["blocking"],
);
```

Novamente vamos usar event listener `onBeforeRequest` (en-US) apenas para executar a função antes que cada requisição seja feita. Está função irá substituir a URL desejada com o `redirectUrl` especificado na função.

Desta vez não estamos interceptando cada requisição: a opção `{urls:[pattern], types:["image"]}` especifica apenas o que deveria interceptar requisições(1) para URLs residindo sob o "https://mdn.mozillademos.org/" (2) para o recurso de imagens. Veja mais em `webRequest.RequestFilter` (en-US).

Observe também que estamos passando uma opção chamada `"blocking"`: precisamos informá-la toda vez que desejamos modificar a requisição. Isto faz com que a função bloqueie a requisição de rede, então o navegador espera pelo event listener retornar antes de continuar. Veja a documentação `webRequest.onBeforeRequest` (en-US) para mais no `"blocking"`.

Teste abrindo uma página no MDN que possua muitas imagens (por exemplo https://developer.mozilla.org/pt-BR/docs/Tools/Network\_Monitor), recarregue a extensão e então recarregue a página:

Modificando os cabeçalhos da requisição
---------------------------------------

Finalmente iremos utilizar `webRequest` para modificar os cabeçalhos da requisição. Neste example iremos modificar o cabeçalho "User-Agent" que identifica o navegador como Opera 12.16, mas apenas quando visitamos páginas sob "http://useragentstring.com/".

O "manifest.json" pode permanecer do mesmo jeito.

Modifique o "background.js" com este código:

```js
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) {
  e.requestHeaders.forEach(function (header) {
    if (header.name.toLowerCase() == "user-agent") {
      header.value = ua;
    }
  });
  return { requestHeaders: e.requestHeaders };
}

browser.webRequest.onBeforeSendHeaders.addListener(
  rewriteUserAgentHeader,
  { urls: [targetPage] },
  ["blocking", "requestHeaders"],
);
```

Aqui vamos usar event listener `onBeforeSendHeaders` (en-US) para executar a função somente quando os cabeçalhos forem enviados.

O event listener será chamada somente para requisitar as URLs que batem com o padrão. Observe também que passamos novamente `"blocking"` como uma opção. Passamos também `"requestHeaders"`, que significa que o listener será passado como um array contendo os cabeçalhos da requisição que desejamos enviar. Veja `webRequest.onBeforeSendHeaders` (en-US) para mais informações dessas opções.

A função listener procura pelo cabeçalho "User-Agent" no array de cabeçalhos da requisição, substitui seu valor com o valor `ua` da variável, e retorna o array modificado. Este array modificado será agora enviado para o servidor.

Teste abrindo useragentstring.com e veja como ele identifica o navegador como sendo o Firefox. Então, recarregue a extensão, recarregue também o useragentstring.com e veja que agora o Firefox é identificado como Opera:

Aprenda mais
------------

Para aprender sobre todas as coisas que você pode fazer com a API `webRequest`, veja sua documentação de referência.


Sua primeira extensão - Mozilla

Sua primeira extensão
=====================

Neste artigo vamos percorrer, do início ao fim, os passos necessários para a criação de uma extensão para o Firefox. A extensão apenas adicionará uma borda vermelha em todas as páginas carregadas em "mozilla.org" ou qualquer um de seus subdomínios.

O código fonte para este exemplo está no GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

Para começar, você precisará do Firefox versão 45 ou posterior.

Construindo a Extensão
----------------------

Crie uma nova pasta dando o nome de "borderify" e navegue para dentro dela.

```bash
mkdir borderify
cd borderify
```

### manifest.json

Dentro dessa pasta crie um novo arquivo chamado "manifest.json" e coloque o seguinte conteúdo no arquivo:

```json
{
  "manifest\_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "Adiciona uma borda vermelha a todas as páginas da Web correspondentes a mozilla.org.",

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

  "content\_scripts": [
    {
      "matches": ["\*://\*.mozilla.org/\*"],
      "js": ["borderify.js"]
    }
  ]
}
```

* As primeiras tres chaves: `manifest_version`, `name`, e `version`, são obrigatórias e contém os metadados básicos sobre a extensão.
* `description` é opcional contudo é recomendada pois aparece no gerenciador de complementos.
* `icons` é opcional porém recomendada pois define os ícones que aparecem no gerenciador de complementos.

A chave mais interessante aqui é `content_scripts`, que diz ao Firefox para carregar um script em páginas da Web cujo URL corresponde a um padrão específico. Nesse caso, pedimos ao Firefox para carregar um script chamado "borderify.js" em todas as páginas HTTP ou HTTPS oriundas de "mozilla.org" ou em qualquer um de seus subdomínios.

* Saiba mais sobre scripts de conteúdo.
* Saiba mais sobre padrões de correspondência.

**Aviso:** Em algumas situações, você precisa especificar uma ID para sua extensão. Se você precisar especificar um ID de extensão, inclua a chave `applications` no `manifest.json` e configure sua propriedade `id`:

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

### icons/border-48.png

A extensão deve ter um ícone. Ele será mostrado ao lado da listagem de extensões no Gerenciador de Extensões. Nosso manifest.json indica que teríamos um ícone localizado na pasta "icons/border-48.png".

Crie o diretório "icons" diretamente sob o diretório "borderify". Salve um ícone chamado "border-48.png". Você pode usar o icone do nosso exemplo, que foi retirado a coleção de ícone do Google Material Design, e é utilizado sob os termos da licença Creative Commons Attribution-ShareAlike.

Se você escolher criar seu próprio ícone, deve ser 48x48 pixels formato .PNG e também deve criar um ícone de 96x96 pixels também .PNG, para telas de alta resolução, e se você fizer isso será especificado como a propriedade 96 do objeto icons em manifest.json:

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

Como alternativa, você pode criar um ícone em formato SVG e ele será dimensionado corretamente.

* Saiba mais sobre como especificar ícones.
### borderify.js

Finalmente, crie um arquivo chamado "borderify.js" diretamente dentro do diretório "borderify" com o seguinte conteúdo:

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

Este script será carregado nas páginas que correspondem ao padrão especificado na chave `content_scripts` do manifest.json. O script tem acesso direto ao documento, igual aos scripts carregados pela própria página.

* Saiba mais sobre scripts de conteúdo.
Testando
--------

Primeiro, verifique se você está com os arquivos corretos nos lugares certos:
```

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

### Instalando

Acesse a área de Debugging do Firefox digitando diretamente na barra de endereço: "about:debugging", clique na opção "Este Firefox", em seguida clique em "Carregar extensão temporária", então selecione qualquer arquivo da sua pasta de extensões.

A Extensão agora será instalada e ficará assim até que você reinicie o Firefox.

Como alternativa, você pode executar a extensão a partir da linha de comando usando a ferramenta web-ext.

### Testando

Agora visite uma página em "mozilla.org" e você deve ver uma borda vermelha em volta da página:

![Border displayed on mozilla.org](/pt-BR/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension/border_on_mozilla_org.png)

**Nota:** Não tente acessar addons.mozilla.org! Os scripts de conteúdo são bloqueados nesse domínio.

Experimente um pouco. Edite o script de conteúdo para alterar a cor da borda ou faça outra coisa com o conteúdo da página. Salve o script de conteúdo e, em seguida, recarregue os arquivos da extensão clicando no botão "Reload" em about:debugging. Você poderá ver as mudanças imediatamente:

* Saiba mais sobre o carregamento de extensões
Empacotando e publicando
------------------------

Para que outras pessoas usem seu complemento, você precisa compactá-lo e enviá-lo para a Mozilla para assinatura. Para saber mais sobre isso, consulte "Publicando sua Extensão" (en-US).

Próximos passos
---------------

Agora você tem uma idéia do processo de desenvolvimento de um WebExtension para o Firefox, que tal:

* Anatomia de uma Extensão
* Criar uma Extensão mais complexa
* Saber mais sobre JavaScript APIs disponíveis para Extensões.


O que são extensões? - Mozilla

O que são extensões?
====================

Extensões são bits de código que modificam a funcionalidade do navegador. Eles são escritos usando as tecnologias padrões da Web - JavaScript, HTML e CSS - além de APIs JavaScript dedicadas. Entre outras coisas, extensões podem adicionar novas funcionalidades para o navegador, ou mudar sua aparência, ou o conteúdo de páginas particulares.

Extensões para Firefox são construídas usando *WebExtensions APIs*, um sistema multi-navegador (*cross-browser*) para o desenvolvimento de extensões. Para uma maior portabilidade, a API é compatível com a *extension API*, suportada pelo Google Chrome e pelo Opera. Extensões escritas para esses navegadores, na maioria dos casos, vão rodar no Firefox ou Microsoft Edge com poucas mudanças. A API é também totalmente compatível com o *multiprocess Firefox*.

No passado, você poderia desenvolver extensões para Firefox usando um dos três métodos diferentes: *XUL/XPCOM overlays, bootstrapped extensions* ou o *Add-on SDK*. A partir do fim de Novembro de 2017, *WebExtensions APIs* será o único meio de desenvolver extensões para Firefox, e os outros métodos serão descontinuados.

Se você tem dúvidas ou sugestões, ou precisa de ajuda para migrar um *add-on* antigo para o *WebExtensions APIs*, você pode entrar em contato conosco pela *dev-addon mailing list* ou pelo canal *#extdev* no IRC.

Próximos passos
---------------

* Para experimentar alguns exemplos de extensões, veja Exemplos de extensões
* Para aprender sobre a estrutura de uma extensão, acesse Anatomia de uma Extensão.
* Para acompanhar do início ao fim o desenvolvimento de uma simples extensão, veja Sua primeira Extensão.


O que vem a seguir ? - Mozilla

O que vem a seguir ?
====================

Você está pronto para começar a tornar a tua ideia de extensão de navegador uma realidade. Antes de iniciar essa jornada, vale a pena estar ciente de algumas coisas que te ajudarão a torná-la tranquila.

Teu ambiente de desenvolvimento
-------------------------------

Você não precisa de ferramentas de desenvolvimento especiais para criar extensões de navegador: é inteiramente possível criar ótimas extensões de navegador sem mais que um editor de textos. Porém, talvez você tenha desenvolvido para a web e tenha um conjunto de ferramentas e um ambiente que quer usar. Se for assim, você precisa estar ciente de algumas coisas.

Se você usa ferramentas de minificação ou obfuscação para entregar seu código final, você precisará entregar seu código fonte para o processo de revisão AMO. Além disso, as ferramentas que você utiliza, — para minificação, obfuscação e contrução — devem ser open source ( ou oferecer uso gratuito sem limites ) e disponíveis para execução no computador do revisor (Windows, Mac ou Linux). Infelizmente, nossos revisores não podem trabalhar com ferramentas comerciais ou baseadas em web.

Aprenda mais acerca de ferramentas de construção

Third-party libraries
---------------------

Third-party libraries are a great way to add complex features or functionality to your browser extensions quickly. When you submit an extension to the AMO review process, the process will also consider any third-party libraries used. To streamline the review, make sure you always download third-party libraries from their official website or repository, and if the library is minified provide a link to the source code. Please note that third-party libraries cannot be modified in any way.

Learn more about submitting source code

The Firefox Add-on Distribution Agreement
-----------------------------------------

Browser extensions need to be signed to install into the release or beta versions of Firefox. Signing takes place in addons.mozilla.org (AMO) and is subject to the terms and conditions of the Firefox Add-on Distribution Agreement. The goal of the agreement is to ensure Firefox users get access to well supported, quality add-ons that enhance the Firefox experience.

Read the agreement

Learn more about signing

The review process
------------------

When a browser extension is submitted for signing, it's subject to automated review. It may also be subject to a manual review, when the automated review determines that a manual review is needed. Your browser extension won't be signed until it's passed the automated review and may have its signing revoked if it fails to pass the manual review. The review process follows a strict set of guidelines, so it's easy to check and avoid any likely review problems.

Check out the review policy and guidelines

AMO featured browser extensions
-------------------------------

If you choose to list your browser extension on AMO, your extension could be featured on the AMO website, in the Firefox browser's add-on manager, or elsewhere on a Mozilla website. We've compiled a list of guidelines about how extensions are selected for featuring, by following these guidelines you give your extension the best chance of being featured.

Learn more about getting your add-ons featured

Continue your learning experience
---------------------------------

Now you know what lies ahead, it's time to dive into more details about browser extension development. In the sections that follow, you'll discover:

* More about the fundamental concepts behind browser extensions, starting with details on how to use the JavaScript APIs (en-US).
* A guide to the user interface components (en-US) available to your browser extensions.
* A collection of how-to guides on achieving key tasks in your extensions or making use of the JavaScript APIs.
* Information on how to port other browser extensions to Firefox.
* Details about the Firefox specific workflows you can use to develop browser extensions.
* A full reference guide to the JavaScript APIs.
* A full reference guide to the Manifest keys.


Exemplos de Extensões - Mozilla

Exemplos de Extensões
=====================

Para ajudar a ilustrar como desenvolver extensões, nós mantemos um repositório com simples exemplos de extensões em https://github.com/mdn/webextensions-examples. Este artigo descreve a WebExtension APIs utilizadas neste respositório.Estes exemplos funcionam no Firefox Nightly: A maioria funciona em versões anteriores do Firefox, porém verifique a chave strict\_min\_version no manifest.json da extensão por certificação.Se você quiser experimentar estes exemplos, você tem três opções principais:
1. Clonar o repositório, então carregue a extensão diretamente de seu diretório de origem, usando o recurso "Load Temporary Add-on". A extensão permanecerá carregada até você reiniciar o Firefox.
2. Clonar o repositório, então use a ferramenta linha de comando web-ext para executar o Firefox com a extensão instalada.
3. Clonar o repositório, então vá até o diretório de build (construção). Isto contém as versões construídas e assinadas de todos os exemplos, então você pode simplesmente abrir eles no Firefox (usando Arquivo/Abrir arquivo) e instalar eles permanentemente, como uma extensão que você pode instalar de addons.mozilla.org.

Se você quer contribuir com o respositório, nos envie um pull request.

| Name | Description | JavaScript APIs |
| --- | --- | --- |
| annotate-page | Displays a sidebar that lets you take notes on web pages. | `storage.local``tabs.onActivated``tabs.onUpdated``tabs.query``tabs.Tab``windows.getCurrent``windows.Window` |
| apply-css | Adds a page action to the toolbar. Click the button to apply a red border using injected CSS. Click the button again to remove the CSS. | `pageAction.getTitle``pageAction.onClicked``pageAction.setIcon``pageAction.setTitle``pageAction.show``tabs.insertCSS``tabs.onUpdated``tabs.query``tabs.removeCSS``tabs.Tab` |
| beastify | Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. | `extension.getURL``runtime.onMessage``tabs.executeScript``tabs.insertCSS``tabs.query``tabs.removeCSS``tabs.sendMessage``tabs.Tab` |
| bookmark-it | Adds a bookmark button to the toolbar. Click the button to toggle a bookmark for the current page. | `bookmarks.create``bookmarks.onCreated``bookmarks.onRemoved``bookmarks.remove``bookmarks.search``browserAction.onClicked``browserAction.setIcon``browserAction.setTitle``tabs.onActivated``tabs.onUpdated``tabs.query``tabs.Tab``windows.onFocusChanged` |
| borderify | Adds a solid red border to all webpages matching mozilla.org. |  |
| chill-out | Show a page action after a period of inactivity. Show cat gifs when the page action is clicked. | `alarms.clearAll``alarms.create``alarms.onAlarm``pageAction.hide``pageAction.onClicked``pageAction.show``tabs.get``tabs.onActivated``tabs.onUpdated``tabs.query``tabs.update` |
| commands | Demonstrates using the commands API to set up a keyboard shortcut. The shortcut created is accessed using Ctrl+Shift+U (Command+Shift+U on a Mac). | `commands.getAll``commands.onCommand``commands.reset``commands.update``tabs.create` |
| content-script-register | Illustrates how an extension can register URL-matching content scripts at runtime. | `contentScripts.register``runtime.onMessage``runtime.sendMessage` |
| context-menu-copy-link-with-types | Add a context menu option to links to copy the link to the clipboard, as plain text and as a link in rich HTML. | `contextMenus.create``contextMenus.onClicked``tabs.executeScript` |
| contextual-identities | List, create, and remove contextual identities. | `contextualIdentities.query``tabs.create``tabs.query``tabs.remove` |
| cookie-bg-picker | Allows the user to customize the background color and tiled pattern on sites they visit, and also saves their preferences via a cookie, reapplying them whenever they revisit a site they previously customized. | `cookies.get``cookies.onChanged``cookies.remove``cookies.set``extension.getURL``runtime.onMessage``tabs.onActivated``tabs.onUpdated``tabs.query``tabs.Tab``tabs.sendMessage` |
| devtools-panels | Demonstrates some of the devtools APIs. | `devtools.inspectedWindow``devtools.panels``runtime.getURL``runtime.onMessage``runtime.sendMessage``tabs.executeScript` |
| discogs-search | Demonstrates adding a custom search engine with the chrome\_settings\_overrides key. |  |
| dnr-block-only | Demonstrates how to block network requests without host permissions using the declarativeNetRequest API with the `declarative\_net\_request` manifest key. | `declarativeNetRequest.Rule``declarativeNetRequest.RuleAction``declarativeNetRequest.RuleCondition` |
| dnr-dynamic-with-options | Demonstrates a generic way to request host permissions and register declarativeNetRequest rules to modify network requests, without any install-time permission warnings. The options\_ui page offers a way to request permissions and register DNR rules. | `declarativeNetRequest.Rule``declarativeNetRequest.getDynamicRules``declarativeNetRequest.getSessionRules``declarativeNetRequest.updateDynamicRules``declarativeNetRequest.updateSessionRules``permissions.getAll``permissions.remove``permissions.request` |
| dnr-redirect-url | Demonstrates multiple ways to redirect requests using the declarativeNetRequest API through the `declarative\_net\_request` manifest key. Demonstrates aspects of Manifest Version 3 (MV3): action, host\_permissions, and web\_accessible\_resources, and includes a comparison with Manifest Version 2 (MV2). | `declarativeNetRequest.Redirect``declarativeNetRequest.Rule``declarativeNetRequest.RuleAction``declarativeNetRequest.RuleCondition``declarativeNetRequest.URLTransform``permissions.contains``permissions.remove``permissions.request` |
| dynamic-theme | Dynamic theme example | `alarms.create``alarms.onAlarm``theme.update` |
| emoji-substitution | Replaces words with emojis. |  |
| eslint-example | Demonstrates how to configure an extension with eslint. |  |
| export-helpers | Demonstrates how to use export helpers like cloneInto to share objects with page scripts. | `notifications.create``runtime.onMessage``runtime.sendMessage` |
| favourite-colour | An example options page, letting you store your favourite colour. | `browserAction.onClicked``runtime.openOptionsPage``storage.managed``storage.sync` |
| find-across-tabs | Demonstration of the find API. | `browserAction.onClicked``extension.getBackgroundPage``find.find``find.highlightResults``runtime.getURL``runtime.onMessage``runtime.sendMessage``tabs.create``tabs.query``tabs.Tab` |
| firefox-code-search | Demonstrates how to use the omnibox API. | `omnibox.onInputChanged``omnibox.onInputEntered``omnibox.setDefaultSuggestion``tabs.create``tabs.update` |
| forget-it | Demonstrates how to use the browsingData API. | `browserAction.onClicked``browsingData.remove``notifications.create``storage.local` |
| google-userinfo | Demonstrates how to use the identity API. | `browserAction.onClicked``identity.getRedirectURL``identity.launchWebAuthFlow``notifications.create` |
| history-deleter | History API demo: deletes history items for a given domain | `history.deleteUrl``history.search``pageAction.show``tabs.onUpdated``tabs.query` |
| http-response | Demonstrates how to rewrite HTTP responses using the webRequest.filterResponseData() API. | `webRequest.filterResponseData``webRequest.onBeforeRequest` |
| imagify | Using a sidebar, illustrates the use of file picker and drag and drop. A content script replaces the current page content with the chosen image. | `extension.getURL``runtime.onMessage``tabs.executeScript``tabs.query``tabs.sendMessage` |
| latest-download | Shows the last downloaded item, and lets you open or delete it. | `downloads.erase``downloads.getFileIcon``downloads.open``downloads.removeFile``downloads.search` |
| list-cookies | This extensions list the cookies in the active tab. | `cookies.getAll``tabs.query` |
| menu-accesskey-visible | Shows how to set up a single letter access key for a menu item. | `i18n.getMessage``menus.update``menus.create``menus.onClicked` |
| menu-demo | Demonstrates adding and manipulating menu items using the menus API. | `i18n.getMessage``menus.create``menus.onClicked``menus.remove``menus.update``runtime.lastError``tabs.executeScript` |
| menu-labelled-open | Shows how an extension can listen for the display of a menu and then add, remove, or update its menu items. | `menus.create``menus.onClicked``menus.onShown``menus.refresh``menus.update``tabs.update` |
| menu-remove-element | Shows how to detect the page element at the cursor position and remove that element, or a parent element, from the page. This example includes use of the polyfill, illustrating cross-browser extension development. | `menus.create``menus.onClicked``menus.getTargetElement``pageAction.openPopup``pageAction.show``tabs.executeScript` |
| menu-search | Illustrates how to retrieve a list of search engines and issue a search request, using search engine details added to the context menu for selected text. | `search.search``search.get``menus.create``menus.onClicked` |
| mocha-client-tests | This example shows two methods of testing an extension: running tests from within the extension, and running tests from the command line using Karma. | `runtime.onMessage``runtime.sendMessage` |
| native-messaging | Example of native messaging, including a Python application and an extension which exchanges messages with it. | `browserAction.onClicked``runtime.connectNative` |
| navigation-stats | Demonstration of the webNavigation API, showing basic stats about which pages you've visited. | `storage.local``webNavigation.onCommitted``webNavigation.onCompleted` |
| notify-link-clicks-i18n | Shows a localized notification when the user clicks on links. | `extension.getURL``i18n.getMessage``notifications.create``runtime.onMessage``runtime.sendMessage` |
| open-my-page-button | Adds a browser action icon to the toolbar. When the browser action is clicked, the add-on opens a page that was packaged with it. | `browserAction.onClicked``tabs.create` |
| page-to-extension-messaging | Demonstrates how a web page and a content script can exchange messages. Visit https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html for the demo. |  |
| permissions | Demonstrates optional permissions using the permissions API. | `browserAction.onClicked``permissions.getAll``permissions.remove``permissions.request``runtime.getURL``tabs.create` |
| private-browsing-theme | Example dynamic theme: sets a dark theme for private windows. | `theme.reset``theme.update``windows.getAll``windows.onCreated` |
| proxy-blocker | Uses the proxy API to block requests to hosts specified on a list. | `extension.getURL``proxy.onRequest``proxy.onError``storage.local``storage.onChanged` |
| quicknote | Allows the user to make quick notes by clicking a button and entering text into the resulting popup. The notes are saved in storage. | `storage.local` |
| root-cert-stats | Shows how to get details about a request's TLS connection. | `webRequest.getSecurityInfo` |
| runtime-examples | Demo of various runtime APIs. | `browserAction.onClicked``notifications.create``runtime.getManifest``runtime.onInstalled``runtime.reload` |
| selection-to-clipboard | Demonstrates how to write to the clipboard from a content script |  |
| session-state | Demonstrates how to retrieve extension-defined state from restored tabs. | `menus.create``menus.onClicked``sessions.getTabValue``sessions.setTabValue``tabs.insertCSS``tabs.onCreated``tabs.onUpdated``tabs.query` |
| store-collected-images | Demonstrates how to use the idb-file-storage library to store and manipulate files in an extension. | `browserAction.onClicked``contextMenus.create``contextMenus.onClicked``runtime.onMessage``runtime.sendMessage``tabs.create``windows.create` |
| stored-credentials | Performs basic authentication by supplying stored credentials. | `storage.local``webRequest.onAuthRequired``webRequest.onCompleted``webRequest.onErrorOccurred` |
| tabs-tabs-tabs | Demonstrates tab manipulation: opening, closing, moving, zooming tabs. | `browserAction.setBadgeBackgroundColor``browserAction.setBadgeText``tabs.create``tabs.duplicate``tabs.getZoom``tabs.move``tabs.onCreated``tabs.onMoved``tabs.onRemoved``tabs.query``tabs.reload``tabs.remove``tabs.setZoom``tabs.Tab``tabs.update` |
| theme-integrated-sidebar | A sidebar that integrates with the current theme. | `theme.getCurrent``theme.onUpdated``windows.getCurrent` |
| theme-switcher | An example of how to use the management API for themes. | `management.getAll``management.setEnabled` |
| themes | A collection of themes illustrating:* weta\_fade: a basic theme employing a single image specified in `theme_frame:`.
* weta\_fade\_chrome: the weta\_fade theme implemented with Chrome compatible manifest keys.
* weta\_tiled: a theme using a tiled image.
* weta\_mirror: a theme using multiple images and aligning those images in the header.
* animated: use of an animated PNG.
 |  |
| top-sites | Demonstration of the topSites API. | `topSites.get` |
| user-agent-rewriter | Demonstrates using the webRequest API to rewrite the User-Agent HTTP header. | `extension.getBackgroundPage``webRequest.onBeforeSendHeaders` |
| user-script-register | Illustrates how an extension can register URL-matching user scripts at runtime. | `userScripts.register``runtime.onMessage``runtime.sendMessage` |
| webpack-modules | Demonstrates how to use webpack to package npm modules in an extension. | `runtime.onMessage``runtime.sendMessage` |
| window-manipulator | Demonstrates how to manipulate windows: opening, closing, resizing windows. | `windows.create``windows.getAll``windows.getCurrent``windows.remove``windows.update``windows.Window` |
| open-irc-links | Demonstrates the use of protocol handlers. |  |


Passo-a-Passo - Mozilla

Passo-a-Passo
=============

Neste artigo iremos criar uma Extensão para Firefox do início ao fim.

A extensão adicionará um novo botão na barra de ferramentas do Firefox. Quando clicar no botão se exibirá um popup habilitando a escolha de um animal. Uma vez que o usuário escolher um animal, a página atual do navegador será substituida por uma imagem do animal escolhido.

Para implementar esse extensão, será necessário:

* **definir a ação do navegador, que é um botão ligado a barra de ferramentas**.
 Para o botão nós iremos fornecer:
    + um icone chamado "beasts.png"
    + um popup para abrir quando o botão for pressionado. O popup irá ter incluso HTML, CSS e JavaScript.
* **escrever um content script, "beastify.js" que irá ser injetado na página web**.
 Este é o código que irá modificar a página.
* **empacotar alguma imagens de animais para substituir na página**.
 Nós iremos criar as imagens "web accessible resources" então a página poderá referenciar eles.

Você pode visualizar toda a estrutura da extensão da seguinte forma:

![](/pt-BR/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension/beastify-anatomy.svg)

É uma extensão extremamente simples, mas mostra muitos conceitos básicos da API de Extensões:

* adicionando um botão na barra de ferramentas
* Definindo um panel de popup usando HTML, CSS e JavaScript
* Injetando content scripts nas páginas
* comunicação entre content scripts e o resto das extensões
* empacotando recursos com sua extensão que serão usadas nas páginas

Você pode encontrar o código completo da extensão no GitHub.

Para criar essa extensão você precisará do Firefox 45 ou mais recente.

Escrevendo a WebExtension
-------------------------

Crie um novo diretório e navegue até ele:

```bash
mkdir beastify
cd beastify
```

### manifest.json

Agora crie um novo arquivo chamado "manifest.json", e insira o seguinte conteúdo:

```json
{
  "manifest\_version": 2,
  "name": "Beastify",
  "version": "1.0",

  "applications": {
    "gecko": {
      "id": "beastify@mozilla.org"
    }
  },

  "permissions": ["http://\*/\*", "https://\*/\*"],

  "browser\_action": {
    "default\_icon": "button/beasts.png",
    "default\_title": "Beastify",
    "default\_popup": "popup/choose\_beast.html"
  },

  "web\_accessible\_resources": [
    "beasts/frog.jpg",
    "beasts/turtle.jpg",
    "beasts/snake.jpg"
  ]
}
```

* As primeiras três chaves : **`manifest_version`**, **`name`**, e **`version`**, são obrigatórias e contém metadados básicos para a extensão.
* **`permissions`** lista as permisões que a extensão precisa. Nós iremos apenas perguntar se pediremos permissão para modificar todas as páginas HTTP e HTTPS : veja a documentação para as chaves de `permissions`. Nós prefirimos por usar a permissão `activeTab` aqui , mas atualmente não é suportada pela Firefox.
* **`browser_action`** especifica o botão da barra de ferramentas. Iremos fornecer três informações aqui:
    + **`default_icon`** é obrigatório, e aponta para o icone do botão
    + **`default_title`** é opicional, e mostra a mensagem em um tooltip
    + **`default_popup`** é usado se você quer que um popup seja mostrado quando o usuário clicar no botão. Nós fazemos isto, então incluímos esta chave e apontamos para um arquivo HTML incluído na extensão.
* **`web_accessible_resources`** lista arquivos que queremos criar tornar acessível para as páginas. Uma vez que a extensão substitui as imagens da página com imagens que já empacotamos com a extensão , nós precisamos fazer estas imagens acessíveis à página.

Perceba que todos os caminhos são relativos ao manifest.json.

### O Botão na barra de ferramentas

O botão na barra de ferramentas precisa de um icone, e nosso manifest.json informa que nós teriamos um icone em "button/beasts.png".

Crie o diretório "button" e copie o icone com o nome "beasts.png". Você poderá usar um dos nossos exemplo, que é retirado do Aha-Soft's Free Retina iconset e usado sob os termos de sua licença.

Se você não fornecer um popup, então um evento de click é lançado para sua extensão quando o usuário clicar no botão. Se você fornecer um popup, o evento de click não envia, mas ao invés disso, o popup é aberto. Nós queremos abrir um popup, então vamos criá-lo na próxima etapa.

### O popup

A função do popup é ativar a escolha do usuário para um dos três animais.

Crie um novo diretório chamado "popup" na raiz do projeto. Aqui é onde nós criar os códigos para o popup. O popup irá ser constituido em três arquivos :

* **`choose_beast.html`** Define o conteúdo do panel
* **`choose_beast.css`** Estilo do conteúdo
* **`choose_beast.js`** Captura a escolha do usuário executando um content script a aba ativa

#### choose\_beast.html

O arquivo HTML criado é este:

```html
<!doctype html>

<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="choose\_beast.css" />
  </head>

  <body>
    <div class="beast">Frog</div>
    <div class="beast">Turtle</div>
    <div class="beast">Snake</div>

    <script src="choose\_beast.js"></script>
  </body>
</html>
```

Nós temos um elemento para cada escolha de animal. Perceba que nós incluimos os arquivo CSS e JS nesse arquivo, igual a uma página web.

#### choose\_beast.css

O CSS ajusta o tamanho do popup, garantindo que as três escolhas irão preencher o espaço, e daremos a eles algum estilo básico:

```css
html,
body {
  height: 100px;
  width: 100px;
  margin: 0;
}

.beast {
  height: 30%;
  width: 90%;
  margin: 3% auto;
  padding-top: 6%;
  text-align: center;
  font-size: 1.5em;
  background-color: #e5f2f2;
  cursor: pointer;
}

.beast:hover {
  background-color: #cff2f2;
}
```

#### choose\_beast.js

No JavaScript para o popup, nós iremos "escutar" o evento de click . Se o clique foi em uma das três escolhas de animais, nós iremos injetar um content script na aba ativa. Um vez que o content script é carregado , nós enviaremos uma mensagem com o animal escolhido:

```js
document.addEventListener("click", function (e) {
  if (!e.target.classList.contains("beast")) {
    return;
  }

  var chosenBeast = e.target.textContent;

  chrome.tabs.executeScript(null, {
    file: "/content\_scripts/beastify.js",
  });

  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(tabs[0].id, { beast: chosenBeast });
  });
});
```

É usado três funções da API WebExtension:

* **`chrome.tabs.executeScript`** Para injetar um content script que se encontra em "content\_scripts/beastify.js" na aba ativa
* **`chrome.tabs.query`** Obter a aba ativa
* **`chrome.tabs.sendMessage`** para enviar uma mensagem para o content scripts executando na aba ativa. A mensagem irá conter as propriedades do animal escolhido.
### O content script

Crie a novo diretório na pasta root do projeto chamado "content\_scripts" e crie um novo arquivo com o nome "beastify.js", com o seguinte conteúdo:

```js
// Assign beastify() as a listener for messages from the extension.
chrome.runtime.onMessage.addListener(beastify);

function beastify(request, sender, sendResponse) {
  removeEverything();
  insertBeast(beastNameToURL(request.beast));
  chrome.runtime.onMessage.removeListener(beastify);
}

function removeEverything() {
  while (document.body.firstChild) {
    document.body.firstChild.remove();
  }
}

function insertBeast(beastURL) {
  var beastImage = document.createElement("img");
  beastImage.setAttribute("src", beastURL);
  beastImage.setAttribute("style", "width: 100vw");
  beastImage.setAttribute("style", "height: 100vh");
  document.body.appendChild(beastImage);
}

function beastNameToURL(beastName) {
  switch (beastName) {
    case "Frog":
      return chrome.extension.getURL("beasts/frog.jpg");
    case "Snake":
      return chrome.extension.getURL("beasts/snake.jpg");
    case "Turtle":
      return chrome.extension.getURL("beasts/turtle.jpg");
  }
}
```

O content script adiciona um listener da mensagem para a extensão (especificamente , para "choose\_beast.js"). No listener:

* remover todos os elementos em `document.body`
* transforma os nomes dos animais em uma URL para ser usada na imagem
* Cria uma tag `<img>`, e insere no DOM
* Remove a mensagem da listener
### Os animais

Finalmente, nós precisamos incluir as imagens dos animais.

Crie um novo diretório chamado "beasts", e adicione as três imagens nos diretório, com os nomes apropriados. Você pode obter as imagens aqui no GitHub, ou aqui:

![](/pt-BR/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension/frog.jpg)
![](/pt-BR/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension/snake.jpg)
![](/pt-BR/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension/turtle.jpg)

Empacotando e instalando
------------------------

Verifique se os seus arquivos estão estruturados de acordo com as informações abaixo:
```

beastify/

    beasts/
        frog.jpg
        snake.jpg
        turtle.jpg

    button/
        beasts.png

    content_scripts/
        beastify.js

    popup/
        choose_beast.css
        choose_beast.html
        choose_beast.js

    manifest.json
```

Extensões Firefox são empacotados como arquivos XPI, que são apenas arquivos ZIP com a extensão "XPI".

Um truque é que o arquivo ZIP deve ser um dos arquivos de extensão . Portanto, para criar um XPI a partir dos arquivos beastify , navegue até o diretório " beastify " em um shell de comando e digite:

```bash
   # in beastify/
   zip -r ../beastify.xpi *
```

Ou você pode compactar com alguma ferramenta do tipo WinRar escolhe a forma de empacotação ZIP e subistituir .zip para XPI

Para instalar o XPI, você apenas irá abrir o Firefox:

* Vá até o Arquivos, seleciona Abrir arquivo, ou pressione Ctrl/Cmd+O
* selecione "beastify.xpi" na caixa de dialógo que abriu

Você deverá receber um aviso de que você está instalando uma extensão não assinada. Aceite o aviso de advertência.

Você poderá ver o icone aparecer na barra de ferramentas. Abra uma nova página web, então click no icone, selecione um animal e veja a imagem que você escolheu na página.