Build a Chrome extension

🥐 Kitchen & production

Recipe scaler

Paste an ingredient list, type how many batches you need, and every quantity rescales instantly. No more mental math at 4am.

Build me a Chrome extension. Manifest V3, plain HTML, CSS and JavaScript, every file in the project, nothing else to install.

# Recipe scaler

## Goal
Paste an ingredient list, say how many batches I need, and get every quantity rescaled.

## What it does
A popup with a big textarea. I paste a recipe's ingredient list, one ingredient per line, the way it is written in our kitchen file. Below it I set the scale: either a multiplier (times 2.5) or a from/to pair ("recipe makes 12, I need 40"). The scaled list appears underneath, one line per ingredient, and a Copy button puts it on my clipboard.

## Features
- Each line starts with a quantity, then a unit, then the ingredient: "500 g flour", "2 eggs", "1.5 cups milk", "3/4 tsp salt", "1 1/2 kg butter". Handle whole numbers, decimals, simple fractions and mixed fractions.
- Lines with no number at the start (headings like "For the glaze:") pass through unchanged.
- Scale mode toggle: a plain multiplier, or a from/to pair (recipe yield and needed yield) that works out the multiplier for me.
- Round sensibly: up to two decimals, and small counts like eggs rounded to the nearest half with a small note when the result is not a whole number.
- Remember the last pasted list and scale so they are there when I reopen the popup.
- A Copy button for the scaled list and a Clear button.

## Sample data
Pre-fill the textarea with this recipe on first open so I can see it working:
Croissant dough (makes 24)
500 g bread flour
10 g salt
55 g sugar
10 g instant yeast
300 ml cold milk
280 g butter, for laminating
1 egg, for egg wash

## Permissions
Request only these permissions in manifest.json: "storage". Nothing else. Save everything with chrome.storage.local. Nothing leaves my browser.

## Files
Create exactly these files, all at the top level of the project, none of them empty:
- manifest.json
- popup.html
- popup.css
- popup.js
- index.html
Every file named in manifest.json must exist in the project. Do not declare icons in manifest.json: Chrome shows a default icon and that is fine.

## Rules, please follow every one
- This is a Chrome extension, not a web app. No React, no TypeScript, no Vite, no npm, no bundler, no build step. Chrome must load the folder exactly as exported.
- No scripts, styles or fonts loaded from the internet. No inline <script> blocks and no onclick attributes in the HTML: Chrome blocks both inside extensions. All JavaScript goes in the .js files, loaded with <script src="..."></script> at the end of the body.
- Keep manifest.json at the top level of the project, next to popup.html. Load unpacked has to find it there.
- Make index.html an exact copy of popup.html so the AI Studio preview shows the page. Wrap every chrome.* call so the page still renders in the preview, with the sample data, when the chrome APIs are missing.
- If the project starts with scaffold files the extension does not need (index.tsx, App.tsx, package.json, tsconfig.json, vite.config.ts), delete them. Chrome ignores extra files, but I want a clean folder. Leave metadata.json alone if AI Studio needs it.
- Keep the code plain and readable, with a short comment wherever something is not obvious. I will ask for small changes later.

## How I will install it
1. Export the project as a zip and unzip it on my desktop.
2. Open chrome://extensions and turn on Developer mode.
3. Click Load unpacked and choose the unzipped folder, the one with manifest.json inside it.
4. Pin the extension with the puzzle-piece icon next to the address bar.
End your reply with these steps and one line saying what I should see when it works.

## Important
I am not a developer. Make it work first try. Where you have to choose, pick the simplest approach that works and tell me what you chose. If I paste an error back, fix it and give me the complete updated files, not just the changed lines.

📦 Operations & supply

Order message builder

Your vendors and their usual items live in the popup. Tick what you need and it writes the WhatsApp order message, ready to copy.

Build me a Chrome extension. Manifest V3, plain HTML, CSS and JavaScript, every file in the project, nothing else to install.

# Order message builder

## Goal
Keep my vendors and their usual items in the popup. I tick what I need and it writes the WhatsApp order message.

## What it does
A popup with two views. Vendors: a list of my suppliers, each with the items I usually order from them and a unit for each. Order: pick a vendor, tick items, type quantities, and the finished message appears in a box with a Copy button, ready to paste into WhatsApp.

## Features
- Add, edit and delete vendors. Each vendor has a name, a contact name, and a list of items with a unit (kg, litres, packets, boxes).
- Order view: a vendor dropdown, a checklist of that vendor's items with a quantity box next to each, a date picker for "needed by", and an optional note line.
- The message reads like a person wrote it: "Hi Ramesh bhai, please send the following for Thursday 5 September: 25 kg maida, 10 kg sugar, 6 litres milk. Thanks, Vishal, The Baker's Dozen." Put items on separate lines when there are more than three.
- Settings: my name and the business name, used in the sign-off.
- Copy button. Recently sent: the last five messages, each with its own Copy button, so I can resend a standard order.
- All data saved in chrome.storage.local.

