30 Claude Prompts That Build Chrome Extensions

You are a Chrome extension engineer who builds capture tools. <context> I want a one-click screenshot extension that captures the visible tab and lets me download it. Build the full file set as self-contained artifacts I can load unpacked. </context> <inputs> - Extension name: [NAME] - Capture type: [E.G. VISIBLE AREA / FULL PAGE] - File format: [PNG / JPEG] - Filename pattern: [E.G. SITE-DATE] </inputs> <task> Build a Manifest V3 extension with manifest.json (activeTab plus needed permissions), a background service worker or popup that uses chrome.tabs.captureVisibleTab to grab the screenshot, a popup.html that previews the capture with download and copy-to-clipboard buttons, popup.js wiring capture, preview, download with a smart filename, and clipboard copy, and popup.css. </task> <constraints> - Manifest V3; use chrome.tabs.captureVisibleTab; explain the permission needed. - Generate a sensible filename from the site and date; support PNG and JPEG. - No external libraries; preview is keyboard-dismissible and buttons are labeled. </constraints> <format> Return each file as a separate labeled artifact, then explain the capture flow and outline how full-page scroll-and-stitch capture would work. </format>

You are a Chrome extension engineer who builds clipboard utilities. <context> I want to copy the current page as a Markdown link, or copy all links on the page as a clean list. Build the complete file set as self-contained artifacts I can load unpacked. </context> <inputs> - Extension name: [NAME] - Copy formats: [E.G. MARKDOWN LINK, PLAIN URL, TITLE + URL] - Link list options: [E.G. UNIQUE ONLY, SAME-DOMAIN ONLY] - Style: [DESCRIBE] </inputs> <task> Build a Manifest V3 extension with manifest.json (activeTab, scripting), popup.html with buttons to copy the current page as a Markdown link, copy as title plus URL, and copy all page links as a Markdown list, popup.js that reads the active tab, injects a script to collect anchors, formats each requested output, and copies to the clipboard with a confirmation, and popup.css. </task> <constraints> - Manifest V3; clean and deduplicate links; skip empty or javascript: anchors. - Each copy action confirms success; offer unique-only and same-domain filters. - No external libraries; accessible buttons with clear labels. </constraints> <format> Return each file as a separate labeled artifact, then explain the link-collection logic and how to add a copy-as-CSV option. </format>

You are a Chrome extension engineer who builds small sharing utilities. <context> I want a popup that instantly turns the current page URL into a scannable QR code I can download. Build the full file set as self-contained artifacts I can load unpacked. </context> <inputs> - Extension name: [NAME] - QR size and quiet zone: [DESCRIBE] - Extras: [E.G. CUSTOM TEXT INPUT, DOWNLOAD AS PNG] - Style: [DESCRIBE] </inputs> <task> Build a Manifest V3 extension with manifest.json (activeTab), popup.html that shows a QR code of the active tab URL plus an input to encode custom text instead, popup.js that reads the active tab and renders the QR code to a canvas using a small self-contained QR generation routine you include inline, with a download-as-PNG button, and popup.css. </task> <constraints> - Manifest V3; include the QR generation code inline so there is no external dependency. - Render to a canvas; export as a downloadable PNG; keep a clear quiet zone. - Accessible input and buttons; works fully offline. </constraints> <format> Return each file as a separate labeled artifact, then explain how the QR is generated and how to add error-correction-level selection. </format>

You are a Chrome extension engineer who builds data-collection utilities for personal research. <context> I want to extract all visible email addresses and phone numbers from the current page into a copyable list. Build the complete file set as self-contained artifacts I can load unpacked. </context> <inputs> - Extension name: [NAME] - What to extract: [EMAILS, PHONE NUMBERS, OR BOTH] - Output: [E.G. DEDUPED LIST, COPY ALL, EXPORT CSV] - Style: [DESCRIBE] </inputs> <task> Build a Manifest V3 extension with manifest.json (activeTab, scripting), popup.html with a scan button, a deduped results list split into emails and phones with counts, and copy-all and export-CSV buttons, popup.js that injects a script to match emails and phone patterns in the page text, dedupes results, returns them to the popup, and handles copy and CSV export, and popup.css. </task> <constraints> - Manifest V3; match only visible page text; dedupe and count results. - Robust email and phone regexes with a clear empty-results message. - No external libraries; accessible buttons and a labeled results region. </constraints> <format> Return each file as a separate labeled artifact, then explain the matching patterns and how to add a filter that keeps only a chosen domain's emails. </format>

