> ## Documentation Index
> Fetch the complete documentation index at: https://docs.extensy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Prompting Guide

> Write prompts that produce great Chrome extensions. Covers anatomy, templates, and iteration strategy.

Extensy is only as powerful as your prompt. This guide covers how to structure your request, what to include, what to avoid, and how to refine results until your extension does exactly what you want.

## Anatomy of a great prompt

High-performing Extensy prompts follow this four-part structure:

**\[Action] + \[Target] + \[Behavior] + \[UI/Style]**

| Part | What it covers | Examples |
| :- | :- | :- |
| **Action** | What the extension does | Highlight, hide, summarize, alert, count |
| **Target** | Where it runs | All sites, `wikipedia.org`, a specific element |
| **Behavior** | When it triggers | On page load, on toolbar click, on message |
| **UI/Style** | What it looks like | Floating badge, popup with buttons, specific colors |

## Bad vs. good prompt examples

**Highlighting prices**

```text Bad theme={null}
Make an extension that highlights prices.
```

```text Good theme={null}
Build a Chrome extension that scans every webpage for currency symbols ($, £, €) and wraps those numbers in a span with a light green background. Show a floating badge in the bottom-right corner with the total count of prices found.
```

The bad prompt gives the AI nothing to work with — no target, no trigger, no UI. The good prompt specifies the symbols to detect, the visual treatment, and the badge location.

**Tab management**

```text Bad theme={null}
Manage my tabs for me.
```

```text Good theme={null}
Build a Chrome extension with a popup that lists all open tabs in the current window. Each row should show the tab title and include two buttons: a "Go to" button that switches to that tab, and a "Close" button that closes it.
```

The bad prompt is too abstract. The good prompt defines the UI layout, the data to display, and exactly what each action does.

**API integration**

```text Bad theme={null}
Make an extension that uses the OpenAI API.
```

```text Good theme={null}
Build a Chrome extension with a popup containing a text input and a "Summarize" button. When clicked, send the selected text from the current page to the OpenAI Chat Completions API using an API key stored in chrome.storage. Display the response in a scrollable div below the button.
```

The good prompt specifies the UI, the trigger, where the API key comes from, and where the response appears.

## Prompt templates by category

Use these as starting points and fill in the bracketed sections.

> **Content modifier**
>
> ```text theme={null}
> Build a Chrome extension that [action, e.g., inverts colors / hides images / enlarges fonts] on [target, e.g., wikipedia.org / all pages] and shows [UI element, e.g., a toggle button in the popup / a floating badge].
> ```
>
> **Good for:** reading tools, accessibility adjustments, site-specific style overrides.

> **Productivity tool**
>
> ```text theme={null}
> Build a Chrome extension that [tracks / blocks / reminds me about] [target, e.g., time spent on youtube.com / social media sites] and displays [metric, e.g., daily time spent] in [location, e.g., a popup / a badge on the toolbar icon].
> ```
>
> **Good for:** time trackers, site blockers, focus aids, habit reminders.

> **API integration**
>
> ```text theme={null}
> Build a Chrome extension that calls [API endpoint, e.g., the OpenAI Chat Completions API] with [auth method, e.g., an API key saved in chrome.storage from the options page] and shows the result in [location, e.g., a popup / an injected side panel on the page].
> ```
>
> **Good for:** AI-powered tools, data lookups, translation, content enrichment.

> **Tab manager**
>
> ```text theme={null}
> Build a Chrome extension that [groups / closes / saves / deduplicates] tabs [based on condition, e.g., with duplicate URLs / in the same domain] triggered by [interface, e.g., a popup button / the keyboard shortcut Ctrl+Shift+K].
> ```
>
> **Good for:** tab organization, session saving, workspace management.

## What to include

* **Website URLs** — If your extension targets a specific site, name it: `twitter.com`, `github.com`, `wikipedia.org`.
* **Visual details** — Colors, positions (top-left, bottom-right), button labels, font sizes.
* **Trigger conditions** — "Run on page load" vs. "only when I click the toolbar icon" — these produce very different code.
* **DOM selectors** — If you know a CSS class name, element ID, or ARIA label, include it. The AI will use it directly rather than guessing.
* **Storage needs** — If your extension needs to remember settings (like an API key or a toggle state), mention that you want to use `chrome.storage`.

## What not to include

* **Backend logic** — Extensy generates Chrome extensions, which run entirely client-side. It cannot host a database, manage server-side sessions, or provide API keys on your behalf.
* **OAuth flows** — Full OAuth redirect flows require a backend server. Extensy can generate the client-side portion, but you need to provide and host the OAuth server yourself.
* **System-level actions** — Chrome extensions are sandboxed. They cannot delete files, control other applications, or access OS settings.

> [!NOTE]
>
> Extensy handles frontend and client-side logic. For anything that requires a running server — databases, authentication backends, webhook listeners — you need to supply your own API endpoints and pass them into the prompt.

## Iteration strategy

Your first generation rarely needs to be perfect. If the result is 80% there, use a refinement prompt rather than starting over.

A good refinement prompt references what already exists and adds one specific change:

> "The extension I just generated highlights prices in green. Now add a button to the popup labeled 'Clear highlights' that removes all highlight spans from the current page."

> "The popup timer works, but the font is too small to read comfortably. Increase the font size of the countdown display to 48px."

> "The tab list shows all open tabs, but I also want tabs from other windows. Update the extension to show tabs across all windows, grouped by window."

> [!TIP]
>
> Add one feature at a time. Refinement prompts that target a single change are faster to generate, easier to test, and less likely to break what's already working.

> **[Edit & iterate](https://docs.extensy.dev/using-extensy/editing-and-iterating.md)**
>
> Deeper guide on re-prompting, manual edits, and knowing when to use each.

> **[First extension](https://docs.extensy.dev/using-extensy/your-first-extension.md)**
>
> Walk through a complete example from prompt to tested extension.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.