Loading...
Loading...
Back to Blog
Development
Complete Guide to Building Chrome Extensions with Cursor AI: From Setup to Deployment
Claude Directory November 30, 2025
8 views
Discover how to leverage Cursor AI to streamline Chrome extension development. This comprehensive tutorial walks you through creating a fully functional extension with popup, content scripts, and more.
## Why Develop Chrome Extensions with Cursor AI?
Chrome extensions empower developers to customize the browsing experience, automate tasks, and inject functionality into web pages. From productivity boosters like ad blockers to innovative tools for developers, extensions extend Chrome's capabilities dramatically. What sets this guide apart is the integration of Cursor AI, an intelligent code editor that accelerates development through AI-powered code generation, autocompletion, and contextual suggestions.
Cursor transforms the traditionally manual process of extension building into an efficient, intuitive workflow. Whether you're a beginner crafting your first popup interface or an expert optimizing Manifest V3 compliance, Cursor handles boilerplate code, debugs issues in real-time, and suggests best practices. This approach not only speeds up development but also ensures robust, production-ready code. For reference, the foundational rules powering this guide are available in the [Cursor GitHub repository](https://github.com/getcursor/cursor-rules/tree/main/.cursor/chrome-extension-development).
## Essential Prerequisites
Before diving in, ensure your environment is ready:
- **Google Chrome Browser**: Version 88 or later, as Manifest V3 is the standard.
- **Cursor AI Installed**: Download from [cursor.com](https://cursor.com). It's built on VS Code, so familiar users will adapt quickly.
- **Node.js (Optional but Recommended)**: For bundling tools like Webpack or Vite if scaling to complex projects.
- **Basic JavaScript Knowledge**: Understanding DOM manipulation, event listeners, and async operations is crucial.
Pro tip: Enable Cursor's Composer mode (Cmd+K on Mac, Ctrl+K on Windows) for multi-file edits and AI-driven refactoring—perfect for extension architectures spanning multiple scripts.
## Step 1: Project Initialization and Manifest Configuration
Kick off by creating a dedicated folder for your extension, say `my-chrome-extension`. Open it in Cursor.
The cornerstone is `manifest.json`, which declares your extension's metadata, permissions, and scripts. Cursor can generate this via prompt: "Create a Manifest V3 for a Chrome extension with popup, content script, and storage permissions."
Here's a robust example:
```json
{
"manifest_version": 3,
"name": "My Awesome Extension",
"version": "1.0",
"description": "A sample extension built with Cursor",
"permissions": ["storage", "activeTab"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"background": {
"service_worker": "background.js"
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
```
Key elements explained:
- **`manifest_version: 3`**: Mandatory for new extensions; deprecates V2.
- **`permissions`**: `storage` for persistent data, `activeTab` for injecting into current tabs.
- **`action`**: Defines the toolbar popup.
- **`content_scripts`**: Runs on matching URLs—use `matches: ["<all_urls>"]` cautiously to avoid security flags.
- **`background.service_worker`**: Efficient, event-driven background logic replacing persistent scripts.
Cursor excels here by validating JSON syntax and suggesting permission optimizations.
## Step 2: Crafting the Popup Interface
The popup is the user-facing UI triggered from the toolbar. Create `popup.html`:
```html
<!DOCTYPE html>
<html>
<head>
<style>
body { width: 300px; padding: 20px; font-family: Arial; }
button { width: 100%; padding: 10px; background: #4285f4; color: white; border: none; border-radius: 4px; }
</style>
</head>
<body>
<h3>My Extension</h3>
<button id="scrape">Scrape Page</button>
<div id="result"></div>
<script src="popup.js"></script>
</body>
</html>
```
This simple layout includes a button to trigger functionality. Use Cursor's inline AI (Cmd+L) to enhance CSS for responsiveness or add animations.
## Step 3: Popup Logic with JavaScript
`popup.js` handles interactions. Prompt Cursor: "Write JS for popup that sends message to content script on button click."
```javascript
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
document.getElementById('scrape').addEventListener('click', () => {
chrome.tabs.sendMessage(tabs[0].id, { action: 'scrape' }, (response) => {
document.getElementById('result').textContent = response.data || 'No data';
});
});
});
```
This queries the active tab and dispatches a message—core to Chrome's messaging API for secure cross-context communication.
## Step 4: Content Script for Page Interaction
Content scripts inject into web pages. `content.js`:
```javascript
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === 'scrape') {
const title = document.title;
const links = Array.from(document.links).map(a => a.href);
sendResponse({ data: `Title: ${title}\
Links: ${links.slice(0, 5).join('\
')}` });
}
});
```
Real-world application: This scrapes titles and links. Expand for DOM parsing, form filling, or accessibility checks. Cursor can refactor for error handling or performance.
## Step 5: Background Script for Persistent Tasks
`background.js` manages extension lifecycle:
```javascript
chrome.runtime.onInstalled.addListener(() => {
console.log('Extension installed');
});
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ['content.js']
});
});
```
Use for alarms, notifications, or cross-tab syncing. Note: Service workers unload when idle, so avoid long-running tasks.
## Step 6: Adding Icons and Assets
Create an `icons` folder with PNGs at 16x16, 48x48, 128x128 pixels. Cursor integrates with image tools or generates placeholders via prompts like "Generate Chrome extension icons."
## Step 7: Loading and Testing in Chrome
1. Open `chrome://extensions/`.
2. Enable "Developer mode".
3. Click "Load unpacked" and select your folder.
4. Pin the extension to the toolbar.
Test rigorously:
- Popup opens/closes smoothly?
- Content script injects on page load?
- Messages flow bidirectionally?
Use Chrome's Inspector (right-click popup > Inspect) and console for logs.
## Debugging and Iteration with Cursor
Cursor shines in debugging: Highlight errors for AI fixes, use "Explain this code," or "Refactor for Manifest V3 compliance." Common pitfalls:
- **CSP Violations**: Use `scripting` permission for dynamic injection.
- **Storage Quotas**: Local storage caps at 5MB; migrate to `chrome.storage`.
- **Permissions Review**: Chrome flags overbroad `host_permissions`.
## Advanced Features: Storage, Alarms, and More
- **chrome.storage**: `chrome.storage.sync.set({ key: value })` for cross-device sync.
- **Alarms**: `chrome.alarms.create('check', { periodInMinutes: 30 })` for periodic tasks.
- **Notifications**: Requires `notifications` permission.
Example storage in popup.js:
```javascript
chrome.storage.sync.get(['count'], (result) => {
document.getElementById('result').textContent = `Clicks: ${result.count || 0}`;
});
```
## Publishing to Chrome Web Store
Zip your build, create a developer account ($5 fee), and submit. Optimize with compelling screenshots and descriptions.
## Best Practices and Scaling
- Modularize with ES modules.
- Bundle with Vite: Add `vite.config.js` for production builds.
- Security: Sanitize user inputs, minimize permissions.
- Performance: Lazy-load heavy scripts.
Cursor facilitates scaling—prompt for React integration or TypeScript conversion.
This workflow, honed with Cursor, turns ideas into extensions rapidly. Experiment, iterate, and contribute back via the [GitHub repo](https://github.com/getcursor/cursor-rules/tree/main/.cursor/chrome-extension-development). Happy coding!
<div style="text-align: center; margin-top: 2rem;">
<a href="https://cursor.directory/chrome-extension-development" target="_blank" rel="noopener noreferrer" class="view-full-resource-btn" style="display: inline-block; background-color: #f97316; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background-color 0.2s;">View Full Resource</a>
</div>
Comments
More Blog
View allClaude for Developers
Building Voice Agents with Claude API and ElevenLabs: Conversational AI Guide
Build natural voice agents combining Claude API's superior reasoning with ElevenLabs' lifelike TTS. This end-to-end guide creates a conversational web app with STT, AI chat, and speech synthesis.
C
Claude Directory 2
Model Comparisons
Claude vs Mistral Large 2: 2025 Data Analysis Benchmarks and Use Cases
As data volumes explode in 2025, choosing between Claude's reasoning depth and Mistral Large 2's efficiency is critical. We benchmark SQL generation, visualizations, and large datasets to reveal the w
C
Claude Directory 1
Enterprise
Claude Enterprise for Cybersecurity: Threat Modeling and Incident Response
In the high-stakes world of cybersecurity, rapid threat modeling and incident response can mean the difference between containment and catastrophe. Discover how Claude Enterprise empowers security tea
C
Claude Directory 1
Claude Code
Claude Code in VS Code: Custom Commands for Refactoring Large Codebases
Refactoring sprawling codebases manually? Harness Claude Code's power in VS Code with custom commands to automate AI-driven refactors across TypeScript and Python projects—saving hours of drudgery.
C
Claude Directory 1
Claude for Developers
Claude SDK Rust for Blockchain: Smart Contract Auditing Agents
Build blazing-fast smart contract auditing agents in Rust using the Claude SDK. Harness Claude's reasoning to scan Solidity code for vulnerabilities like reentrancy and overflows.
C
Claude Directory 1
Claude Best Practices
Advanced Claude Artifacts: Collaborative Editing in Multi-User Sessions
Elevate team productivity with Claude Artifacts in multi-user projects—enable real-time iterative editing for code reviews and docs without leaving the interface.
C
Claude Directory 1