{"schemaVersion":"1.0","source":"The Workflow Finder","sourceUrl":"https://www.theworkflowfinder.com","license":"Free to use with attribution and a link to the cited page","generated":"2026-08-28","workflow":{"title":"Build a Chrome Extension from Scratch","slug":"build-chrome-extension-from-scratch","url":"https://www.theworkflowfinder.com/workflows/build-chrome-extension-from-scratch","description":"Go from idea to a working, installable Chrome extension in an afternoon, no prior extension experience required.","difficulty":"Intermediate","timeEstimate":"2–4 hrs","schemaDuration":"PT4H","expectedResult":"A working Chrome extension installed in developer mode, with core functionality running and ready for testing.","tags":["Development","Coding","Automation"]},"steps":[{"position":1,"title":"Define the Extension's Single Job","instructions":"Write a one-paragraph brief describing exactly what your extension does on a webpage. The clearer the constraint, the faster the build.","input":"Workflow inputs: the topic, goal, or raw materials the user is starting from.","output":"Handoff artifact consumed by Step 2 (\"Generate the Manifest and File Structure\").","toolSlots":[{"slug":"chatgpt","name":"ChatGPT","url":"https://www.theworkflowfinder.com/tools/chatgpt","category":"Writing","pricing":"paid","capabilities":["Long-form writing","Code generation","Web research"],"hasApi":true}]},{"position":2,"title":"Generate the Manifest and File Structure","instructions":"Paste the brief into Cursor and ask it to generate a manifest.json, popup.html, background.js, and content.js with the correct permissions for your use case.","input":"Output of Step 1 (\"Define the Extension's Single Job\").","output":"Handoff artifact consumed by Step 3 (\"Build the Core Functionality\").","toolSlots":[{"slug":"cursor","name":"Cursor","url":"https://www.theworkflowfinder.com/tools/cursor","category":"Coding","pricing":"freemium","capabilities":["Code generation","Code review","Debugging assistance"]}]},{"position":3,"title":"Build the Core Functionality","instructions":"Work through each file in Cursor, describing the behavior you want and letting the AI implement it. Describe edge cases as you discover them.","input":"Output of Step 2 (\"Generate the Manifest and File Structure\").","output":"Handoff artifact consumed by Step 4 (\"Design the Popup UI\").","toolSlots":[{"slug":"cursor","name":"Cursor","url":"https://www.theworkflowfinder.com/tools/cursor","category":"Coding","pricing":"freemium","capabilities":["Code generation","Code review","Debugging assistance"]}]},{"position":4,"title":"Design the Popup UI","instructions":"Ask V0 by Vercel to generate a React or vanilla HTML/CSS popup interface matching your extension's functionality, then paste the output into popup.html.","input":"Output of Step 3 (\"Build the Core Functionality\").","output":"Handoff artifact consumed by Step 5 (\"Test and Iterate\").","toolSlots":[]},{"position":5,"title":"Test and Iterate","instructions":"Load the extension in Chrome developer mode, test all functionality, and use Cursor to fix any bugs that surface. Ask Phind for any Chrome API questions.","input":"Output of Step 4 (\"Design the Popup UI\").","output":"Final workflow output: A working Chrome extension installed in developer mode, with core functionality running and ready for testing.","toolSlots":[{"slug":"phind","name":"Phind","url":"https://www.theworkflowfinder.com/tools/phind","category":"Coding","pricing":"freemium"},{"slug":"cursor","name":"Cursor","url":"https://www.theworkflowfinder.com/tools/cursor","category":"Coding","pricing":"freemium","capabilities":["Code generation","Code review","Debugging assistance"]}]}]}