Neph3w/realize-dom-injector

# ⚙️ Realize DOM Injector – Tampermonkey Userscript           ## 📌 Descrição do Projeto Este projeto é um **userscript para o Tampermonkey** desenvolvido para automatizar tarefas repetitivas de formatação de conteúdo na plataforma **Realize** (`realize.pro.br`). O script foi construído a partir da **engenharia reversa da plataforma**: análise da estrutura de iframes do editor TinyMCE, decodificação do formato JSON proprietário dos blocos interativos e mapeamento do comportamento de salvamento do conteúdo. Todo o desenvolvimento foi feito sem acesso ao código-fonte ou documentação da plataforma. ## 🚀 Tecnologias e Conceitos Utilizados - **JavaScript (ES2020+)** — lógica principal do script - **Tampermonkey API** — injeção de código no contexto da página - **DOM Manipulation** — manipulação direta do documento dentro de iframes - **TinyMCE Editor** — identificação e operação dentro do editor embutido - **Cross-Origin Iframe Access** — acesso e modificação de documentos em iframes same-origin - **Canvas API** — conversão de imagens do DOM para base64 com fallback de CORS - **URL Encoding/Decoding** — manipulação do formato proprietário de dados da plataforma (`encodeURI` vs `encodeURIComponent`), decode robusto em múltiplas passagens para textos com encoding duplo - **Multimodal AI (Vision)** — envio de imagens para modelos de visão via Gemini, Claude e GPT-4o - **Gemini API / Claude API / OpenAI API** — integração com múltiplos provedores de IA para texto e visão - **DOMParser** — parse de HTML externo em documento temporário para extração de conteúdo; também utilizado na importação de `.docx` via mammoth.js - **mammoth.js** — conversão de arquivos `.docx` para HTML no navegador, carregado dinamicamente via CDN - **Keyboard Event Interception** — captura de `Ctrl+B` dentro de `` para toggle de marcação negrito ## ⚙️ Desafios Técnicos ### 🔍 Engenharia Reversa da Plataforma O editor da Realize carrega o conteúdo dentro de um **iframe sem atributo `src`** (editor TinyMCE embutido). Todos os blocos interativos da plataforma são armazenados como `<div>` com `data-interaction="true"` contendo um **JSON com valores URL-encoded** internamente: <div class="T-FIGURA" data-interaction="true"> <div>{"titulo":"T%C3%ADtulo","imagem":"https://...","fonte":"Pixabay%20(2022)."}</div> Figura </div> O mesmo padrão se repete para blocos de questão (`Q-QUESTION`), sanfona (`I-ZSANFONA`), aba (`I-ABA`), lista vertical (`I-LISTA-VERTICAL`), destaques (`D-DESTAQUE`), entre outros — cada um com sua estrutura JSON interna. O script detecta, parseia e manipula esses blocos diretamente no DOM do iframe. ### 🖼️ Extração de Imagem via Canvas (Vision) Para enviar imagens do editor para a API de visão da IA, o script converte o elemento `<img>` para base64 usando `canvas.toDataURL()`. Como as imagens estão hospedadas em domínio externo (`storage-realize.s3.amazonaws.com`), o canvas pode ser marcado como *tainted* e lançar `SecurityError`. O script implementa duas estratégias em cascata: 1. Desenho direto do `<img>` já carregado no DOM 2. Recarregamento com `crossOrigin="anonymous"` para forçar header CORS ### 🧩 Blocos Interativos Gerados via DOM O formato exato de encoding dos blocos interativos foi mapeado por análise comparativa entre o HTML salvo pela plataforma e o comportamento do editor. A plataforma usa `encodeURI` (não `encodeURIComponent`) para os valores JSON — diferença que, se ignorada, causa caracteres corrompidos no conteúdo renderizado ao aluno (ex: vírgulas aparecem como `%2C`, barras como `%2F`). ### 🔤 Decode Robusto de Texto Textos copiados do editor da plataforma frequentemente chegam com encoding parcial ou duplo (ex: `%252C` → `%2C` → `,`). O script implementa um loop de decode token a token que itera até o texto estabilizar, cobrindo qualquer profundidade de encoding sem lançar exceções em textos mistos com caracteres acentuados. ### 📝 Detecção de Separadores para Blocos Interativos A conversão de texto corrido em blocos sanfona/aba/lista suporta múltiplos padrões de separação título/conteúdo presentes em diferentes origens de conteúdo: separador `:`, travessão ` – `, `<strong>` como título puro, `<strong>` inline com conteúdo no mesmo parágrafo, e `<ul><li>` como marcador de título. Casos não reconhecidos são enviados à IA para identificação do título. ### 📄 Importação de .docx com Blocos Interativos A importação de Word utiliza **mammoth.js** para converter o `.docx` em HTML, que é então processado pelo script para detectar marcadores de bloco Realize no texto (ex: `"Destaque"`, `"Sanfona"`, `"Lista Vertical"`). O parser coleta o conteúdo entre o marcador de abertura e o de fechamento e monta o JSON proprietário da plataforma no formato correto — sem nenhuma interação do servidor, inteiramente no navegador. ## 📦 Funcionalidades | Função | Descrição | |---|---| | ✅ **Formatar Figuras** | Converte blocos `T-FIGURA` em HTML padrão com título, imagem e fonte | | 🖼️ **Centralizar Imagens** | Centraliza imagens com título e fonte na seleção ou na página toda; detecta e converte headings em `<p>` | | ↕️ **Espaçar Parágrafos** | Adiciona linha em branco entre parágrafos, respeitando blocos interativos e tabelas | | ✂️ **Espaçar Seleção** | Aplica espaçamento apenas nos parágrafos da seleção atual | | 📋 **Texto → Bloco** | Converte parágrafos selecionados em blocos **Sanfona**, **Lista Vertical** ou **Aba**; detecta separadores `:`, ` – `, `<strong>` como título, e `<ul>` como marcador; chama IA para títulos ambíguos | | 🔀 **Formatar Listas** | Detecta pares título+parágrafo na seleção (incluindo `<ul><li>` como título) e une em um único `<p><strong>Título:</strong> conteúdo</p>` | | 🔗 **Formatar Links** | Substitui URLs expostas por links clicáveis com domínio curto, `target="_blank"` e `rel="noopener"` | | 📊 **Imagem → Tabela** | Envia imagem de tabela para IA com visão e retorna HTML `<table>` editável com `<thead>`/`<tbody>` | | 📚 **Formatar Referências** | Envia referências selecionadas para IA e retorna HTML formatado em ABNT com negrito, links e espaçamento | | ❓ **Gerar Questões** | Cola questões em texto bruto, envia para IA e gera blocos `Q-QUESTION` com enunciado, conteúdo (afirmativas I/II/III, FONTE), alternativas e resposta correta | | 📄 **Importar Word** | Converte `.docx` para HTML via mammoth.js e insere o conteúdo no editor, detectando automaticamente blocos interativos marcados no texto | | ↩️ **Desfazer** | Reverte todas as operações realizadas na sessão atual | ## 📄 Função: Importar Word Permite importar arquivos `.docx` diretamente no editor da Realize sem copiar e colar manualmente. O script carrega **mammoth.js** via CDN na primeira utilização e o converte para HTML internamente no navegador. **Fluxo:** 1. Clicar em **📄 Importar .docx** abre o seletor de arquivo 2. Selecionar o arquivo `.docx` 3. O conteúdo é convertido e inserido no cursor atual do editor **Blocos interativos reconhecidos automaticamente:** Para que o script crie um bloco interativo a partir do Word, basta envolver o conteúdo entre duas linhas com o nome do bloco entre aspas: "Destaque" Texto do destaque aqui. "Destaque" "Sanfona" Título do item Conteúdo do item "Sanfona" | Marcador no Word | Bloco gerado | |---|---| | `"Destaque"` | `D-DESTAQUE` | | `"Caixa"` | `D-CAIXA` | | `"Técnico"` | `D-PROGRAMACAO` | | `"Recuo"` | `D-CDIRETA` | | `"Saiba Mais"` | `U-SAIBAMAIS` | | `"Atenção"` | `U-ATENCAO` | | `"Interlocução"` | `U-INTERLOCUCAO` | | `"Sanfona"` | `I-ZSANFONA` | | `"Aba"` | `I-ABA` | | `"Lista Vertical"` | `I-LISTA-VERTICAL` | | `"Tópico"` | `E-TOPICO` | | `"Subtítulo"` | `e-subtitle` (`<h5>`) | ## ❓ Função: Gerar Questões A função mais complexa do script. Aceita questões coladas em qualquer formato de texto bruto e gera os blocos `Q-QUESTION` nativos da plataforma. **Fluxo:** 1. Clicar em **❓ Gerar questões** abre um `<textarea>` no painel 2. Colar o texto das questões (uma ou múltiplas) 3. Marcar a alternativa correta com `**negrito**` (via `Ctrl+B` no textarea) ou `( x )` 4. Clicar **✅ Gerar blocos** — a IA parseia e os blocos são inseridos no editor **Formatos de alternativa suportados:** | Formato de entrada | Resultado | |---|---| | `a) ( ) Texto` | `a) Texto` | | `a) ( x ) Texto` *(correta)* | `a) Texto` + `correct: 1` | | `**a) Texto**` *(correta via Ctrl+B)* | `a) Texto` + `correct: 1` | | `1. Texto` / `2. Texto` | Convertido para `a)` / `b)` | | Sem prefixo (linhas sequenciais) | Atribuído `a)` / `b)` / `c)` / `d)` em ordem | **O que vai para o campo `conteudo`:** - Afirmativas `I-`, `II-`, `III-` - Linhas com `( )` para V/F - Linha `FONTE: ...` da questão - Linha `Assinale a alternativa...` **Sanitizações automáticas:** - `( x )` e `( )` removidos do texto das alternativas (o layout da plataforma já os renderiza) - Textos com encoding URL (`%2C`, `%3F` etc.) decodificados antes de enviar à IA - Parágrafo ` ` inserido entre cada item do `conteudo` para espaçamento visual ## 🤖 Integração com IA O script suporta três provedores para todas as funções que envolvem IA: | Provider | Modelo | Texto | Visão (Imagem) | Plano Gratuito | |---|---|---|---|---| | **Gemini** (Google AI Studio) | `gemini-2.5-flash` | ✅ | ✅ | ✅ Disponível | | **Claude** (Anthropic) | `claude-sonnet-4-5` | ✅ | ✅ | ❌ Requer créditos | | **ChatGPT** (OpenAI) | `gpt-4o-mini` | ✅ | ✅ (via URL) | ❌ Requer créditos | A chave de API é salva no `localStorage` do navegador. Todas as chamadas com IA implementam **retry automático** em caso de rate limit, com contagem regressiva visível no painel do script. **Funções que usam IA:** | Função | Uso | |---|---| | 📊 Imagem → Tabela | Visão multimodal — extrai tabela da imagem | | 📚 Formatar Referências | Texto — formata em ABNT com negrito e links | | 📋 Texto → Bloco | Texto — identifica título de parágrafos sem separador reconhecível | | ❓ Gerar Questões | Texto — parseia enunciado, conteúdo, alternativas e resposta correta | ## 🔧 Instalação **Pré-requisito:** Extensão [Tampermonkey](https://www.tampermonkey.net/) instalada no navegador. 1. Acesse o Tampermonkey → **Criar novo script** 2. Apague o conteúdo padrão e cole o conteúdo do arquivo `realize-dom-injector.user.js` 3. Salve com `Ctrl+S` 4. Acesse a plataforma Realize — o painel aparece automaticamente no canto inferior direito ## 📁 Estrutura do Repositório realize-dom-injector/ ├── realize-dom-injector.user.js # Script principal (Tampermonkey) └── README.md *Projeto desenvolvido para automação de fluxo de trabalho editorial. Demonstra análise de aplicações web, manipulação de DOM em contexto cross-origin, contorno de restrições de segurança do browser (tainted canvas, CORS), integração com APIs de IA multimodal, engenharia reversa de formatos proprietários de dados e conversão de documentos Word para o formato nativo da plataforma.*</div><div><strong>标签：</strong>自定义脚本</div></article></div> <!-- 人机验证 --> <script> (function () { var base = (document.querySelector('base') && document.querySelector('base').getAttribute('href')) || ''; var path = base.replace(/\/?$/, '') + '/cap-wasm/cap_wasm.min.js'; window.CAP_CUSTOM_WASM_URL = new URL(path, window.location.href).href; })(); </script> </body> </html>