Recursos da API do Chrome que você deve saber

tomerpacific Bloqueado Desbloquear Seguir Seguindo 28 de dezembro Foto de Jonatan Quintero no Unsplash

Então você acha que sabe como construir uma extensão do Chrome? Bem, tudo bem e elegante, mas você já ouviu falar sobre menus contextuais? Mensagens entre scripts? Adicionando um crachá ao ícone da sua extensão? Se tudo isso parece fascinante, você está com sorte. Analisaremos alguns recursos interessantes que a API do Chrome nos concede.

Se você estiver interessado em ler sobre como criar uma extensão do Chrome, leia meu artigo anterior aqui . Se você quer saber como publicar um, você pode ler tudo sobre isso aqui

Menu contextual

Para simplificar, o menu de contexto é o menu que aparece quando você clica com o botão direito do mouse em qualquer lugar dentro do navegador. Você pode adicionar sua extensão do Chrome a esse menu com algumas etapas simples:

  1. Adicionar menus de contexto à chave de permissões no manifesto
  2. Adicione um ícone 16×16 (como será usado no menu de contexto)
  3. Adicione o seguinte código ao seu script de segundo plano:

Armazenamento

Semelhante ao localStorage , a API do Chrome permite salvar dados como objetos, o que persiste mesmo quando o navegador é fechado e reaberto. Aqui estão os passos necessários para permitir o uso de armazenamento em sua extensão:

  1. Adicionar armazenamento à chave de permissões no manifesto
  2. Para colocar dados no armazenamento, você usa:

3. Para extrair dados do armazenamento que você usa:

?? NÃO coloque dados confidenciais do usuário no armazenamento, pois ele não está criptografado

Mensagens

O Chrome tem outro recurso bacana que permite passar mensagens entre os scripts. Por exemplo, em sua extensão, você tem seu arquivo popup.js que lida com coisas relacionadas à janela pop-up e possui um script de segundo plano. Se você quiser que esses dois scripts se comuniquem entre si, use os seguintes métodos:

Enviar mensagem

Ouvir mensagens recebidas

Distintivos

Você os conhece, os ama e pode adicioná-los ao ícone de sua extensão. Lembre-se de que, devido ao tamanho pequeno, o texto que você deseja exibir está limitado a quatro caracteres .

Para definir a cor de fundo do selo que você usa:

Para definir o texto do selo que você usa:

Nos dois métodos, o retorno de chamada é um parâmetro opcional que você pode usar depois que o método concluir sua ação.

Recursos da API do Chrome que você deve saber

tomerpacific 28 de dezembro Foto de Jonatan Quintero no Unsplash

Então você acha que sabe como construir uma extensão do Chrome? Bem, tudo bem e elegante, mas você já ouviu falar sobre menus contextuais? Mensagens entre scripts? Adicionando um crachá ao ícone da sua extensão? Se tudo isso parece fascinante, você está com sorte. Analisaremos alguns recursos interessantes que a API do Chrome nos concede.

Se você estiver interessado em ler sobre como criar uma extensão do Chrome, leia meu artigo anterior aqui . Se você quer saber como publicar um, você pode ler tudo sobre isso aqui

Menu contextual

Para simplificar, o menu de contexto é o menu que aparece quando você clica com o botão direito do mouse em qualquer lugar dentro do navegador. Você pode adicionar sua extensão do Chrome a esse menu com algumas etapas simples:

  1. Adicionar menus de contexto à chave de permissões no manifesto
  2. Adicione um ícone 16×16 (como será usado no menu de contexto)
  3. Adicione o seguinte código ao seu script de segundo plano:

Armazenamento

Semelhante ao localStorage , a API do Chrome permite salvar dados como objetos, o que persiste mesmo quando o navegador é fechado e reaberto. Aqui estão os passos necessários para permitir o uso de armazenamento em sua extensão:

  1. Adicionar armazenamento à chave de permissões no manifesto
  2. Para colocar dados no armazenamento, você usa:

3. Para extrair dados do armazenamento que você usa:

?? NÃO coloque dados confidenciais do usuário no armazenamento, pois ele não está criptografado

Mensagens

O Chrome tem outro recurso bacana que permite passar mensagens entre os scripts. Por exemplo, em sua extensão, você tem seu arquivo popup.js que lida com coisas relacionadas à janela pop-up e possui um script de segundo plano. Se você quiser que esses dois scripts se comuniquem entre si, use os seguintes métodos:

Enviar mensagem

Ouvir mensagens recebidas

Distintivos

Você os conhece, os ama e pode adicioná-los ao ícone de sua extensão. Lembre-se de que, devido ao tamanho pequeno, o texto que você deseja exibir está limitado a quatro caracteres .

Para definir a cor de fundo do selo que você usa:

Para definir o texto do selo que você usa:

Nos dois métodos, o retorno de chamada é um parâmetro opcional que você pode usar depois que o método concluir sua ação.