14.03.2025

Enviando Dados do Script de Conteúdo para o Popup.html no Chrome

Resumo Rápido

Para enviar dados de um script de conteúdo, use o método chrome.runtime.sendMessage. Para receber esses dados no script do popup, utilize o método chrome.runtime.onMessage.

Script de Conteúdo:

// Enviando dados para o script do popup
chrome.runtime.sendMessage({data: "seusDados"});

Script do Popup:

// Recebendo dados do script de conteúdo
chrome.runtime.onMessage.addListener((message) => {
  // Processar message.data
});

Detalhes da Transmissão de Mensagens Assíncronas

Para garantir o funcionamento estável e confiável da sua extensão, é importante entender a natureza assíncrona da transmissão de mensagens. Esteja preparado para usar callbacks para lidar com as respostas.

Tratando Respostas:

// No script de conteúdo
// SendMessage é semelhante a enviar um e-mail
chrome.runtime.sendMessage({data: "seusDados"}, function(response) {
  console.log("Resposta recebida:", response);
});

// No script do popup
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // Analisar message.data
  // Enviar uma resposta, a troca de mensagens é bidirecional
  sendResponse({status: "Dados recebidos com sucesso, obrigado!"});
  return true; // Isso mantém o canal de comunicação aberto para longas conversas
});

Estratégias para Eficientes Transmissões de Mensagens

Armazenamento Local — Seu Armazenamento Pessoal de Dados

LocalStorage oferece aos desenvolvedores um mecanismo conveniente para armazenar dados entre sessões na janela do popup.

// Script de conteúdo
// Contar todos os elementos na página
const totalElements = document.querySelectorAll('*').length;
localStorage.setItem('total_elements', totalElements);

// Script do Popup
// Recuperar dados salvos anteriormente
const totalElements = localStorage.getItem('total_elements');
console.log(`Número de elementos na página: ${totalElements}`);

Mensagens com um “Tipo” Único

Ao usar o campo "type" na sua mensagem, você ganha a capacidade de identificá-la, como usar um aperto de mão secreto.

Script de Conteúdo:

// Enviando uma mensagem com um código único, como se este código fosse uma cifra
chrome.runtime.sendMessage({type: "DOM_COUNT", data: "seusDados"});

Script do Popup:

// Recebendo a mensagem e decodificando seu conteúdo com base no "type"
chrome.runtime.onMessage.addListener((message) => {
  if(message.type === "DOM_COUNT") {
    // Trabalhar com message.data
  }
});

Guia Ativo — Alvo para Suas Mensagens

Se você deseja enviar uma mensagem para uma guia específica, use chrome.tabs.query para direcionar mensagens do popup para o script de conteúdo da guia ativa.

// Encontrar a guia ativa
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
  // Enviar mensagem para a guia ativa
  chrome.tabs.sendMessage(tabs[0].id, {data: "seusDados"});
});

Visualização

Você pode visualizar a operação da sua extensão do Chrome como um prédio de vários andares:

1º andar: script de conteúdo (🔎) - coletando dados no nível da página.  
Elevador: API de mensagens (🛗) - transferindo dados entre camadas.  
10º andar: popup.html (🎉) - apresentando dados ao usuário.

Note o fluxo de dados e destaque os pontos chave:

[🔎] --(coletando dados)--> [🛗] --(enviando dados)--> [🎉]

Script de Conteúdo — buscador de dados;
API de Mensagens — mensageiro entregador de dados;
Popup.html — vitrine exibindo dados.

Clareza e eficácia!

Atenção! Questões Potenciais

Ordem dos Scripts — Importância da Organização

No seu arquivo manifest.json, a ordem dos scripts é importante. Certifique-se de que scripts de conteúdo sejam carregados antes dos scripts do popup para garantir a interação correta.

Armazenamento Local — Conveniência com Cuidado

O armazenamento local está disponível em navegadores modernos; no entanto, devido à natureza dos scripts de conteúdo, seu comportamento pode ser imprevisível. Use o código de transmissão de mensagens corretamente para evitar problemas.

Mensagens Assíncronas — O Tempo Importa

O processo de transmissão de mensagens não é instantâneo; é assíncrono. Para garantir que seu código funcione corretamente, esteja preparado para esperar por respostas usando callbacks ou promessas para gerenciar a natureza assíncrona.

Recursos Úteis

1. Transmissão de Mensagens | Extensões | Desenvolvedores do Chrome — guia oficial para transmissão de mensagens.
2. Transmissão de Mensagens em uma Extensão do Chrome: Resposta Não Enviada - Stack Overflow — experiência da comunidade e soluções para problemas de mensagens entre scripts de conteúdo e popups.
3. runtime.sendMessage() - Mozilla | MDN — guia detalhada sobre transmissão de mensagens em WebExtensions.
4. Como Criar Extensões para o Chrome - YouTube — tutorial passo a passo visualizado sobre como criar extensões para o Chrome.
5. Extensões / Começando | Desenvolvedores do Chrome — guia para começar a construir extensões.
6. chrome.tabs | API | Desenvolvedores do Chrome — visão geral da API chrome.tabs para organizar a transmissão de mensagens entre guias.

Video

Navigation