## Sample data
Ship with two vendors so the popup is not empty on first open:
- "Gupta Flour Mills", contact Ramesh: maida (kg), sugar (kg), salt (kg), instant yeast (packets)
- "Prime Packaging", contact Sunil: 6-inch cake boxes (boxes), 1 kg cake boxes (boxes), paper bags (packets), ribbon rolls (rolls)

## Permissions
Request only these permissions in manifest.json: "storage", "clipboardWrite". Nothing else. Save everything with chrome.storage.local. Nothing leaves my browser.

## Files
Create exactly these files, all at the top level of the project, none of them empty:
- manifest.json
- popup.html
- popup.css
- popup.js
- index.html
Every file named in manifest.json must exist in the project. Do not declare icons in manifest.json: Chrome shows a default icon and that is fine.

## Rules, please follow every one
- This is a Chrome extension, not a web app. No React, no TypeScript, no Vite, no npm, no bundler, no build step. Chrome must load the folder exactly as exported.
- No scripts, styles or fonts loaded from the internet. No inline <script> blocks and no onclick attributes in the HTML: Chrome blocks both inside extensions. All JavaScript goes in the .js files, loaded with <script src="..."></script> at the end of the body.
- Keep manifest.json at the top level of the project, next to popup.html. Load unpacked has to find it there.
- Make index.html an exact copy of popup.html so the AI Studio preview shows the page. Wrap every chrome.* call so the page still renders in the preview, with the sample data, when the chrome APIs are missing.
- If the project starts with scaffold files the extension does not need (index.tsx, App.tsx, package.json, tsconfig.json, vite.config.ts), delete them. Chrome ignores extra files, but I want a clean folder. Leave metadata.json alone if AI Studio needs it.
- Keep the code plain and readable, with a short comment wherever something is not obvious. I will ask for small changes later.

## How I will install it
1. Export the project as a zip and unzip it on my desktop.
2. Open chrome://extensions and turn on Developer mode.
3. Click Load unpacked and choose the unzipped folder, the one with manifest.json inside it.
4. Pin the extension with the puzzle-piece icon next to the address bar.
End your reply with these steps and one line saying what I should see when it works.

## Important
I am not a developer. Make it work first try. Where you have to choose, pick the simplest approach that works and tell me what you chose. If I paste an error back, fix it and give me the complete updated files, not just the changed lines.

🛵 Marketplace

Complaint spotter

Highlights the words you care about (late, stale, missing, refund) on any reviews page, so problems jump out before you scroll past them.

Heads up: Chrome will warn that it can read data on all sites. Highlighting needs that.

Build me a Chrome extension. Manifest V3, plain HTML, CSS and JavaScript, every file in the project, nothing else to install.

# Complaint spotter

## Goal
Highlight the words I care about, like late, stale, missing and refund, on any reviews page so problems jump out.

## What it does
On every page I visit, the extension highlights a list of words in yellow, so when I scroll through reviews on Zomato, Swiggy, Google or a marketplace panel, the problems catch my eye first. The popup lets me edit the word list and switch highlighting on or off.

## Features
- A content script scans the page text and wraps each match in a <mark> with a yellow background and dark text. Case-insensitive, whole words only, punctuation ignored.
- Skip text inside script, style, input, textarea and contenteditable elements.
- Review pages load more content as I scroll, so watch for changes (a MutationObserver, debounced) and highlight new text too. Never re-highlight text that is already marked.
- Popup: the word list as one word per line in a textarea, a Save button, and an on/off toggle. The content script reads the list from chrome.storage.local and listens for changes, so edits apply without reloading the page.
- Switching it off removes every highlight cleanly.
- Keep it fast on long pages: only walk text nodes.
- The manifest declares the content script for all pages: "content_scripts": [{ "matches": ["<all_urls>"], "js": ["content.js"], "css": ["content.css"], "run_at": "document_idle" }].

## Sample data
Default word list: late, delayed, stale, cold, missing, wrong, damaged, broken, leaking, refund, cancel, rude.

## Permissions
Request only these permissions in manifest.json: "storage". Nothing else. Save everything with chrome.storage.local. Nothing leaves my browser.

## Files
Create exactly these files, all at the top level of the project, none of them empty:
- manifest.json
- content.js
- content.css
- popup.html
- popup.css
- popup.js
- index.html
Every file named in manifest.json must exist in the project. Do not declare icons in manifest.json: Chrome shows a default icon and that is fine.

