How to Build a Chrome Extension in 5 Minutes (Vibe Coding Style)

Chrome extensions used to take hours to build. You had to understand the manifest file format, the background scripts, the content scripts, and the arcane Chrome APIs.

But with Vibe Coding, you can build a working extension in the time it takes to drink a coffee.

In this tutorial, we'll build a “Page Word Counter” extension that counts the words on any webpage. We'll use Cursor and pure natural language prompts.

What We're Building

Extension Name: WordCount Pro
Functionality:
* Adds a button to the Chrome toolbar.
* When clicked, displays the word count of the current page.
* Shows the count in a popup window.

Tech Stack:
* Vanilla JavaScript (no frameworks needed for this simple extension).
* Chrome Extension Manifest V3.

Step 1: Set Up the Project

Create a New Folder

“`bash
mkdir wordcount-extension
cd wordcount-extension
“`

Open in Cursor

“`bash
cursor .
“`

Step 2: The “God Prompt”

Open Cursor's Composer (`Cmd+I`) and paste this prompt:

> “Create a Chrome extension called ‘WordCount Pro'. It should have a browser action button. When clicked, it opens a popup that displays the word count of the currently active tab. Use Manifest V3. Create all necessary files: manifest.json, popup.html, popup.js, and content.js.”

Press Enter and wait.

Step 3: Review the Generated Files

Cursor will create 4 files:

1. `manifest.json`

This is the configuration file for the extension.

“`json
{
“manifest_version”: 3,
“name”: “WordCount Pro”,
“version”: “1.0”,
“description”: “Count words on any webpage”,
“action”: {
“default_popup”: “popup.html”,
“default_icon”: “icon.png”
},
“permissions”: [“activeTab”, “scripting”],
“host_permissions”: [““]
}
“`

2. `popup.html`

The UI that appears when you click the extension icon.

“`html

Word Count

“`

3. `popup.js`

The logic that runs when the popup opens.

“`javascript
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.scripting.executeScript({
target: {tabId: tabs[0].id},
function: countWords
}, (results) => {
document.getElementById(‘count').textContent = results[0].result + ‘ words';
});
});

function countWords() {
const text = document.body.innerText;
return text.split(/\s+/).filter(word => word.length > 0).length;
}
“`

4. `content.js`

(In this case, we don't need a separate content script, but Cursor might generate one. You can delete it if unused.)

Step 4: Add an Icon (Optional)

Chrome extensions need an icon. You can either:
* Option A: Use an AI image generator to create a simple icon.
* Option B: Use a placeholder from flaticon.com.

Save it as `icon.png` (128x128px) in the project folder.

Vibe Coding Shortcut: Prompt Cursor:
> “Generate a simple SVG icon for a word counter extension. Save it as icon.svg.”

Then convert the SVG to PNG using an online tool.

Step 5: Load the Extension in Chrome

1. Open Chrome and go to `chrome://extensions/`.
2. Enable Developer Mode (toggle in the top right).
3. Click Load Unpacked.
4. Select your `wordcount-extension` folder.

Done! You'll see the extension icon in your toolbar.

Step 6: Test It

1. Navigate to any webpage (e.g., Wikipedia).
2. Click the WordCount Pro icon.
3. A popup will appear showing the word count.

Step 7: Iterate with Vibes

The first version is basic. Let's make it better.

Iteration 1: Add Character Count

Prompt:
> “Update the popup to also show the character count below the word count.”

Cursor will update `popup.js` and `popup.html`.

Iteration 2: Add Styling

Prompt:
> “Make the popup look more modern. Use a gradient background and a card-style layout.”

Cursor will update the CSS in `popup.html`.

Iteration 3: Add a Copy Button

Prompt:
> “Add a button that copies the word count to the clipboard.”

Cursor will add the button and the clipboard logic.

Step 8: Publish to the Chrome Web Store (Optional)

If you want to share your extension:
1. Zip the folder.
2. Go to Chrome Web Store Developer Dashboard.
3. Pay the $5 one-time registration fee.
4. Upload your zip file.
5. Fill out the listing details.
6. Submit for review.

Approval Time: 1-3 days.

Advanced: Building More Complex Extensions

Once you've mastered the basics, you can Vibe Code more complex extensions:
* Ad Blocker: “Create an extension that blocks all ads on webpages.”
* Screenshot Tool: “Create an extension that captures a screenshot of the visible area.”
* Password Manager: “Create an extension that stores passwords locally using Chrome's storage API.”

The process is the same: Describe what you want, let the AI generate it, review the code, and iterate.

Conclusion

Building Chrome extensions used to require deep knowledge of the Chrome APIs. With Vibe Coding, you just need to know what you want to build. The AI handles the implementation.

At BYS Marketing, we use this approach to rapidly prototype browser extensions for our clients. We can go from idea to working prototype in a single meeting.

—

Have an idea for a browser extension?
Contact BYS Marketing and let's build it together.