Modubox HTML JavaScript注入器

Renders HTML code blocks on modubox.ai chat pages.

作者
橙青
日安装量
1
总安装量
3
评分
0 0 0
版本
0.14
创建于
2025-07-05
更新于
2025-07-06
大小
14.1 KB
许可证
暂无
适用于

// --- 免责声明和使用协议 ---
// 1. 本脚本按“原样”提供,不作任何明示或暗示的保证。
// 2. 用户需自行承担使用本脚本可能带来的所有风险,包括但不限于数据丢失、账户安全问题或与目标网站的服务条款发生冲突。
// 3. 脚本作者不对因使用或无法使用本脚本而导致的任何直接或间接损害负责。
// 4. 脚本渲染的所有内容均来自用户输入,其内容的合法性、安全性及可能产生的后果由内容提供者和脚本使用者承担。
// 5. 请勿将本脚本用于任何非法用途。继续使用本脚本即表示您同意并接受以上所有条款。
// --- 结束 ---
欢迎使用!本指南将帮助您轻松上手这款油猴插件,让您在 Modubox 网站上直接预览和运行HTML代码片段。

## 1. 这个插件做什么?

简单来说,当您在 Modubox 的聊天中看到或发送一段HTML代码时,这个插件会自动将它变成一个可以实时查看效果的“小窗口”(即 `iframe`)。您不需要复制粘贴代码到别处,可以直接在聊天页面看到渲染后的样子,比如一个按钮、一张图片或一个简单的交互效果。

## 2. 如何使用?

1. **安装插件**: 确保您已经在浏览器中安装了“油猴” (Tampermonkey) 扩展,然后安装此脚本。
2. **自动运行**: 安装后无需任何操作!只需正常访问 `https://modu.ai/p/chat/***` 页面。
3. **格式化代码**: 请确保您要渲染的HTML代码被三个反引号(```)包裹起来,形成一个代码块。例如:
```html

你好,世界!

点我
```
4. **查看效果**: 当您发送或看到符合上述格式的HTML代码块时,插件会自动在下方生成一个预览窗口。这个窗口的高度会自动调整,以适应内容的大小,非常方便。

## 3. 支持哪些代码?

您可以放心地使用大部分常见的网页代码,这个插件都能很好地处理它们。

### 支持的 HTML 和 CSS

- **所有基本HTML标签**: 比如 `

` (盒子), `` (文字片段), `` (图片), `` (按钮) 等等。
- **CSS样式**: 您可以直接在HTML标签里写 `style="..."`,也可以在代码里用 `` 标签来定义样式,插件都能正确显示。

### 支持的 JavaScript 类型

您可以把这个预览窗口想象成一个安全、独立的“小浏览器”。在这个小环境里,您可以运行很多类型的JavaScript代码,例如:

- **DOM 操作**: 您可以写代码来改变预览窗口里的内容,比如用 `document.getElementById()` 找到一个元素,然后修改它的文字或颜色。
- **事件监听**: 可以给按钮添加点击事件,比如 `button.addEventListener('click', ...)`,当您点击预览窗口里的按钮时,就会执行相应的操作。
- **简单的计算和逻辑**: 任何不依赖于外部网站数据或浏览器特殊功能的纯JavaScript代码都可以运行。

**简单来说,您可以创建一些有趣的、可交互的小组件!**

### 有什么限制吗?

为了安全起见,预览窗口里的JavaScript代码 **不能**:

- 直接访问或修改 Modubox 网站本身的内容。
- 读取您电脑上的本地文件。
- 随意跳转到其他网站。

这些限制确保了运行代码是安全的,不会对您的浏览器或账户造成风险。

## 4. 遇到问题怎么办?

- **预览窗口高度不对?** 插件会自动调整高度,但如果遇到特别复杂的内容(比如需要加载很多图片),可能需要一点点时间。刷新一下页面通常能解决问题。
- **代码没反应?** 检查一下您的HTML或JavaScript代码是否有拼写错误。您也可以按 `F12` 打开浏览器开发者工具,在“控制台” (Console) 中查看是否有错误信息。

希望这份指南能帮助您更好地使用本插件!