You are a Chrome extension engineer who builds context-menu tools. <context> I want to right-click selected text and search it on a site I choose. Build the full file set as self-contained artifacts I can load unpacked. </context> <inputs> - Extension name: [NAME] - Search targets: [E.G. GOOGLE, A DOCS SITE, A SHOPPING SITE] - Open behavior: [E.G. NEW TAB / NEW WINDOW] - Manage targets: [E.G. ADD CUSTOM SEARCH URLS] </inputs> <task> Build a Manifest V3 extension with manifest.json (contextMenus, storage), a background service worker that registers a context-menu entry (with submenu items per configured search target) shown only when text is selected and opens the chosen search URL with the selection inserted, plus a popup.html and popup.js to add, edit, and remove search targets stored in chrome.storage, and popup.css. </task> <constraints> - Manifest V3 with a background service worker; rebuild menus when targets change. - URL-encode the selection; each target uses a %s placeholder pattern. - No external libraries; accessible options UI with labels. </constraints> <format> Return each file as a separate labeled artifact, then explain how the context menu is built from stored targets and how to add a default-target keyboard shortcut. </format>

You are a Chrome extension engineer who builds monitoring tools. <context> I want to track a product's price on a page and get notified when it drops. Build the complete file set as self-contained artifacts I can load unpacked. </context> <inputs> - Extension name: [NAME] - How to find the price: [E.G. CLICK THE PRICE ELEMENT TO SELECT IT] - Check frequency: [E.G. EVERY FEW HOURS] - Notify on: [E.G. ANY DROP / BELOW A TARGET] </inputs> <task> Build a Manifest V3 extension with manifest.json (activeTab, scripting, storage, alarms, notifications), a content/inject flow to let me click the price element and store its selector and the product URL, a background service worker that uses chrome.alarms to re-open or fetch the page periodically, parse the current price, compare to the saved one, and fire a notification on a drop, plus a popup.html and popup.js listing tracked products with current price, target, and remove buttons, and popup.css. </task> <constraints> - Manifest V3; persist tracked items and price history in chrome.storage. - Parse prices robustly (currency symbols, commas); handle a missing element. - No external libraries; accessible product list and clear notification copy. </constraints> <format> Return each file as a separate labeled artifact, then explain the price-parsing and scheduling approach and how to show a small price-history sparkline per product. </format>

You are a Chrome extension engineer who builds change-detection tools. <context> I want to monitor a section of a page (like a job board or a stock status) and alert me when it changes. Build the full file set as self-contained artifacts I can load unpacked. </context> <inputs> - Extension name: [NAME] - What to watch: [E.G. CLICK AN AREA TO SELECT IT] - Check interval: [E.G. EVERY 30 MIN] - Alert style: [E.G. NOTIFICATION + BADGE] </inputs> <task> Build a Manifest V3 extension with manifest.json (activeTab, scripting, storage, alarms, notifications), a flow to click and store a selector plus the watched page URL, a background service worker using chrome.alarms to periodically read that element's text, hash and compare it to the stored value, and notify plus badge on a change, and a popup.html and popup.js listing watched items with last-checked time and remove buttons, and popup.css. </task> <constraints> - Manifest V3; store the last-seen content hash per watch in chrome.storage. - Notify only on real change; show last-checked timestamps; handle a removed element. - No external libraries; accessible list and a clear toggle to pause a watch. </constraints> <format> Return each file as a separate labeled artifact, then explain the change-detection hashing and how to add a diff preview of what changed. </format>

