Max

Posted on Sep 8

My Tech Stack for IG Exporter Chrome Extension

Building My First Chrome Extension: A Beginner's Journey with Modern Web Tech

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.

DEV Community