Crie sua primeira extensão do Chrome em JavaScript para ocultar suas chaves de API

Neste tutorial, você aprenderá a criar uma extensão do Chrome. O exemplo que vamos abordar hoje é como ocultar suas chaves de API do Vonage no painel de controle. O conhecimento que você adquirirá ao seguir as etapas deste tutorial lhe dará uma base para criar suas próprias extensões do Chrome para diferentes finalidades.

O que é uma extensão do Chrome

Uma extensão do Chrome é um programa de software que permite ampliar as funcionalidades do Chrome e personalizar sua experiência no navegador. Uma extensão pode ser desenvolvida com HTML, CSS, JavaScript e um manifest.json arquivo. Este último fornece ao Chrome as informações necessárias para executar os scripts, de modo que a extensão funcione.

Criar a pasta da extensão do Chrome

Crie uma nova pasta no seu computador que irá conter o manifest.json arquivo e o arquivo bootstrap; no nosso exemplo, vamos chamá-la de index.js. No meu exemplo, vou chamar essa pasta de chrome-extension.

Crie o manifest.json arquivo

É necessário um manifest.json arquivo é necessário ao criar uma extensão do Chrome, pois ele informa ao seu programa a função a ser executada.

Crie um manifest.json arquivo. No terminal do Unix, você pode digitar touch manifest.json.

Preencha-o com as informações necessárias, conforme você pode ver no trecho de código abaixo.

Vamos analisar cada linha, passo a passo, juntos.

• name é o nome da extensão que aparecerá na lista de extensões do Chrome.

• description é a descrição do que sua API do Chrome faz.

• version é a versão atual da sua extensão; caso faça alterações, você pode aumentar o número da versão.

• author deve conter o nome do criador da extensão do Chrome.

• manifest_version refere-se à versão do manifesto; no momento da redação desta postagem no blog, a versão mais recente é a 3.

• content_scripts são arquivos que podem fazer alterações no DOM e passar informações para a extensão. Você pode saber mais na página oficial do script de conteúdo. Neste exemplo, queremos que nosso script seja compatível com a página da web <${CUSTOMER_DASHBOARD_URL}/> e qualquer uma de suas subpáginas. Definimos que a lógica a ser seguida será escrita no arquivo index.js.

{
    "name": "API Key Hider",
    "description": "A chrome extension to blur your Vonage API keys",
    "version": "1.0",
    "author": "Amanda Cavallaro",
    "manifest_version": 3,
    "content_scripts": [{
      "matches": [
        "${CUSTOMER_DASHBOARD_URL}/*"
      ],
      "js": ["index.js"]
    }]
}

Crie o arquivo bootstrap

No seu terminal, crie o index.js arquivo. Em uma máquina Unix, você pode fazer isso digitando touch index.js.

Para ter uma extensão do Chrome, você pode criar uma função simples, que será aplicada ao navegador assim que você a importar.

Aqui está um exemplo que você pode usar para criar um alerta simples que seria executado uma única vez.

function createAnAlert() {

 alert();

}

createAnAlert();

Neste tutorial, usaremos o código abaixo para ocultar algumas chaves de API.

Vamos criar uma função chamada blurApiKeys. Vamos usar document.querySelector e document.querySelectorAll para localizar os elementos HTML que contêm a chave da API e a chave secreta da API. Por fim, vamos adicionar um efeito de desfoque de 20 pixels a esses elementos usando estilos CSS, e o `setInterval` chamará a função `blurApiKeys` a cada 10 milissegundos.

function blurApiKeys() {
  let apiKey = document.querySelector('#apiKeyField > div');

  if (apiKey) {
    apiKey.style.filter = 'blur(20px)';
  }

  let apiKeyLabel = [...document.querySelectorAll('label')].filter((x) =>
    x.textContent.includes('API Key')
  );

  let apiSecretLabel = [...document.querySelectorAll('label')].filter((x) =>
    x.textContent.includes('API secret 1')
  );

  for (let label of apiKeyLabel) {
    let div = label.nextElementSibling;

    if (div) {
      div.style.filter = 'blur(20px)';
    }
  }

  for (let label of apiSecretLabel) {
    let div = label.nextElementSibling;

    if (div) {
      div.style.filter = 'blur(20px)';
    }
  }
}

setInterval(blurApiKeys, 10);

Importe a pasta criada para suas extensões do Chrome

Agora é hora de importar esses dois arquivos que você criou e adicioná-los como uma extensão do Chrome ao seu navegador.

1. Abra o navegador Chrome.

2. Acesse chrome://extensions/.

3. Clique em “modo de desenvolvedor”, no canto superior direito, para ativá-lo (caso ainda não esteja ativado).

4. Clique em “Carregar arquivo descompactado”, no canto superior esquerdo, e uma ferramenta de envio de arquivos será aberta.

5. Procure o local onde você criou a pasta chrome-extension no seu computador, clique nela e, por fim, clique no botão “Selecionar”.

6. É possível ver que uma nova extensão do Chrome chamada “API Key Hider” foi criada, conforme especificado na propriedade “name” do manifest.json.

7. Certifique-se de que esta extensão do Chrome esteja ativada (marcada). Se, em algum momento, você quiser desativá-la, basta desmarcá-la ou removê-la da sua lista de extensões do Chrome.

Você pode ver as etapas acima no GIF abaixo:

A gif showing how to import the Chrome Extension onto chrome

Experimente

Sua extensão do Chrome já está carregada e você pode ver a funcionalidade da função que criou em ação no navegador.

Para testar a função que criamos, acesse o Painel da Vonage, navegue pelas páginas do painel e você perceberá que tanto a API da Vonage quanto as chaves secretas estão ocultas. Se precisar copiá-las, o botão “Copiar” ao lado delas ainda funciona, mesmo que as chaves estejam ocultas, conforme mostra a imagem abaixo.

Settings page on the Vonage Dashboard with the blurred keys

Parabéns

Muito bem! Você criou uma extensão do Chrome para ocultar suas chaves da API do Vonage. Agora que já sabe como criar, importar e ativar uma extensão do Chrome, pode dar asas à sua criatividade e criar muitas outras extensões!

Se você quiser dar um passo adiante, pode aprender como publicá-la na Chrome Web Store na documentação oficial.

Espero que tenham gostado. Fiquem à vontade para entrar em contato comigo no Twitter ou participar do nosso canal da Comunidade no Slack.