> ## 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.

# First Extension

> Build and test your first Chrome extension with Extensy in minutes.

You have an idea. Now build it. This guide walks you through writing your first prompt, understanding what gets generated, and testing the result live in Chrome.

## Pick something to build

Not sure where to start? These three prompts are beginner-friendly — each produces a complete, testable extension with immediate, visible results.

> **Price highlighter**
>
> **Prompt:** "Build a Chrome extension that highlights every price on a webpage in green and shows a floating badge in the bottom-right corner with the total count of prices found."
>
> **What gets generated:** A `content.js` file that scans the page for currency symbols (`$`, `£`, `€`), wraps matching text in a styled `<span>`, and injects a floating badge into the DOM.

> **Focus timer popup**
>
> **Prompt:** "Build a 25-minute Pomodoro timer in a popup. It should have Start, Pause, and Reset buttons and show a browser notification when time is up."
>
> **What gets generated:** A `popup.html`, `popup.css`, and `popup.js` with a countdown timer. A `background.js` service worker keeps the timer running even when the popup is closed.

> **Dark mode toggle**
>
> **Prompt:** "Build an extension with a toolbar button that toggles dark mode on the current webpage by inverting all colors."
>
> **What gets generated:** An action-based extension that uses `chrome.scripting.executeScript` to inject a CSS filter into the active tab on each toolbar click.

## Write your prompt

Open the Extensy editor and describe what you want. The more specific you are, the better the output.

A strong first prompt covers four things:

1. **Goal** — "Build a Chrome extension that..."
2. **Target** — "...on wikipedia.org" or "...on every webpage"
3. **Action** — "...highlights all prices" or "...shows a popup with a timer"
4. **UI** — "...with a green floating badge in the bottom-right corner"

> [!TIP]
>
> You don't need to know any code. Write the prompt the same way you'd explain the idea to a friend.

## Generate the extension

Click **Generate**. Extensy's AI pipeline analyzes your request and produces a complete extension package — manifest, scripts, popup files, and icons. Generation typically takes 10–30 seconds.

## What you get

Every generated extension is a complete Chrome extension package following Manifest V3. Depending on your prompt, it may include:

| File | Purpose |
| :- | :- |
| `manifest.json` | Extension config — name, permissions, entry points |
| `popup.html` / `popup.css` / `popup.js` | The UI that appears when you click the toolbar icon |
| `content.js` | Script injected into webpages to modify the DOM |
| `background.js` | Service worker that handles background events |
| `icons/` | Extension icons at 16×16, 48×48, and 128×128 px |

> [!NOTE]
>
> Not every extension needs all these files. A simple popup tool may have no `content.js`. Extensy only generates what your prompt actually requires.

## Download and load in Chrome

**1. Download the ZIP**

Click **Download ZIP** from the Extensy dashboard and save the file to your computer. Extract it into a regular folder.

**2. Open chrome://extensions**

Navigate to `chrome://extensions` in Chrome.

**3. Enable Developer mode**

Toggle **Developer mode** on in the top-right corner.

**4. Load unpacked**

Click **Load unpacked** and select the unzipped folder.

## Test it

Open a tab that matches your extension's target and trigger the behavior — click the toolbar icon, visit a page with prices, or start the timer.

> [!TIP]
>
> If nothing happens immediately, check the toolbar. Your extension may be popup-based and only activates when you click its icon. You might also need to pin it first via the puzzle-piece menu.

## Common first-timer mistakes

* **Vague selectors** — If you ask the extension to click a button but don't name it, the AI will guess. Include the exact button label or ID when possible.
* **Missing permissions** — If your extension calls an external API, mention it in your prompt so Extensy can add the correct `host_permissions` to `manifest.json`.
* **Stale tabs** — Content scripts don't inject into tabs that were already open when you loaded the extension. Refresh any existing tabs after loading.

> **[Prompting guide](https://docs.extensy.dev/using-extensy/prompting-guide.md)**
>
> Learn the anatomy of a great Extensy prompt and templates for every category.

> **[Load in browser](https://docs.extensy.dev/using-extensy/loading-in-browser.md)**
>
> Full step-by-step instructions for Chrome Developer Mode.


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