Construtor de Extensão Chrome para Crawler TL;DR

Construa uma extensão do Chrome (Manifest V3) chamada "TL;DR Crawler" que funcione em qualquer página da web normal. O QUE ELA FAZ Clique no ícone da barra de ferramentas: uma aranha desenhada a traço aparece na página atual, segue o cursor (também durante a rolagem), lê o texto por onde passa e cria um TL;DR curto em um painel flutuante. Clique no ícone novamente: tudo desaparece e a página fica exatamente como antes. 1. ALTERNAR - background.js: chrome.action.onClicked injeta content.js com chrome.scripting.executeScript. - content.js verifica um sinalizador global. Se o crawler já estiver em execução, ele desliga e limpa tudo. Caso contrário, inicia. Apenas uma instância por aba, sempre. 2. ENCONTRAR O TEXTO - Encontre a área legível principal: prefira <article> ou <main>, caso contrário, o elemento com mais texto em parágrafos. Pule nav, header, footer, aside, menus, formulários, código, anúncios e elementos ocultos. - Colete blocos de texto (p, li, blockquote, h2-h4) e divida-os em frases. Armazene cada frase como um Range do DOM (frases podem atravessar links e texto em negrito, então NÃO as envolva em elementos). - Observe a área com um MutationObserver com debounce (1s) para capturar texto carregado depois (scroll infinito, conteúdo preguiçoso). 3. ESCOLHER FRASES-CHAVE - Pontue cada frase: +2 para dígitos, +2 para %, $, €, million, billion; +1,5 para palavras como first, record, launch, announce, new, only, biggest, fastest, warns, raises, cuts; +0,3 por nome capitalizado (máx. +2); -2 se tiver menos de 40 ou mais de 260 caracteres. - Marque os 25% principais como frases-chave (mín. 5, máx. 80), distribuídas para que a maioria dos parágrafos tenha uma. - Resumos, máx. 9 palavras cada: - Se uma chave de API estiver definida: envie todas as frases-chave em UMA solicitação ao Claude e peça um array JSON de resumos curtos e simples (máx. 9 palavras, mantenha números e nomes exatamente, sem exagero). Solicite novamente em lotes quando novo texto aparecer. - Sem chave: resumo substituto = a frase com aberturas de preenchimento removidas (and, but, however, also, according to), cortada em um limite de palavra com "…". 4. A ARANHA - Host de Shadow DOM na raiz do documento contendo um <canvas> fixo em tela cheia (pointer-events: none, z-index 2147483646) e o painel. - Visual: corpo pequeno em retângulo arredondado, abdômen em elipse, cabeça com dois olhos brancos, contornos em #5ab8ff. 8 pernas como linhas azuis de 3px com pontos de articulação rosa (#ff4f7a), dois segmentos cada com cinemática inversa, joelhos dobrando para fora. - Marcha: dois grupos de pernas alternados. Um pé só dá um passo quando está a ~80px do seu ponto ideal e o outro grupo está plantado. Passos duram 0,13s com uma pequena elevação, aterrissando ligeiramente à frente na direção do movimento. - Movimento: alvo = posição do cursor + rolagem, então segue durante a rolagem. Máx. ~420 px/s, aceleração suave, para a ~40px do cursor, gira suavemente em direção à sua direção. Se o cursor ficar ocioso por 8s, vagueia pela janela de visualização. - requestAnimationFrame com passo de física fixo de 1/120s. Suporte a devicePixelRatio e redimensionamento da janela. 5. RASTREAMENTO - A cada 80ms e a cada aterrissagem de pé, encontre o texto sob a aranha com document.caretRangeFromPoint (ignore os próprios elementos da extensão). - Se esse ponto estiver dentro de uma frase-chave ainda não encontrada: destaque-a com a API CSS Custom Highlight (::highlight(tldr-found) com fundo amarelo suave) e adicione seu resumo ao painel. - Se um pé aterrissar em uma palavra normal: em ~25% dos casos, corrompa apenas essa palavra. Envolva apenas essa palavra em um span (é um único nó de texto, então é seguro) e aplique um efeito aleatório: fonte monoespaçada, contorno azul, destaque azul, leve rotação, espaçamento amplo entre letras, desfoque ou maiúsculas. Máx. 2 efeitos por palavra. Registre cada mudança para poder desfazer. 6. PAINEL - Canto superior direito, arrastável pelo cabeçalho, dentro do Shadow DOM para que o CSS do site não o afete. - Escuro (#16181c), título mono "TL;DR" em amarelo (#ffd166), um contador "encontrado / total", uma barra de progresso rosa e uma lista numerada em ordem de artigo. O item mais novo pisca em amarelo e a lista rola automaticamente até ele. A lista rola dentro de uma altura máxima. - Botões: "Copiar TL;DR" (texto simples para a área de transferência), "Reiniciar" (limpa destaques, corrupções e a lista) e "Fechar" (desligamento completo). - Se uma chave estiver definida, adicione "Escrever TL;DR com Claude": envia todas as frases encontradas e retorna 3 linhas curtas usando apenas seus fatos, números inalterados. Mostre um estado "Pensando...", depois a resposta sob a lista. 7. CHAVE DE API - options.html: um campo para a chave de API Anthropic do usuário e um nome de modelo, armazenados em chrome.storage.local. - Todas as chamadas de API passam por background.js com fetch para https://api.anthropic.com, com cabeçalhos x-api-key, anthropic-version: 2023-06-01 e content-type: application/json. - Trate erros silenciosamente: se uma chamada falhar, mantenha os resumos substitutos e mostre uma pequena nota "IA indisponível". 8. REGRAS DE QUALIDADE - Nunca quebre rolagem, cliques, links ou seleção de texto no site. - Limpeza completa no desligamento: canvas, painel, destaques, spans de palavras envolvidas, estilos inline, listeners, observadores, temporizadores. - prefers-reduced-motion: sem corrupções, caminhada mais lenta. - JavaScript puro, sem bibliotecas. Arquivos: manifest.json, background.js, content.js, options.html, options.js, ícones (16, 48, 128). - Permissões: activeTab, scripting, storage. Permissão de host: https://api.anthropic.com/*. No final, dê os passos de instalação: abra chrome://extensions, ative o Modo do desenvolvedor, clique em "Carregar sem compactação", selecione a pasta, depois abra as opções e cole a chave de API.