Modulo 3.5 - Extensoes Chrome com IA

1

Anatomia de uma extensao

O que e:

Estrutura tecnica de extensoes Chrome: manifest.json define metadados, background scripts rodam em segundo plano, content scripts interagem com paginas, popup e a interface do usuario.

Por que aprender:

Entender a estrutura permite criar, modificar e debugar extensoes para casos especificos de automacao e IA.

Conceitos-chave:

Manifest.json, Background script, Content script, Popup, Permissions.

Estrutura de Arquivos

minha-extensao/
├── manifest.json      # Configuracao principal
├── background.js      # Script em segundo plano
├── content.js         # Injeta na pagina
├── popup.html         # Interface do usuario
├── popup.js           # Logica do popup
├── styles.css         # Estilos
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

Manifest.json Basico

{
  "manifest_version": 3,
  "name": "Minha Extensao IA",
  "version": "1.0",
  "description": "Extensao com IA integrada",
  "permissions": ["activeTab", "storage"],
  "host_permissions": ["https://*.openai.com/*"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icons/icon48.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [{
    "matches": [""],
    "js": ["content.js"]
  }]
}

2

Extensao + Webhook

O que e:

Extensao que envia dados da pagina para webhook no Make. Captura conteudo, formularios, acoes do usuario e dispara automacoes.

Por que aprender:

Ponte entre navegador e automacao. Permite automatizar qualquer coisa que usuario faz manualmente no browser.

Conceitos-chave:

DOM access, Data extraction, Webhook POST, Context menu integration.

Enviando Dados para Make

// content.js - Captura texto selecionado e envia ao Make
document.addEventListener('mouseup', async () => {
  const selectedText = window.getSelection().toString().trim();

  if (selectedText.length > 10) {
    const response = await fetch('https://hook.make.com/seu-webhook', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        text: selectedText,
        url: window.location.href,
        title: document.title,
        timestamp: new Date().toISOString()
      })
    });

    console.log('Enviado ao Make:', await response.json());
  }
});

Casos de Uso

- Clipper de artigos para Notion/Airtable
- Captura de leads de LinkedIn para CRM
- Monitoramento de precos em e-commerces
- Traducao automatica de paginas selecionadas

3

Truth Pilot: verificador de fatos

O que e:

Extensao que verifica veracidade de texto selecionado usando IA e busca web. Seleciona uma afirmacao, extensao pesquisa fontes e valida se e fato ou fake.

Por que aprender:

Exemplo pratico de extensao util com IA. Demonstra integracao de LLM com busca web e interface no navegador.

Conceitos-chave:

Text selection, Fact verification, Search integration, Result overlay.

Fluxo do Truth Pilot

Usuario seleciona texto com afirmacao
Clica no icone da extensao ou usa atalho
Extensao envia texto ao webhook Make
Make busca no Google/Bing por fontes
GPT analisa fontes e dá veredicto
Extensao exibe resultado: Verdadeiro / Falso / Inconclusivo

Prompt de Verificacao

Voce e um fact-checker especializado.

Afirmacao a verificar:
"{texto_selecionado}"

Fontes encontradas:
{resultados_busca}

Analise as fontes e classifique a afirmacao como:
- VERDADEIRO: Se multiplas fontes confiaveis confirmam
- FALSO: Se multiplas fontes confiaveis contradizem
- INCONCLUSIVO: Se fontes sao insuficientes ou contraditórias

Responda em JSON:
{
  "veredicto": "VERDADEIRO|FALSO|INCONCLUSIVO",
  "confianca": 0-100,
  "explicacao": "breve explicacao",
  "fontes": ["url1", "url2"]
}

4

Summarizer: resumidor

O que e:

Extensao que resume paginas inteiras ou textos selecionados usando LLM. Um clique para versao condensada de qualquer conteudo web.

Por que aprender:

Aplicacao pratica e popular de IA no navegador. Demonstra extracao de conteudo e processamento com LLM.

Conceitos-chave:

Page content extraction, Text summarization, Summary display, Format options.

Extraindo Conteudo da Pagina

// content.js - Extrai conteudo principal da pagina
function extractMainContent() {
  // Tenta pegar o article principal
  let content = document.querySelector('article')?.innerText;

  // Fallback para main ou body
  if (!content) {
    content = document.querySelector('main')?.innerText
              || document.body.innerText;
  }

  // Remove scripts, styles, navegacao
  const unwanted = document.querySelectorAll('script, style, nav, footer, aside');

  // Limita a 10000 caracteres para API
  return content.substring(0, 10000);
}

// Envia para resumir
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'summarize') {
    const content = extractMainContent();
    sendResponse({ content });
  }
});

Bullet Points

Lista com pontos principais

Paragrafo

Resumo em texto corrido

TL;DR

Uma frase apenas

5

Claude Vision no navegador

O que e:

Extensao que usa Claude Vision (ou GPT-4 Vision) para analisar imagens na pagina. Descreve, extrai texto, identifica elementos visuais.

Por que aprender:

Vision AI abre possibilidades unicas de automacao visual diretamente no navegador. Analise de screenshots, graficos, documentos.

Conceitos-chave:

Claude Vision API, Image capture, Visual analysis, OCR, Element detection.

Casos de Uso Vision

OCR de Imagens

Extrair texto de prints, fotos de documentos

Analise de Graficos

Interpretar dados de charts e dashboards

Descricao de Produtos

Gerar descricoes a partir de fotos

Alt Text Automatico

Gerar descricoes para acessibilidade

Capturando Imagem para Analise

// Captura imagem e converte para base64
async function captureAndAnalyze(imgElement) {
  // Cria canvas para converter imagem
  const canvas = document.createElement('canvas');
  canvas.width = imgElement.naturalWidth;
  canvas.height = imgElement.naturalHeight;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(imgElement, 0, 0);

  // Converte para base64
  const base64 = canvas.toDataURL('image/jpeg', 0.8);

  // Envia para webhook Make com Claude Vision
  const response = await fetch('https://hook.make.com/vision-webhook', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      image: base64,
      prompt: "Descreva esta imagem em detalhes"
    })
  });

  return await response.json();
}

6

AI Copilot para imagens

O que e:

Extensao que gera ou edita imagens contextualmente. Usuario seleciona area, descreve alteracao desejada, e IA executa. Edicao inline no navegador.

Por que aprender:

Edicao de imagem com IA sem sair do fluxo de trabalho. Gera variacoes, remove fundos, adiciona elementos diretamente onde precisa.

Conceitos-chave:

Image generation, Context awareness, Edit overlay, Inline editing.

Funcionalidades do Copilot

1. Gerar Variantes: Cria variacoes de imagens existentes
2. Remover Fundo: Remove background com 1 clique
3. Expandir: Estende imagem com outpainting
4. Editar Area: Seleciona regiao e descreve mudanca
5. Upscale: Aumenta resolucao com IA

Fluxo de Integracao

Selecao no Browser

→

Captura + Prompt

→

Webhook Make

→

DALL-E / Replicate

→

Exibe no Browser

Dicas de Implementacao

- Use Replicate para modelos especificos (upscale, remove bg)
- DALL-E 3 para geracao e edicao geral
- Exiba loading overlay enquanto processa
- Oferca opcao de download do resultado

Proximo Modulo

3.6 - Micro SaaS com Make

Continuar