## Rules, please follow every one
- This is a Chrome extension, not a web app. No React, no TypeScript, no Vite, no npm, no bundler, no build step. Chrome must load the folder exactly as exported.
- No scripts, styles or fonts loaded from the internet. No inline <script> blocks and no onclick attributes in the HTML: Chrome blocks both inside extensions. All JavaScript goes in the .js files, loaded with <script src="..."></script> at the end of the body.
- Keep manifest.json at the top level of the project, next to popup.html. Load unpacked has to find it there.
- Make index.html an exact copy of popup.html so the AI Studio preview shows the page. Wrap every chrome.* call so the page still renders in the preview, with the sample data, when the chrome APIs are missing.
- If the project starts with scaffold files the extension does not need (index.tsx, App.tsx, package.json, tsconfig.json, vite.config.ts), delete them. Chrome ignores extra files, but I want a clean folder. Leave metadata.json alone if AI Studio needs it.
- Keep the code plain and readable, with a short comment wherever something is not obvious. I will ask for small changes later.

## How I will install it
1. Export the project as a zip and unzip it on my desktop.
2. Open chrome://extensions and turn on Developer mode.
3. Click Load unpacked and choose the unzipped folder, the one with manifest.json inside it.
4. Pin the extension with the puzzle-piece icon next to the address bar.
5. Chrome will warn that it can read data on all sites. Highlighting needs that.
End your reply with these steps and one line saying what I should see when it works.

## Important
I am not a developer. Make it work first try. Where you have to choose, pick the simplest approach that works and tell me what you chose. If I paste an error back, fix it and give me the complete updated files, not just the changed lines.

📣 Marketing & content

Caption counter & hashtag stash

A live character count for captions, plus your saved hashtag sets with one click to copy. Ends the count-by-hand era.

Build me a Chrome extension. Manifest V3, plain HTML, CSS and JavaScript, every file in the project, nothing else to install.

# Caption counter & hashtag stash

## Goal
A live character count for captions, plus my saved hashtag sets, one click to copy.

## What it does
A popup with a textarea where I write a caption. Under it, a live count of characters and words, and how much room is left on each platform. Below that, my saved hashtag sets: one click copies a set, another appends it to the caption.

## Features
- Live counters: characters, words, and the number of hashtags in the text.
- Platform limits shown as "left" figures that turn red when I go over: Instagram caption 2,200 characters, Instagram hashtags 30, X 280 characters, LinkedIn 3,000 characters. Also show a subtle marker where Instagram truncates the caption in the feed (after about 125 characters).
- Hashtag sets: a name plus the hashtags. Add, edit, delete. Each set has a Copy button and an Add to caption button.
- Copy caption button. The caption text is remembered between opens so nothing is lost if I close the popup.
- Everything in chrome.storage.local.

## Sample data
Two sets to start:
- "Bakery core": #freshbaked #bakerylove #sourdough #croissant #bakersdozen #bakedwithlove #artisanbread
- "Festive": #diwalisweets #festivegifting #giftbox #celebrationcake #partyorders

## Permissions
Request only these permissions in manifest.json: "storage", "clipboardWrite". Nothing else. Save everything with chrome.storage.local. Nothing leaves my browser.

## Files
Create exactly these files, all at the top level of the project, none of them empty:
- manifest.json
- popup.html
- popup.css
- popup.js
- index.html
Every file named in manifest.json must exist in the project. Do not declare icons in manifest.json: Chrome shows a default icon and that is fine.

## Rules, please follow every one
- This is a Chrome extension, not a web app. No React, no TypeScript, no Vite, no npm, no bundler, no build step. Chrome must load the folder exactly as exported.
- No scripts, styles or fonts loaded from the internet. No inline <script> blocks and no onclick attributes in the HTML: Chrome blocks both inside extensions. All JavaScript goes in the .js files, loaded with <script src="..."></script> at the end of the body.
- Keep manifest.json at the top level of the project, next to popup.html. Load unpacked has to find it there.
- Make index.html an exact copy of popup.html so the AI Studio preview shows the page. Wrap every chrome.* call so the page still renders in the preview, with the sample data, when the chrome APIs are missing.
- If the project starts with scaffold files the extension does not need (index.tsx, App.tsx, package.json, tsconfig.json, vite.config.ts), delete them. Chrome ignores extra files, but I want a clean folder. Leave metadata.json alone if AI Studio needs it.
- Keep the code plain and readable, with a short comment wherever something is not obvious. I will ask for small changes later.

## How I will install it
1. Export the project as a zip and unzip it on my desktop.
2. Open chrome://extensions and turn on Developer mode.
3. Click Load unpacked and choose the unzipped folder, the one with manifest.json inside it.
4. Pin the extension with the puzzle-piece icon next to the address bar.
End your reply with these steps and one line saying what I should see when it works.

## Important
I am not a developer. Make it work first try. Where you have to choose, pick the simplest approach that works and tell me what you chose. If I paste an error back, fix it and give me the complete updated files, not just the changed lines.

