Media Toolkit — extensão com Whisper rodando no navegador

🚧 Ainda fora da loja — funcional como extensão unpacked; a publicação na Chrome Web Store está no roadmap.

Quem produz conteúdo vive garimpando referência: aquele Reel com uma fala boa, o vídeo do YouTube que merecia virar citação. O Media Toolkit é uma extensão de navegador que injeta superpoderes direto no Instagram e no YouTube: copiar imagem, baixar vídeo, extrair áudio em WAV e — a parte divertida — gerar transcrição com IA rodando inteiramente no seu navegador.

Nenhuma API paga, nenhum servidor: o modelo Whisper roda local via Transformers.js + ONNX WebAssembly.

O que ela faz

• Instagram: copiar imagem do post (canvas → PNG → clipboard), baixar vídeo em MP4, extrair só o áudio como WAV, e transcrever por IA quando não há legenda — com progresso em tempo real.
• YouTube: painel de transcrição a partir das legendas nativas, com troca de idioma.
• Painel compartilhado: busca no texto, copiar tudo com timestamps, clique na linha faz seek no vídeo, e a linha ativa acompanha o player.

Arquitetura

Manifest V3 impõe restrições duras — e a arquitetura é essencialmente uma resposta a elas:

Visão de componentes:

Fluxo de uma transcrição no Instagram:

Problemas & soluções que valem a pena contar

Instagram não entrega a URL do vídeo. Ela não está no DOM. A solução varre a árvore de fibers do React (__reactFiber$) a partir dos elementos <video>, procurando video_versions e manifesto DASH — com busca em profundidade limitada e proteção contra ciclos. Isso exige rodar no mundo MAIN (world: "MAIN"), porque os internals do React são invisíveis para o mundo isolado do content script. E quando o React não coopera, há fallback duplo: re-fetch do HTML da página ou conversão do shortcode em media ID numérico para a API interna.

Whisper em Manifest V3. Service worker MV3 não pode criar Web Workers de módulo com WASM. A saída: um documento offscreen (reasons: ["WORKERS"]) que hospeda o worker do Whisper, com CSP liberando wasm-unsafe-eval e host permissions para baixar o modelo do HuggingFace na primeira utilização. O pipeline de áudio (decodificação, resample para 16 kHz mono via OfflineAudioContext) roda todo no browser.

Sobrevivendo a SPAs hostis. Instagram e YouTube trocam de página sem recarregar. A extensão combina eventos de navegação do YouTube (yt-navigate-finish), popstate e polling; a re-injeção é idempotente (função de cleanup global) e um wrapper safeSendMessage engole o clássico "Extension context invalidated" quando a extensão atualiza no meio da sessão.

Stack

JavaScript vanilla (zero framework, zero bundler) · Manifest V3 · Transformers.js + ONNX Runtime WASM · Whisper-small (q8) · APIs: offscreen, downloads, scripting, clipboard.

Status

Funcional carregada como unpacked. Para a loja, faltam os ritos: unificar naming, política de privacidade, justificativa de permissões e avaliar o peso do runtime WASM (~24 MB) no pacote.