App

创建 App

什么是 App 模式

App 模式与用户脚本不同，它生成独立的单文件 HTML 应用，而非注入网页的脚本。App 是完整的网页应用，可以在扩展的沙盒环境中独立运行。

App 的特性：

• 自包含：CSS 和 JavaScript 全部内联在 HTML 文件中，没有外部依赖。
• 本地存储：使用 localStorage/sessionStorage 存储数据，无需后端服务器。
• 响应式：默认适配不同屏幕尺寸。
• 离线可用：不依赖网络连接。
• 隐私安全：数据完全在本地，不会上传到任何服务器。

适合场景：计算器、待办清单、笔记工具、倒计时器、JSON 格式化工具、颜色选择器等快速实用工具。

AI 对话创建 App

1. 打开侧边栏，切换到App 模式。
2. 在聊天输入框中描述你想要的应用功能。例如：
   • "帮我做一个番茄钟计时器，25 分钟工作 + 5 分钟休息"
   • "做一个 Markdown 编辑器，左边编辑右边预览"
   • "做一个习惯追踪器，用日历热力图展示"
3. AI 生成完整的 HTML 文件并进入预览模式。
4. 在预览中测试功能、外观，不满意可以继续对话调整。
5. 确认满意后发布。

弹出窗口快速创建 App

1. 点击 PageMod 图标打开弹出窗口。
2. 点击"新建 App"，输入需求描述和 App 名称。
3. 侧边栏自动打开并进入 App 创建模式。

管理 App

App 列表

在设置页面中可以看到所有已创建的 App。每个 App 显示名称和创建时间。

打开与使用 App

• 在设置页面点击 App 即可在扩展的沙盒页面中打开运行。
• 在弹出窗口中也有 App 的快捷入口。
• App 在独立的沙盒环境中运行，与网页上下文隔离。

编辑 App

1. 在侧边栏的编辑器 Tab 中选择要编辑的 App。
2. App 的 HTML 代码可以在 CodeMirror 编辑器中修改。
3. 修改后自动预览，1 秒防抖更新。
4. 与脚本类似，支持预览 → 发布 → 撤销的工作流。

App 设置

• 名称：App 的显示名称。
• 图标：可选择 emoji 作为 App 图标。
• 隐藏：可选择将 App 从列表中隐藏。

删除 App

在 App 列表中点击删除。删除时存储的 localStorage 数据也会被清除。