📈 Trade

Quote builder

Keep your price list in the popup. Tick products, set quantities and a discount, and it writes out a tidy quote with the total.

Build me a Chrome extension. Manifest V3, plain HTML, CSS and JavaScript, every file in the project, nothing else to install.

# Quote builder

## Goal
Keep my price list in the popup. I tick products, set quantities and a discount, and it writes a tidy quote with the total.

## What it does
A popup with my price list saved inside it. For a new quote I tick the products, enter quantities, pick a discount, and a clean quote appears in a text box with line totals, subtotal, discount, GST and grand total, ready to copy into WhatsApp or email.

## Features
- Price list: product name, unit (kg, piece, box), price per unit. Add, edit, delete. Sorted by name.
- Quote screen: a checkbox next to each product, a quantity box for each ticked one, a discount percentage box, a customer name box.
- Output message: a greeting with the customer's name, one line per product ("Butter croissant, 40 pieces x ₹45 = ₹1,800"), subtotal, discount line, GST line, grand total, a validity line ("Prices valid for 7 days"), and a sign-off with my business name.
- Indian number formatting with commas (₹1,20,000) and the rupee symbol.
- Settings: business name, GST percentage (default 5), validity days (default 7).
- Copy button. Remember the last quote so I can reopen the popup and tweak it.

## Sample data
Four products: Butter croissant (piece, ₹45), Sourdough loaf (piece, ₹220), Chocolate brownie box of 6 (box, ₹480), Cookies (kg, ₹900).

## Permissions
Request only these permissions in manifest.json: "storage", "clipboardWrite". Nothing else. Save everything with chrome.storage.local. Nothing leaves my browser.

## Files
Create exactly these files, all at the top level of the project, none of them empty:
- manifest.json
- popup.html
- popup.css
- popup.js
- index.html
Every file named in manifest.json must exist in the project. Do not declare icons in manifest.json: Chrome shows a default icon and that is fine.

## Rules, please follow every one
- This is a Chrome extension, not a web app. No React, no TypeScript, no Vite, no npm, no bundler, no build step. Chrome must load the folder exactly as exported.
- No scripts, styles or fonts loaded from the internet. No inline <script> blocks and no onclick attributes in the HTML: Chrome blocks both inside extensions. All JavaScript goes in the .js files, loaded with <script src="..."></script> at the end of the body.
- Keep manifest.json at the top level of the project, next to popup.html. Load unpacked has to find it there.
- Make index.html an exact copy of popup.html so the AI Studio preview shows the page. Wrap every chrome.* call so the page still renders in the preview, with the sample data, when the chrome APIs are missing.
- If the project starts with scaffold files the extension does not need (index.tsx, App.tsx, package.json, tsconfig.json, vite.config.ts), delete them. Chrome ignores extra files, but I want a clean folder. Leave metadata.json alone if AI Studio needs it.
- Keep the code plain and readable, with a short comment wherever something is not obvious. I will ask for small changes later.

## How I will install it
1. Export the project as a zip and unzip it on my desktop.
2. Open chrome://extensions and turn on Developer mode.
3. Click Load unpacked and choose the unzipped folder, the one with manifest.json inside it.
4. Pin the extension with the puzzle-piece icon next to the address bar.
End your reply with these steps and one line saying what I should see when it works.

## Important
I am not a developer. Make it work first try. Where you have to choose, pick the simplest approach that works and tell me what you chose. If I paste an error back, fix it and give me the complete updated files, not just the changed lines.

🧾 Finance & accounts

GST splitter

Type any amount and see it with GST added at 5, 12 and 18 percent. Works backwards too: what an inclusive amount breaks into.

Build me a Chrome extension. Manifest V3, plain HTML, CSS and JavaScript, every file in the project, nothing else to install.

# GST splitter

## Goal
Type any amount and see it with GST added at 5, 12 and 18 percent, and what an inclusive amount breaks into.

## What it does
A popup with one amount box. As I type, a table shows the amount with GST added at 5%, 12% and 18%, and a second table shows what happens if that amount already includes GST: the base amount and the tax inside it. Each row has a Copy button.

## Features
- Two tables that update as I type. "Add GST": base, GST, total. "Remove GST": total, base, GST inside. Rates 5, 12 and 18, plus one custom rate box.
- Show the CGST and SGST split (half each) in a smaller line under each GST figure.
- Indian number formatting with commas (₹1,20,000.00), two decimals.
- Copy button per row that copies a one-line summary like "₹10,000 + 18% GST (₹1,800) = ₹11,800".
- Remember the last amount and the custom rate.
- Big, calm typography. This will be used dozens of times a day.

## Sample data
Open with ₹10,000 in the box so both tables are visible straight away.