You are a Chrome extension engineer who builds checkout helper tools. <context> I want a popup that stores my known coupon codes per store and lets me copy one straight into the checkout field. Build the complete file set as self-contained artifacts I can load unpacked. </context> <inputs> - Extension name: [NAME] - Stored per: [E.G. DOMAIN] - Fields per code: [E.G. CODE, NOTE, EXPIRY] - Style: [DESCRIBE] </inputs> <task> Build a Manifest V3 extension with manifest.json (tabs, storage), popup.html that shows saved coupon codes for the current store with copy buttons, an add-code form (code, note, optional expiry), and a delete action, popup.js that reads the active tab domain, loads and saves codes in chrome.storage.local, copies a code to the clipboard with confirmation, and flags expired codes, and popup.css. </task> <constraints> - Manifest V3; codes grouped by domain; mark expired codes visually. - Copy with a clear confirmation; confirm before deleting a code. - No external libraries; accessible form and list controls. </constraints> <format> Return each file as a separate labeled artifact, then explain the per-store storage model and how to add a one-click auto-fill into a detected coupon input. </format>

You are a Chrome extension engineer who builds writer-focused tools. <context> I want a popup that reports the word count, character count, and estimated reading time of the current page or my selected text. Build the full file set as self-contained artifacts I can load unpacked. </context> <inputs> - Extension name: [NAME] - Count scope: [E.G. WHOLE PAGE OR SELECTION] - Reading speed: [E.G. 200 WPM] - Style: [DESCRIBE] </inputs> <task> Build a Manifest V3 extension with manifest.json (activeTab, scripting), popup.html showing word count, character count (with and without spaces), sentence count, and estimated reading time, plus a toggle for whole-page versus current selection, popup.js that injects a script to grab the visible text or the selection and computes the stats, and popup.css. Update instantly when the scope toggle changes. </task> <constraints> - Manifest V3; count visible text or the current selection as chosen. - Configurable reading speed; ignore script and style text in the count. - No external libraries; accessible toggle and a clean stats layout. </constraints> <format> Return each file as a separate labeled artifact, then explain the counting method and how to add a keyword-density mini-report. </format>

You are a Chrome extension engineer who builds tab-management tools. <context> I want a popup that lists which tabs are playing audio so I can mute or close noisy and idle tabs fast. Build the complete file set as self-contained artifacts I can load unpacked. </context> <inputs> - Extension name: [NAME] - Actions I want: [E.G. MUTE/UNMUTE, CLOSE, JUMP TO TAB] - Bulk actions: [E.G. MUTE ALL AUDIBLE, CLOSE INACTIVE] - Style: [DESCRIBE] </inputs> <task> Build a Manifest V3 extension with manifest.json (tabs permission), popup.html listing audible tabs first with a speaker indicator, plus per-tab mute, unmute, switch, and close buttons and bulk "mute all audible" and "close other tabs" actions, popup.js using chrome.tabs.query and chrome.tabs.update to read audible state and toggle mute, switch, and close, and popup.css. </task> <constraints> - Manifest V3; surface audible tabs clearly; confirm before closing tabs. - Live indicator of muted versus playing state; handle the no-audible-tabs case. - No external libraries; accessible buttons and a scannable tab list. </constraints> <format> Return each file as a separate labeled artifact, then explain the audible-tab detection and how to add an auto-mute-on-open default for new tabs. </format>

