☰

Modubox HTML JavaScript注入器

Renders HTML code blocks on modubox.ai chat pages.

当前为 2025-07-06 提交的版本，查看 最新版本。

作者
橙青
评分
0 0 0
版本
0.13
创建于
2025-07-05
更新于
2025-07-06
大小
13.4 KB
许可证
暂无
适用于

欢迎使用！本指南将帮助您轻松上手这款油猴插件，让您在 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) 中查看是否有错误信息。

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