🧠DeepPromptHub
Code GenerationClaude / ChatLLM DeepAgent

Chrome Extension Builder

Build a functional Chrome extension with popup UI, content scripts, and background service worker from a single prompt.

The Prompt

Build a complete Chrome extension.

Extension name: [name]
What it does: [describe the core functionality in 1–2 sentences]
Trigger: [icon click / page load / right-click context menu / keyboard shortcut]
Permissions needed: [e.g., activeTab, storage, scripting]
UI: [popup window / sidebar / floating button / none]

Generate all required files:

1. manifest.json (Manifest V3):
   - Name, description, version
   - Correct permissions
   - Action/popup if needed
   - Content scripts if needed
   - Background service worker

2. popup.html + popup.css:
   - Clean, minimal UI (300px wide)
   - Match extension functionality
   - Status indicators

3. popup.js:
   - Event listeners for UI
   - Message passing to content script
   - Chrome storage for settings

4. content.js (if page interaction needed):
   - DOM manipulation logic
   - Message listener from popup
   - Inject UI elements if needed

5. background.js (service worker):
   - Installation handler
   - Any background tasks

6. README with installation instructions

Write clean, well-commented code. Test with console.log statements in key functions.

Tips for Best Results

  • →Load as unpacked extension in chrome://extensions during development
  • →Use chrome.storage.sync instead of localStorage for settings that sync across devices

Tags

Chrome extensionJavaScriptbrowser extensionManifest V3productivity

Related Prompts

Code Generation

Full-Stack API Generator

Generate a complete REST API with database schema, authentication, CRUD operations, and documentation.

Code Generation

Database Schema Designer

Design a complete database schema with tables, relationships, indexes, and migration scripts for your application.

Code Generation

REST API Builder with Authentication

Generate a complete, production-ready REST API with JWT authentication, rate limiting, and full CRUD endpoints.

Code Generation

Python Web Scraper Builder

Generate a robust Python web scraper with error handling, rate limiting, and data export to CSV or JSON.

Code Generation

React Dashboard Component Builder

Generate a complete analytics dashboard with charts, KPI cards, data tables, and filters using React and Recharts.

Code Generation

SQL Query Optimizer and Explainer

Paste any SQL query and get an optimized version with explanation of what was improved and why.