## Permissions
Request only these permissions in manifest.json: "storage", "clipboardWrite". Nothing else. Save everything with chrome.storage.local. Nothing leaves my browser.

## Files
Create exactly these files, all at the top level of the project, none of them empty:
- manifest.json
- popup.html
- popup.css
- popup.js
- index.html
Every file named in manifest.json must exist in the project. Do not declare icons in manifest.json: Chrome shows a default icon and that is fine.

## Rules, please follow every one
- This is a Chrome extension, not a web app. No React, no TypeScript, no Vite, no npm, no bundler, no build step. Chrome must load the folder exactly as exported.
- No scripts, styles or fonts loaded from the internet. No inline <script> blocks and no onclick attributes in the HTML: Chrome blocks both inside extensions. All JavaScript goes in the .js files, loaded with <script src="..."></script> at the end of the body.
- Keep manifest.json at the top level of the project, next to popup.html. Load unpacked has to find it there.
- Make index.html an exact copy of popup.html so the AI Studio preview shows the page. Wrap every chrome.* call so the page still renders in the preview, with the sample data, when the chrome APIs are missing.
- If the project starts with scaffold files the extension does not need (index.tsx, App.tsx, package.json, tsconfig.json, vite.config.ts), delete them. Chrome ignores extra files, but I want a clean folder. Leave metadata.json alone if AI Studio needs it.
- Keep the code plain and readable, with a short comment wherever something is not obvious. I will ask for small changes later.

## How I will install it
1. Export the project as a zip and unzip it on my desktop.
2. Open chrome://extensions and turn on Developer mode.
3. Click Load unpacked and choose the unzipped folder, the one with manifest.json inside it.
4. Pin the extension with the puzzle-piece icon next to the address bar.
End your reply with these steps and one line saying what I should see when it works.

## Important
I am not a developer. Make it work first try. Where you have to choose, pick the simplest approach that works and tell me what you chose. If I paste an error back, fix it and give me the complete updated files, not just the changed lines.

🤝 People & admin

Team dates reminder

Store birthdays and work anniversaries. Chrome notifies you that morning, so nobody's day slips past unnoticed.

Heads up: Allow notifications when Chrome asks.

Build me a Chrome extension. Manifest V3, plain HTML, CSS and JavaScript, every file in the project, nothing else to install.

# Team dates reminder

## Goal
Save birthdays and work anniversaries, and get a Chrome notification on the morning of each one.

## What it does
A popup where I keep my team's dates: name, date, and whether it is a birthday or a work anniversary. Every morning the extension checks the list and, if someone's day is today, shows a Chrome notification with a ready-to-send message. The popup also shows what is coming in the next 14 days.

## Features
- Table of people: name, date (DD/MM, year optional), type (birthday or anniversary). Add, edit, delete.
- A "Coming up" list at the top of the popup: the next 14 days, with days-until and a Copy message button. Handle the year wrap correctly (a 3 January birthday on 28 December is "6 days").
- A daily alarm (chrome.alarms) at 9:00 that checks today's dates and fires one notification per person. Never fire the same notification twice on the same day.
- Notification text like "Today is Priya's birthday" or "Kiran completes 3 years today", using message templates I can edit in settings: one for birthdays and one for anniversaries, with {name} and {years} placeholders.
- A "Test notification" button in the popup so I can see one immediately without waiting for tomorrow.
- The manifest declares "background": { "service_worker": "background.js" }. The alarm and the notification logic live there.
- Everything in chrome.storage.local.

## Sample data
Three obvious placeholder rows I can delete: "(Example) Priya", birthday 15/06; "(Example) Kiran", anniversary 01/03/2022; "(Example) Anjali", birthday 22/11.

## Permissions
Request only these permissions in manifest.json: "storage", "alarms", "notifications". Nothing else. Save everything with chrome.storage.local. Nothing leaves my browser.

## Files
Create exactly these files, all at the top level of the project, none of them empty:
- manifest.json
- background.js
- popup.html
- popup.css
- popup.js
- index.html
Every file named in manifest.json must exist in the project. Do not declare icons in manifest.json: Chrome shows a default icon and that is fine.

## Rules, please follow every one
- This is a Chrome extension, not a web app. No React, no TypeScript, no Vite, no npm, no bundler, no build step. Chrome must load the folder exactly as exported.
- No scripts, styles or fonts loaded from the internet. No inline <script> blocks and no onclick attributes in the HTML: Chrome blocks both inside extensions. All JavaScript goes in the .js files, loaded with <script src="..."></script> at the end of the body.
- Keep manifest.json at the top level of the project, next to popup.html. Load unpacked has to find it there.
- Make index.html an exact copy of popup.html so the AI Studio preview shows the page. Wrap every chrome.* call so the page still renders in the preview, with the sample data, when the chrome APIs are missing.
- If the project starts with scaffold files the extension does not need (index.tsx, App.tsx, package.json, tsconfig.json, vite.config.ts), delete them. Chrome ignores extra files, but I want a clean folder. Leave metadata.json alone if AI Studio needs it.
- Keep the code plain and readable, with a short comment wherever something is not obvious. I will ask for small changes later.

