Neph3w/realize-dom-injector

# ⚙️ Realize DOM Injector – Tampermonkey 用户脚本           ## 📌 项目描述 本项目是一个为 **Tampermonkey 开发的用户脚本**，旨在自动化 **Realize** (`realize.pro.br`) 平台上重复性的内容格式化任务。 该脚本基于**平台逆向工程**构建：分析了 TinyMCE 编辑器的 iframe 结构，解码了交互式块专有的 JSON 格式，并映射了内容保存行为。整个开发过程无需访问源代码或平台文档。 ## 🚀 技术与概念应用 - **JavaScript (ES2020+)** — 脚本的核心逻辑 - **Tampermonkey API** — 在页面上下文中注入代码 - **DOM Manipulation** — 直接操作 iframe 内的文档 - **TinyMCE Editor** — 识别并在嵌入式编辑器内执行操作 - **Cross-Origin Iframe Access** — 访问和修改同源 iframe 中的文档 - **Canvas API** — 将 DOM 中的图像转换为 base64，并带有 CORS 降级回退处理 - **URL Encoding/Decoding** — 处理平台专有的数据格式（`encodeURI` 与 `encodeURIComponent`），针对双重编码的文本实现稳健的多轮解码 - **Multimodal AI (Vision)** — 通过 Gemini、Claude 和 GPT-4o 将图像发送给视觉模型 - **Gemini API / Claude API / OpenAI API** — 集成多个 AI 提供商以处理文本和视觉 - **DOMParser** — 将外部 HTML 解析为临时文档以提取内容；也用于通过 mammoth.js 导入 `.docx` - **mammoth.js** — 在浏览器中将 `.docx` 文件转换为 HTML，通过 CDN 动态加载 - **Keyboard Event Interception** — 拦截 `` 中的 `Ctrl+B` 以切换加粗标记 ## ⚙️ 技术挑战 ### 🔍 平台逆向工程 Realize 的编辑器将内容加载到**没有 `src` 属性的 iframe**（嵌入式 TinyMCE 编辑器）中。平台所有的交互式块都存储为 `<div>`，其 `data-interaction="true"` 属性内部包含一个**带有 URL 编码值的 JSON**： ``` <div class="T-FIGURA" data-interaction="true"> <div>{"titulo":"T%C3%ADtulo","imagem":"https://...","fonte":"Pixabay%20(2022)."}</div> Figura </div> ``` 相同的模式也重复应用于问题块 (`Q-QUESTION`)、折叠块 (`I-ZSANFONA`)、标签块 (`I-ABA`)、垂直列表 (`I-LISTA-VERTICAL`)、高亮块 (`D-DESTAQUE`) 等——每一个都有其内部的 JSON 结构。该脚本直接在 iframe 的 DOM 中检测、解析并操作这些块。 ### 🖼️ 通过 Canvas 提取图像 (Vision) 为了将编辑器中的图像发送给 AI 视觉 API，脚本使用 `canvas.toDataURL()` 将 `<img>` 元素转换为 base64。由于图像托管在外部域名 (`storage-realize.s3.amazonaws.com`)，canvas 可能会被标记为 *tainted*（污染）并抛出 `SecurityError`。该脚本按顺序实现了两种策略： 1. 直接在 DOM 中绘制已加载的 `<img>` 2. 使用 `crossOrigin="anonymous"` 重新加载以强制执行 CORS header ### 🧩 通过 DOM 生成交互式块 交互式块的确切编码格式是通过对平台保存的 HTML 与编辑器行为进行对比分析而映射出来的。平台对 JSON 值使用 `encodeURI`（而不是 `encodeURIComponent`）——如果忽略这一差异，会导致向学生渲染的内容出现乱码（例如：逗号显示为 `%2C`，斜杠显示为 `%2F`）。 ### 🔤 稳健的文本解码 从平台编辑器复制的文本通常带有部分或双重编码（例如：`%252C` → `%2C` → `,`）。该脚本实现了一个逐 token 的解码循环，该循环会不断迭代直到文本稳定，涵盖任何深度的编码，且不会在带有重音符号的混合文本中抛出异常。 ### 📌 交互式块分隔符检测 将纯文本转换为折叠块/标签块/列表块时，支持不同内容来源中存在的多种标题/内容分隔模式：`:` 分隔符，长破折号 ` – `，纯标题 `<strong>`，与内容合并在同一段落内的内联 `<strong>`，以及作为标题标记的 `<ul><li>`。无法识别的情况将发送给 AI 以进行标题识别。 ### 📄 带有交互式块的 .docx 导入 Word 导入使用 **mammoth.js** 将 `.docx` 转换为 HTML，然后脚本对其进行处理，以检测文本中的 Realize 块标记（例如：`"Destaque"`、`"Sanfona"`、`"Lista Vertical"`）。解析器收集开始标记和结束标记之间的内容，并以正确的格式构建平台专有的 JSON——无需任何服务器交互，完全在浏览器中完成。 ## 📦 功能特性 | 功能 | 描述 | |---|---| | ✅ **格式化图片** | 将 `T-FIGURA` 块转换为包含标题、图像和来源的标准 HTML | | 🖼️ **居中图像** | 居中选定内容或整个页面中带有标题和来源的图像；检测并将 headings 转换为 `<p>` | | ↕️ **增加段落间距** | 在段落之间添加空行，同时保留交互式块和表格 | | ✂️ **增加选定内容间距** | 仅对当前所选内容的段落应用间距 | | 📋 **文本 → 块** | 将选定的段落转换为**折叠块**、**垂直列表**或**标签块**；检测 `:`、` – `、`<strong>` 作为标题，以及 `<ul>` 作为标记；将不明确的标题发送给 AI 处理 | | 🔀 **格式化列表** | 检测所选内容中的标题+段落对（包括作为标题的 `<ul><li>`），并将它们合并为单个 `<p><strong>标题:</strong> 内容</p>` | | 🔗 **格式化链接** | 将暴露的 URL 替换为带有短域名、`target="_blank"` 和 `rel="noopener"` 的可点击链接 | | 📊 **图像 → 表格** | 将表格图像发送给具备视觉能力的 AI，并返回带有 `<thead>`/`<tbody>` 的可编辑 HTML `<table>` | | 📚 **格式化参考引用** | 将选定的参考文献发送给 AI，并返回带有加粗、链接和间距的 ABNT 格式 HTML | | ❓ **生成题目** | 粘贴纯文本题目，发送给 AI 并生成包含题目描述、内容（断言 I/II/III、FONTE）、选项和正确答案的 `Q-QUESTION` 块 | | 📄 **导入 Word** | 通过 mammoth.js 将 `.docx` 转换为 HTML 并将内容插入编辑器中，自动检测文本中标记的交互式块 | | ↩️ **撤销** | 撤销当前会话中执行的所有操作 | ## 📄 功能：导入 Word 允许直接在 Realize 编辑器中导入 `.docx` 文件，无需手动复制和粘贴。脚本在首次使用时通过 CDN 加载 **mammoth.js**，并在浏览器内部将其转换为 HTML。 **流程：** 1. 点击 **📄 Importar .docx** 打开文件选择器 2. 选择 `.docx` 文件 3. 内容被转换并插入到编辑器当前的光标位置 **自动识别的交互式块：** 要让脚本从 Word 创建交互式块，只需将内容包裹在两行包含块名称（带引号）的文本之间即可： ``` "Destaque" Texto do destaque aqui. "Destaque" "Sanfona" Título do item Conteúdo do item "Sanfona" ``` | Word 中的标记 | 生成的块 | |---|---| | `"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>`) | ## ❓ 功能：生成题目 脚本中最复杂的功能。接受任何纯文本格式粘贴的题目，并生成平台原生的 `Q-QUESTION` 块。 **流程：** 1. 点击 **❓ Gerar questões** 在面板中打开一个 `<textarea>` 2. 粘贴题目文本（单个或多个） 3. 使用 `**加粗**`（通过 textarea 中的 `Ctrl+B`）或 `( x )` 标记正确选项 4. 点击 **✅ Gerar blocos** — AI 进行解析并将块插入编辑器 **支持的选项格式：** | 输入格式 | 结果 | |---|---| | `a) ( ) Texto` | `a) Texto` | | `a) ( x ) Texto` *(正确)* | `a) Texto` + `correct: 1` | | `**a) Texto**` *(通过 Ctrl+B 标记为正确)* | `a) Texto` + `correct: 1` | | `1. Texto` / `2. Texto` | 转换为 `a)` / `b)` | | 无前缀（连续行） | 按顺序分配 `a)` / `b)` / `c)` / `d)` | **存入 `conteudo` 字段的内容：** - 断言 `I-`、`II-`、`III-` | 带有 `( )` 的行（用于判断 V/F（对/错）） | 题目中的 `FONTE: ...` 行 | `Assinale a alternativa...` 行 **自动清理操作：** - 从选项文本中移除 `( x )` 和 `( )`（平台布局已经会渲染它们） - 带有 URL 编码的文本（`%2C`、`%3F` 等）在发送给 AI 之前会被解码 - 在 `conteudo` 的每个项目之间插入 ` ` 段落以实现视觉间距 ## 🤖 AI 集成 脚本在所有涉及 AI 的功能中支持三个提供商： | Provider | 模型 | 文本 | 视觉（图像） | 免费计划 | |---|---|---|---|---| | **Gemini** (Google AI Studio) | `gemini-2.5-flash` | ✅ | ✅ | ✅ 可用 | | **Claude** (Anthropic) | `claude-sonnet-4-5` | ✅ | ✅ | ❌ 需要额度 | | **ChatGPT** (OpenAI) | `gpt-4o-mini` | ✅ | ✅（通过 URL） | ❌ 需要额度 | API 密钥保存在浏览器的 `localStorage` 中。所有调用 AI 的操作在遇到速率限制时都会实现**自动重试**，并在脚本面板上显示可见的倒计时。 **使用 AI 的功能：** | 功能 | 用途 | |---|---| | 📊 图像 → 表格 | 多模态视觉 — 从图像中提取表格 | | 📚 格式化参考引用 | 文本 — 将其格式化为带有加粗和链接的 ABNT 标准 | | 📋 文本 → 块 | 文本 — 识别没有可识别分隔符的标题 | | ❓ 生成题目 | 文本 — 解析题目描述、内容、选项和正确答案 | ## 🔧 安装 **前提条件：** 浏览器中已安装 [Tampermonkey](https://www.tampermonkey.net/) 扩展。 1. 访问 Tampermonkey → **创建新脚本** (Criar novo script) 2. 删除默认内容并粘贴 `realize-dom-injector.user.js` 文件的内容 3. 使用 `Ctrl+S` 保存 4. 访问 Realize 平台 — 面板将自动出现在右下角 ## 📁 仓库结构 ``` realize-dom-injector/ ├── realize-dom-injector.user.js # Script principal (Tampermonkey) └── README.md ``` *本项目专为自动化编辑工作流程而开发。演示了 Web 应用程序分析、跨域上下文中的 DOM 操作、绕过浏览器安全限制（污染 canvas、CORS）、集成多模态 AI API、专有数据格式逆向工程，以及将 Word 文档转换为平台原生格式的过程。*</div><div><strong>标签：</strong>CMS安全, DOM操作, JavaScript, Petitpotam, TinyMCE, 云资产清单, 浏览器插件, 浏览器自动化, 用户脚本, 自定义脚本, 逆向工程</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>