Modubox HTML JavaScript注入器

Renders HTML code blocks on modubox.ai chat pages.

Pada tanggal 06 Juli 2025. Lihat %(latest_version_link).

Penulis
橙青
Nilai
0 0 0
Versi
0.12
Dibuat
05 Juli 2025
Diperbarui
06 Juli 2025
Size
13,4 KB
Lisensi
N/A
Berlaku untuk

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

希望这份指南能帮助您更好地使用本插件!
下面是我使用成功的状态栏代码可以作为参考:
```下拉状态栏

已连接

12:00:00


查看消息 (0)



```