## How I will install it
1. Export the project as a zip and unzip it on my desktop.
2. Open chrome://extensions and turn on Developer mode.
3. Click Load unpacked and choose the unzipped folder, the one with manifest.json inside it.
4. Pin the extension with the puzzle-piece icon next to the address bar.
5. Allow notifications when Chrome asks.
End your reply with these steps and one line saying what I should see when it works.

## Important
I am not a developer. Make it work first try. Where you have to choose, pick the simplest approach that works and tell me what you chose. If I paste an error back, fix it and give me the complete updated files, not just the changed lines.

🎨 Design & creative

Color grabber

Click any pixel on any page and get its exact color code. Chrome has a built-in eyedropper; your extension just puts it to work.

Build me a Chrome extension. Manifest V3, plain HTML, CSS and JavaScript, every file in the project, nothing else to install.

# Color grabber

## Goal
Pick any colour on any page with the browser's eyedropper, get its code, and keep a palette of everything I've picked.

## What it does
A popup with one big button, "Pick a colour". It opens Chrome's built-in eyedropper, I click anywhere on the screen, and the popup shows the colour as a swatch with its hex and RGB values and Copy buttons. Every pick is saved to a palette grid at the bottom.

## Features
- Use the browser's EyeDropper API (window.EyeDropper). No screenshots, no extra permissions.
- After a pick: a large swatch, the hex code (#E94560) and the RGB values (233, 69, 96), each with a Copy button. Copy the hex to the clipboard automatically as well.
- Palette: a grid of saved swatches, newest first. Hover shows the hex, click copies it, a small cross deletes it. A "Clear palette" button with a confirm step.
- Optional name per colour by clicking its label, for example "Box ribbon red".
- A "Copy palette as CSS" button that copies every colour as a CSS variable.
- If the eyedropper cannot open from the popup, add an "Open in a tab" button that opens popup.html in a normal tab, where picking works.
- Palette saved in chrome.storage.local.

## Sample data
Ship with three colours already in the palette so the layout is visible: #E94560, #F5A623, #16C79A.

## Permissions
Request only these permissions in manifest.json: "storage", "clipboardWrite". Nothing else. Save everything with chrome.storage.local. Nothing leaves my browser.

## Files
Create exactly these files, all at the top level of the project, none of them empty:
- manifest.json
- popup.html
- popup.css
- popup.js
- index.html
Every file named in manifest.json must exist in the project. Do not declare icons in manifest.json: Chrome shows a default icon and that is fine.

## Rules, please follow every one
- This is a Chrome extension, not a web app. No React, no TypeScript, no Vite, no npm, no bundler, no build step. Chrome must load the folder exactly as exported.
- No scripts, styles or fonts loaded from the internet. No inline <script> blocks and no onclick attributes in the HTML: Chrome blocks both inside extensions. All JavaScript goes in the .js files, loaded with <script src="..."></script> at the end of the body.
- Keep manifest.json at the top level of the project, next to popup.html. Load unpacked has to find it there.
- Make index.html an exact copy of popup.html so the AI Studio preview shows the page. Wrap every chrome.* call so the page still renders in the preview, with the sample data, when the chrome APIs are missing.
- If the project starts with scaffold files the extension does not need (index.tsx, App.tsx, package.json, tsconfig.json, vite.config.ts), delete them. Chrome ignores extra files, but I want a clean folder. Leave metadata.json alone if AI Studio needs it.
- Keep the code plain and readable, with a short comment wherever something is not obvious. I will ask for small changes later.

## How I will install it
1. Export the project as a zip and unzip it on my desktop.
2. Open chrome://extensions and turn on Developer mode.
3. Click Load unpacked and choose the unzipped folder, the one with manifest.json inside it.
4. Pin the extension with the puzzle-piece icon next to the address bar.
End your reply with these steps and one line saying what I should see when it works.

## Important
I am not a developer. Make it work first try. Where you have to choose, pick the simplest approach that works and tell me what you chose. If I paste an error back, fix it and give me the complete updated files, not just the changed lines.

💻 MIS

Morning launcher

One button opens every portal and dashboard you check daily, each in its own tab. The whole 9am ritual, one click.

Build me a Chrome extension. Manifest V3, plain HTML, CSS and JavaScript, every file in the project, nothing else to install.

# Morning launcher

## Goal
One button opens every portal and dashboard I check each morning, each in its own tab.

## What it does
A popup that holds named sets of links. "Morning": the five portals I open at 9am. "Month end": the accounting and GST sites. One button per set opens all its links, each in a new tab, in the order I set.

## Features
- Sets: a name plus a list of links (label and URL). Add, edit, delete, and reorder links with up and down buttons.
- Each set has an "Open all" button that opens every link in a new tab with chrome.tabs.create, in order, with the first one focused. A per-set option to open them in a new window instead.
- An "Add current tab" button that adds the page I am on to a set, using its title and URL.
- Pressing Enter on a set name opens it.
- Everything in chrome.storage.local.

## Sample data
One set called "Morning" with: Gmail (https://mail.google.com), Google Sheets (https://sheets.google.com), Zomato Partner (https://www.zomato.com/partners), Swiggy Partner (https://partner.swiggy.com), WhatsApp Web (https://web.whatsapp.com).

## Permissions
Request only these permissions in manifest.json: "storage", "tabs". Nothing else. Save everything with chrome.storage.local. Nothing leaves my browser.

## Files
Create exactly these files, all at the top level of the project, none of them empty:
- manifest.json
- popup.html
- popup.css
- popup.js
- index.html
Every file named in manifest.json must exist in the project. Do not declare icons in manifest.json: Chrome shows a default icon and that is fine.

## Rules, please follow every one
- This is a Chrome extension, not a web app. No React, no TypeScript, no Vite, no npm, no bundler, no build step. Chrome must load the folder exactly as exported.
- No scripts, styles or fonts loaded from the internet. No inline <script> blocks and no onclick attributes in the HTML: Chrome blocks both inside extensions. All JavaScript goes in the .js files, loaded with <script src="..."></script> at the end of the body.
- Keep manifest.json at the top level of the project, next to popup.html. Load unpacked has to find it there.
- Make index.html an exact copy of popup.html so the AI Studio preview shows the page. Wrap every chrome.* call so the page still renders in the preview, with the sample data, when the chrome APIs are missing.
- If the project starts with scaffold files the extension does not need (index.tsx, App.tsx, package.json, tsconfig.json, vite.config.ts), delete them. Chrome ignores extra files, but I want a clean folder. Leave metadata.json alone if AI Studio needs it.
- Keep the code plain and readable, with a short comment wherever something is not obvious. I will ask for small changes later.

## How I will install it
1. Export the project as a zip and unzip it on my desktop.
2. Open chrome://extensions and turn on Developer mode.
3. Click Load unpacked and choose the unzipped folder, the one with manifest.json inside it.
4. Pin the extension with the puzzle-piece icon next to the address bar.
End your reply with these steps and one line saying what I should see when it works.

## Important
I am not a developer. Make it work first try. Where you have to choose, pick the simplest approach that works and tell me what you chose. If I paste an error back, fix it and give me the complete updated files, not just the changed lines.

⚖️ Legal

Clause library

Your approved clauses and disclaimers in a searchable popup. One click copies the exact wording, every time.

Build me a Chrome extension. Manifest V3, plain HTML, CSS and JavaScript, every file in the project, nothing else to install.

# Clause library

## Goal
My approved clauses and disclaimers in a searchable popup. One click copies the exact wording.

## What it does
A popup with all my approved wording: contract clauses, disclaimers, standard replies. A search box at the top filters as I type. Clicking a clause copies it. Nothing gets retyped or paraphrased again.

## Features
- Each clause has a title, the text, and tags (comma separated). Add, edit, delete.
- Search matches title, text and tags, live, no button needed. Show the number of matches.
- Click a clause card to copy its text. Show "Copied" on the card for a second.
- Collapsed cards show the first two lines; a click on the title expands the full text.
- Export all clauses as a JSON file and import them back, so the whole team can share one library.
- Everything in chrome.storage.local.

## Sample data
Three clauses to start:
- "Payment terms": 50% advance on confirmation, balance before dispatch. Orders are held until the advance is received.
- "Cancellation": Cancellations accepted up to 48 hours before delivery for a full refund of the advance. Later cancellations forfeit the advance, because ingredients are ordered per job.
- "Allergen notice": Our products are made in a kitchen that handles nuts, gluten, dairy and eggs. We cannot guarantee that any product is free of these.

## Permissions
Request only these permissions in manifest.json: "storage", "clipboardWrite". Nothing else. Save everything with chrome.storage.local. Nothing leaves my browser.

## Files
Create exactly these files, all at the top level of the project, none of them empty:
- manifest.json
- popup.html
- popup.css
- popup.js
- index.html
Every file named in manifest.json must exist in the project. Do not declare icons in manifest.json: Chrome shows a default icon and that is fine.

## Rules, please follow every one
- This is a Chrome extension, not a web app. No React, no TypeScript, no Vite, no npm, no bundler, no build step. Chrome must load the folder exactly as exported.
- No scripts, styles or fonts loaded from the internet. No inline <script> blocks and no onclick attributes in the HTML: Chrome blocks both inside extensions. All JavaScript goes in the .js files, loaded with <script src="..."></script> at the end of the body.
- Keep manifest.json at the top level of the project, next to popup.html. Load unpacked has to find it there.
- Make index.html an exact copy of popup.html so the AI Studio preview shows the page. Wrap every chrome.* call so the page still renders in the preview, with the sample data, when the chrome APIs are missing.
- If the project starts with scaffold files the extension does not need (index.tsx, App.tsx, package.json, tsconfig.json, vite.config.ts), delete them. Chrome ignores extra files, but I want a clean folder. Leave metadata.json alone if AI Studio needs it.
- Keep the code plain and readable, with a short comment wherever something is not obvious. I will ask for small changes later.

## How I will install it
1. Export the project as a zip and unzip it on my desktop.
2. Open chrome://extensions and turn on Developer mode.
3. Click Load unpacked and choose the unzipped folder, the one with manifest.json inside it.
4. Pin the extension with the puzzle-piece icon next to the address bar.
End your reply with these steps and one line saying what I should see when it works.

## Important
I am not a developer. Make it work first try. Where you have to choose, pick the simplest approach that works and tell me what you chose. If I paste an error back, fix it and give me the complete updated files, not just the changed lines.

🧭 Founding & leadership

Focus tab

Replaces Chrome's new-tab page with today's one priority and a countdown to your next big date. Every new tab asks whether you're on it.

Heads up: On the first new tab after installing, Chrome asks whether to keep the change. Choose Keep it.

Build me a Chrome extension. Manifest V3, plain HTML, CSS and JavaScript, every file in the project, nothing else to install.

# Focus tab

## Goal
Replace my new-tab page with my one priority for today and a countdown to my next big date.

## What it does
Every new tab shows a calm page with one big line, my priority for today, and under it a countdown: "23 days to Diwali orders open". Nothing else. Every new tab asks whether I am on it.

## Features
- The priority line is editable in place: click it, type, press Enter or click away to save. A gentle placeholder ("What is the one thing today?") when it is empty.
- Countdown: an event name and a date, set through a small settings gear in a corner. Shows days remaining, "Today" on the day, and switches to "N days since" afterwards.
- Small details: the current time, and a greeting by time of day ("Good morning, Vishal") using a name set in settings.
- Design: plenty of space, a warm off-white background, large serif type for the priority, small monospace type for the countdown. Follow the system dark mode.
- Everything in chrome.storage.local so it is the same in every tab and survives restarts.
- The manifest uses "chrome_url_overrides": { "newtab": "newtab.html" }.

## Sample data
Priority: "Finish the Diwali gift box pricing". Event: "Diwali orders open", date: 1 October. Name: "Vishal".

## Permissions
Request only these permissions in manifest.json: "storage". Nothing else. Save everything with chrome.storage.local. Nothing leaves my browser.

## Files
Create exactly these files, all at the top level of the project, none of them empty:
- manifest.json
- newtab.html
- newtab.css
- newtab.js
- index.html
Every file named in manifest.json must exist in the project. Do not declare icons in manifest.json: Chrome shows a default icon and that is fine.

## Rules, please follow every one
- This is a Chrome extension, not a web app. No React, no TypeScript, no Vite, no npm, no bundler, no build step. Chrome must load the folder exactly as exported.
- No scripts, styles or fonts loaded from the internet. No inline <script> blocks and no onclick attributes in the HTML: Chrome blocks both inside extensions. All JavaScript goes in the .js files, loaded with <script src="..."></script> at the end of the body.
- Keep manifest.json at the top level of the project, next to newtab.html. Load unpacked has to find it there.
- Make index.html an exact copy of newtab.html so the AI Studio preview shows the page. Wrap every chrome.* call so the page still renders in the preview, with the sample data, when the chrome APIs are missing.
- If the project starts with scaffold files the extension does not need (index.tsx, App.tsx, package.json, tsconfig.json, vite.config.ts), delete them. Chrome ignores extra files, but I want a clean folder. Leave metadata.json alone if AI Studio needs it.
- Keep the code plain and readable, with a short comment wherever something is not obvious. I will ask for small changes later.

## How I will install it
1. Export the project as a zip and unzip it on my desktop.
2. Open chrome://extensions and turn on Developer mode.
3. Click Load unpacked and choose the unzipped folder, the one with manifest.json inside it.
4. Pin the extension with the puzzle-piece icon next to the address bar.
5. On the first new tab after installing, Chrome asks whether to keep the change. Choose Keep it.
End your reply with these steps and one line saying what I should see when it works.

## Important
I am not a developer. Make it work first try. Where you have to choose, pick the simplest approach that works and tell me what you chose. If I paste an error back, fix it and give me the complete updated files, not just the changed lines.