When I decided to build a Chrome extension to export Instagram followers, I had no idea how different it would be from regular web development that I have a lot of experience with. After a few weeks of learning and building, I want to share the tech stack that made this project possible – especially for other beginners who might be intimidated by Chrome extension development.
What I Built
An IG scraper export tool that lets users export any IG user’s followers/following lists to CSV, JSON, or Excel
The Beginner-Friendly Tech Stack
🚀 Wxt Framework – The Beginner’s Best Friend
If you’re new to Chrome extensions, start with Wxt. Trust me on this one.
Why Wxt is perfect for beginners:
- ✅ Hot reload (save your file, extension updates instantly!)
- ✅ Automatic file watching and building
- ✅ No complex webpack configurations
- ✅ Great documentation with examples
- ✅ TypeScript support without setup headaches
⚛️ React + TypeScript + sahdcn – Building User Interfaces
Just something I am familiar with. No issues here.
🗄️ Chrome Storage API – Saving Data
Chrome extensions can save data locally using the Storage API:
// Save data await chrome.storage.local.set({ username: 'john_doe', settings: { theme: 'dark' } }); // Get data back const result = await chrome.storage.local.get(['username', 'settings']); console.log(result.username); // 'john_doe' The Chrome Extension Architecture (Simplified)
Chrome extensions have a few key parts:
1. Background Script (The Brain)
// This runs in the background and handles logic chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.type === 'START_EXPORT') { // Start the export process startExport(message.data); sendResponse({ success: true }); } }); 2. Options Page (The UI)
// This is your React app - just like any web app! const OptionsApp = () => { return ( <div> <h1>My Extension Settings</h1> <button onClick={() => startExport()}> Start Export </button> </div> ); }; 3. Message Passing (Communication)
// From UI to background script const startExport = async () => { const response = await chrome.runtime.sendMessage({ type: 'START_EXPORT', data: { username: 'example' } }); if (response.success) { console.log('Export started!'); } }; What I Learned as a Beginner
1. Start with Wxt, Not Vanilla
Don’t try to learn Chrome extensions the hard way. Wxt removes so much complexity that you can focus on building features instead of fighting configuration.
2. Chrome Extensions Are Just Web Apps
Once I realized this, everything clicked. Same JavaScript, same React, same CSS – just with some extra Chrome APIs.
3. Storage is Your Friend
Chrome’s storage API is simple and reliable. Use it to save user settings, progress, and temporary data.
Source: DEV Community.
Leave a Reply