Construindo uma Extensão de Navegador com Dados do Instagram

Uma extensão de navegador pode enriquecer a experiência de quem já navega manualmente pelo Instagram, mostrando métricas adicionais direto na tela, sem precisar abrir outra ferramenta.

Estrutura mínima (Manifest V3)

{
  "manifest_version": 3,
  "name": "Instagram Insights",
  "version": "1.0",
  "permissions": ["activeTab"],
  "host_permissions": ["https://scrapegram.cloud/*"],
  "content_scripts": [{
    "matches": ["https://www.instagram.com/*"],
    "js": ["content.js"]
  }]
}

Detectando o perfil na página

const username = window.location.pathname.split('/').filter(Boolean)[0];

fetch(`https://scrapegram.cloud/api/v1/instagram/profile?username=${username}`, {
  headers: { Authorization: 'Bearer SEU_TOKEN' }
})
  .then(r => r.json())
  .then(perfil => {
    const badge = document.createElement('div');
    badge.textContent = `Engajamento estimado: calculando...`;
    document.body.prepend(badge);
  });

Cuidado com segurança do token

Nunca deixe o token de API hardcoded numa extensão publicada — qualquer pessoa que instalar consegue extrair o código-fonte. Para uso pessoal/interno isso é aceitável; para distribuição pública, o correto é rotear a chamada por um backend próprio que guarda o token com segurança (ver gerenciamento seguro de tokens de API).