Build Chrome Extension with AI Coding Tools

Step 1: Plan Extension & Generate Manifest

ChatGPT Free+

Go to chat.openai.com → In a new chat, describe your extension idea (e.g., 'a simple extension that changes the background color of any webpage to light blue') → Ask it to write a basic manifest.json file for a Chrome extension.

Step 2: Create Core Scripts (HTML, JS, CSS)

Cursor Free+

Download and install Cursor (cursor.sh) → Create a new project folder → Open the folder in Cursor → Use the AI chat (Cmd/Ctrl+K) to ask for the popup.html, popup.js, and content.js files based on your manifest. Example: 'Write a popup.html with a button, and a content.js script that injects a style to change page background to light blue.'

Open Chrome → Go to chrome://extensions/ → Enable 'Developer mode' (top right) → Click 'Load unpacked' → Select your project folder → Your extension will appear. Click its icon to test the button. If it fails, open the Chrome Developer Console (F12) for errors and use Cursor's AI to fix the code.

For a professional icon: Go to leonardo.ai or getimg.ai → In the text-to-image prompt, describe a simple icon (e.g., 'a minimalist blue cube icon, flat design, 128x128 pixels') → Download the image, save it as 'icon128.png' in your folder, and reference it in your manifest.json. Finally, in chrome://extensions/, click 'Pack extension' to create a .zip file for distribution.