You are a Chrome extension engineer who builds new-tab override pages. <context> I want to replace the default new-tab page with my own dashboard of clock, quick links, and a focus note. Build the complete file set as self-contained artifacts I can load unpacked. </context> <inputs> - Extension name: [NAME] - Widgets I want: [E.G. CLOCK, GREETING, QUICK LINKS, TODAY'S NOTE] - Quick links: [SITES TO PIN] - Visual style: [DESCRIBE] </inputs> <task> Build a Manifest V3 extension with manifest.json that overrides the new-tab page via chrome_url_overrides, a newtab.html with a live clock and greeting, an editable quick-links grid, and a single focus-note field, newtab.js that updates the clock, loads and saves links and the note in chrome.storage, and supports adding and removing links, and newtab.css with a calm, centered layout. </task> <constraints> - Manifest V3; override newtab via chrome_url_overrides; everything persists in chrome.storage. - No external libraries; works fully offline; accessible link editing controls. - Clean, low-distraction layout with good contrast. </constraints> <format> Return each file as a separate labeled artifact, then explain the override setup and how to add a rotating background or daily quote. </format>

You are a Chrome extension engineer who builds command-palette tools. <context> I want a keyboard-triggered command palette to jump to my saved sites and run quick actions. Build the full file set as self-contained artifacts I can load unpacked. </context> <inputs> - Extension name: [NAME] - Open shortcut: [E.G. CTRL+SHIFT+SPACE] - Commands I want: [E.G. OPEN SAVED SITES, SEARCH A SITE, COPY URL] - Style: [DESCRIBE] </inputs> <task> Build a Manifest V3 extension with manifest.json (commands shortcut, tabs, scripting, storage), a content script that injects a centered command-palette overlay on the shortcut, with a fuzzy-filtered list of saved commands and sites, keyboard navigation, and Enter to run, plus a popup.html and popup.js to manage the command and site list in chrome.storage, and palette and popup CSS. </task> <constraints> - Manifest V3; open via the commands API; full keyboard navigation and Escape to close. - Fuzzy filter as I type; commands and sites stored in chrome.storage. - No external libraries; accessible overlay with focus trapping. </constraints> <format> Return each file as a separate labeled artifact, then explain the overlay injection and keyboard handling and how to add per-command icons. </format>

You are a Chrome extension engineer who builds form-automation tools. <context> I want to save sets of profile data and fill matching form fields on any page with one click. Build the complete file set as self-contained artifacts I can load unpacked. </context> <inputs> - Extension name: [NAME] - Profiles to store: [E.G. PERSONAL, WORK] - Fields per profile: [E.G. NAME, EMAIL, PHONE, ADDRESS] - Style: [DESCRIBE] </inputs> <task> Build a Manifest V3 extension with manifest.json (activeTab, scripting, storage), a popup.html to create and edit named profiles of field-value pairs and a fill button, popup.js that saves profiles to chrome.storage and injects a script to match common fields by name, id, autocomplete, and label and fill them from the chosen profile, plus a content fill routine, and popup.css. </task> <constraints> - Manifest V3; match fields heuristically and skip ones it cannot confidently map. - Profiles stored locally; report how many fields were filled. - No external libraries; accessible profile editor and clear fill feedback. </constraints> <format> Return each file as a separate labeled artifact, then explain the field-matching strategy and how to add a pick-this-field-to-map mode for tricky forms. </format>

You are a Chrome extension engineer who builds save-for-later tools. <context> I want to save the current page to a reading list and mark items read, replacing scattered open tabs. Build the full file set as self-contained artifacts I can load unpacked. </context> <inputs> - Extension name: [NAME] - Saved fields: [E.G. TITLE, URL, FAVICON, SAVED DATE] - Organization: [E.G. UNREAD AND READ TABS, SEARCH] - Style: [DESCRIBE] </inputs> <task> Build a Manifest V3 extension with manifest.json (tabs, storage), popup.html with a "save this page" button and a list of saved items split into unread and read with open, mark-read, and delete actions plus a search box, popup.js that reads the active tab, saves items to chrome.storage.local, toggles read state, opens, deletes, and filters the list, and popup.css with a clean reading-list layout. </task> <constraints> - Manifest V3; persist the list across restarts; dedupe by URL. - Search filters live; show empty states for both unread and read. - No external libraries; accessible list controls and a clear save confirmation. </constraints> <format> Return each file as a separate labeled artifact, then explain the storage model and how to add export of the unread list as Markdown. </format>

You are a Chrome extension engineer who builds small utility tools. <context> I want a popup that converts currencies and common units fast, and converts a number I have selected on the page. Build the complete file set as self-contained artifacts I can load unpacked. </context> <inputs> - Extension name: [NAME] - Conversions I need: [E.G. CURRENCY, LENGTH, WEIGHT, TEMPERATURE] - Currency rates source: [E.G. STATIC TABLE OR AN API ENDPOINT I PROVIDE] - Style: [DESCRIBE] </inputs> <task> Build a Manifest V3 extension with manifest.json (activeTab, scripting, storage, plus host permission only if an API is used), popup.html with a from-value input, from and to unit dropdowns grouped by type, a live result, and a "convert selection" button, popup.js that performs unit math, handles currency via a static table or a provided endpoint, reads selected page text as the input, and copies the result, and popup.css. </task> <constraints> - Manifest V3; convert instantly as inputs change; currency works offline with a static table fallback. - Parse a selected number from the page; copy the result with confirmation. - No external libraries; accessible dropdowns and inputs with labels. </constraints> <format> Return each file as a separate labeled artifact, then explain the conversion logic and how to wire a live exchange-rate API with caching. </format>