Apps

Creating Apps

What Is App Mode

Unlike user scripts, App mode generates standalone single-file HTML applications rather than page-injected scripts. Apps are complete web applications that run independently in the extension's sandbox.

App characteristics:

• Self-contained: CSS and JavaScript are fully inlined within the HTML file; no external dependencies.
• Local Storage: Uses localStorage/sessionStorage for data; no backend server needed.
• Responsive: Adapts to different screen sizes by default.
• Offline-capable: No network connection required.
• Privacy-safe: All data stays local; nothing is uploaded to any server.

Ideal for: calculators, to-do lists, note-taking tools, countdown timers, JSON formatters, color pickers, and other quick utilities.

AI Chat App Creation

1. Open the side panel and switch to App mode.
2. In the chat input, describe the app you want. Examples:
   • "Build me a Pomodoro timer with 25-min work + 5-min break"
   • "Make a Markdown editor with editing on the left and preview on the right"
   • "Create a habit tracker with a calendar heatmap"
3. The AI generates a complete HTML file and enters preview mode.
4. Test the functionality and appearance in preview; continue chatting to refine if needed.
5. Publish once satisfied.

Quick Create via Popup

1. Click the PageMod icon to open the popup.
2. Click "AI Write App", describe your needs and enter the app name.
3. The side panel opens and enters app creation mode.

Managing Apps

App List

On the settings page, you can see all created apps. Each shows its name and creation time.

Opening & Using Apps

• Click an app on the settings page to open it in the extension's sandbox page.
• Quick-launch apps from the popup as well.
• Apps run in an isolated sandbox environment, separate from the webpage context.

Editing Apps

1. Select the app in the side panel's Editor tab.
2. The app's HTML code can be modified in the CodeMirror editor.
3. Changes are auto-previewed with a 1-second debounce.
4. Same preview → publish → undo workflow as scripts.

App Settings

• Name: The app's display name.
• Icon: Choose an emoji as the app icon.
• Hidden: Optionally hide the app from the list.

Deleting Apps

Click delete in the app list. Deleting also clears the app's localStorage data.