Build Your First Chrome Extension: Step by Step

A weekend project worth building

Here's a common annoyance: you bookmark a useful page in Chrome's native bookmarks manager and never find it again, because all you have is a flat list of URLs with forgettable titles and no tags or content search.

So why not build your own bookmarker?

It's not that hard, and it's a great first extension. A project like this teaches you more about how browsers work than most tutorials.

Chrome extensions are basically web apps (HTML, CSS, JavaScript) with extra powers. If you're brushing up on which language to use, our overview of the top programming languages in 2026 can help you decide. Extensions can read and modify any webpage, store data locally, talk to external APIs, and run background tasks. And with over 3 billion Chrome users worldwide, the distribution potential is enormous.

In this guide we'll build something practical: a Website Bookmarker extension that lets you save any webpage with custom tags, search through your bookmarks, and export them. Along the way you'll touch every major concept in Chrome extension development, including manifest configuration, popup UIs, content scripts, background service workers, the Chrome Storage API, and message passing between components.

Never built an extension before? That's fine. By the end of this guide, you'll have a fully working one.

Setting up your project

Create a new folder for your extension. This is what the structure will look like when we're done:

quick-bookmarker/
├── manifest.json
├── popup/
│   ├── popup.html
│   ├── popup.css
│   └── popup.js
├── background/
│   └── service-worker.js
├── content/
│   └── content.js
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── utils/
    └── storage.js

Every Chrome extension starts with a manifest.json file, the configuration that tells Chrome what your extension does, what permissions it needs, and which files it uses. No manifest, no extension.

Writing the manifest file (V3)

Manifest V3 is the current standard. If you stumble across tutorials using Manifest V2 with background.scripts or browser_action, those are outdated, since Chrome has been enforcing V3 since 2024 and V2 extensions can't be published to the Chrome Web Store anymore.

{
  "manifest_version": 3,
  "name": "Quick Bookmarker",
  "version": "1.0.0",
  "description": "Save and organize website bookmarks with custom tags",
  "permissions": [
    "storage",
    "activeTab",
    "tabs"
  ],
  "action": {
    "default_popup": "popup/popup.html",
    "default_icon": {
      "16": "icons/icon16.webp",
      "48": "icons/icon48.webp",
      "128": "icons/icon128.webp"
    }
  },
  "background": {
    "service_worker": "background/service-worker.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content/content.js"],
      "run_at": "document_idle"
    }
  ],
  "icons": {
    "16": "icons/icon16.webp",
    "48": "icons/icon48.webp",
    "128": "icons/icon128.webp"
  }
}

What each part does:

• manifest_version: 3 is required.
• permissions: storage lets us save data, activeTab gives access to the current tab when the user clicks our extension, and tabs lets us query tab information.
• action defines the popup that appears when you click the extension icon in the toolbar.
• background.service_worker replaces the old background pages from V2. Service workers are event-driven and don't persist in memory, which makes them more efficient but also trickier to work with.
• content_scripts is JavaScript that runs directly inside webpages. That's how we interact with page content.

A quick word on permissions

Request only what you need. Every permission you add is shown to users during installation, and excessive permissions scare people away; plenty of potentially great extensions get low install numbers simply because they ask for too much upfront.

The activeTab permission is particularly useful because it gives you temporary access to the current tab only when the user actively interacts with your extension. No blanket access to all browsing data. Users appreciate that.

Building the popup UI

The popup is what users see when they click your extension icon. It's a regular HTML page with some constraints: it lives in a small window (max 800x600 pixels by default) and has its own isolated DOM.

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="popup.css">
  <title>Quick Bookmarker</title>
</head>
<body>
  <div class="container">
    <header>
      <h1>Quick Bookmarker</h1>
      <button id="saveBtn" class="btn btn-primary">
        + Save Current Page
      </button>
    </header>

    <div class="search-bar">
      <input type="text" id="searchInput" placeholder="Search bookmarks..." />
    </div>

    <div id="saveForm" class="save-form hidden">
      <input type="text" id="titleInput" placeholder="Page title" />
      <input type="text" id="tagsInput" placeholder="Tags (comma separated)" />
      <textarea id="notesInput" placeholder="Notes (optional)"></textarea>
      <div class="form-actions">
        <button id="confirmSave" class="btn btn-primary">Save</button>
        <button id="cancelSave" class="btn btn-secondary">Cancel</button>
      </div>
    </div>

    <div id="bookmarkList" class="bookmark-list">
      <!-- Bookmarks will be rendered here -->
    </div>

    <footer>
      <button id="exportBtn" class="btn btn-secondary">Export All</button>
      <span id="countLabel">0 bookmarks</span>
    </footer>
  </div>

  <script src="../utils/storage.js"></script>
  <script src="popup.js"></script>
</body>
</html>

This is standard HTML with a header, search bar, save form (hidden by default), bookmark list container, and a footer with export functionality. Nothing exotic.

popup.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 380px;
  max-height: 520px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  overflow-y: auto;
}

.container {
  padding: 16px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

h1 {
  font-size: 16px;
  font-weight: 600;
  color: #f1f5f9;
}

.btn {
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.btn-primary {
  background: #3b82f6;
  color: white;
}

.btn-primary:hover {
  background: #2563eb;
}

.btn-secondary {
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid #334155;
}

.btn-secondary:hover {
  background: #334155;
}

.search-bar input {
  width: 100%;
  padding: 10px 12px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 13px;
  margin-bottom: 12px;
  outline: none;
}

.search-bar input:focus {
  border-color: #3b82f6;
}

.save-form {
  background: #1e293b;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.save-form input,
.save-form textarea {
  width: 100%;
  padding: 8px 10px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 4px;
  color: #e2e8f0;
  font-size: 13px;
  margin-bottom: 8px;
  outline: none;
  font-family: inherit;
}

.save-form textarea {
  height: 60px;
  resize: vertical;
}

.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.hidden {
  display: none;
}

.bookmark-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.bookmark-item {
  background: #1e293b;
  padding: 10px 12px;
  border-radius: 6px;
  border-left: 3px solid #3b82f6;
}

.bookmark-item .title {
  font-size: 13px;
  font-weight: 500;
  color: #f1f5f9;
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
}

.bookmark-item .title:hover {
  color: #3b82f6;
}

.bookmark-item .tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.tag {
  font-size: 11px;
  background: #0f172a;
  color: #94a3b8;
  padding: 2px 8px;
  border-radius: 10px;
}

.bookmark-item .meta {
  font-size: 11px;
  color: #64748b;
  display: flex;
  justify-content: space-between;
}

.delete-btn {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 12px;
}

.delete-btn:hover {
  color: #ef4444;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #1e293b;
}

#countLabel {
  font-size: 12px;
  color: #64748b;
}

It's a dark theme with a clean layout, plain CSS that will look professional in a 380px popup window. Adjust the colors and spacing to your taste, since making it yours is half the fun.

Building a storage utility

Before we write the popup logic, let's create a reusable storage module. Chrome's storage.local API is asynchronous and stores data persistently across browser sessions. It behaves differently from localStorage. More on why in a second.

utils/storage.js

const BookmarkStorage = {
  async getAll() {
    const result = await chrome.storage.local.get('bookmarks');
    return result.bookmarks || [];
  },

  async save(bookmark) {
    const bookmarks = await this.getAll();
    bookmark.id = Date.now().toString();
    bookmark.createdAt = new Date().toISOString();
    bookmarks.unshift(bookmark);
    await chrome.storage.local.set({ bookmarks });
    return bookmark;
  },

  async remove(id) {
    const bookmarks = await this.getAll();
    const filtered = bookmarks.filter(b => b.id !== id);
    await chrome.storage.local.set({ bookmarks: filtered });
  },

  async search(query) {
    const bookmarks = await this.getAll();
    const lower = query.toLowerCase();
    return bookmarks.filter(b =>
      b.title.toLowerCase().includes(lower) ||
      b.url.toLowerCase().includes(lower) ||
      b.tags.some(t => t.toLowerCase().includes(lower)) ||
      (b.notes && b.notes.toLowerCase().includes(lower))
    );
  },

  async exportAll() {
    const bookmarks = await this.getAll();
    return JSON.stringify(bookmarks, null, 2);
  },

  async getCount() {
    const bookmarks = await this.getAll();
    return bookmarks.length;
  }
};

So why chrome.storage.local instead of regular localStorage? chrome.storage.local persists across sessions, syncs between extension components (popup, background, content scripts), and can store up to 10MB of data. Regular localStorage does survive the popup closing (it's tied to the extension's origin), but the Manifest V3 service worker can't touch it, and content scripts reading localStorage get the web page's storage, not yours. For anything the whole extension shares, that rules it out.

There's also chrome.storage.sync, which syncs data across the user's Chrome browsers via their Google account. Sounds appealing. The catch is a much smaller storage limit of 100KB total, and since a bookmarker might store hundreds of entries (you'd probably hit the sync limit within a few weeks of heavy use), local is the right call.

Popup logic

This is the JavaScript that makes the popup work.

popup.js

document.addEventListener('DOMContentLoaded', async () => {
  const saveBtn = document.getElementById('saveBtn');
  const saveForm = document.getElementById('saveForm');
  const confirmSave = document.getElementById('confirmSave');
  const cancelSave = document.getElementById('cancelSave');
  const searchInput = document.getElementById('searchInput');
  const bookmarkList = document.getElementById('bookmarkList');
  const exportBtn = document.getElementById('exportBtn');
  const countLabel = document.getElementById('countLabel');

  // Load bookmarks on open
  await renderBookmarks();

  // Save button toggles the form
  saveBtn.addEventListener('click', async () => {
    saveForm.classList.toggle('hidden');

    if (!saveForm.classList.contains('hidden')) {
      // Pre-fill with current tab info
      const [tab] = await chrome.tabs.query({
        active: true,
        currentWindow: true
      });
      document.getElementById('titleInput').value = tab.title || '';
      document.getElementById('tagsInput').value = '';
      document.getElementById('notesInput').value = '';
    }
  });

  cancelSave.addEventListener('click', () => {
    saveForm.classList.add('hidden');
  });

  // Confirm save
  confirmSave.addEventListener('click', async () => {
    const [tab] = await chrome.tabs.query({
      active: true,
      currentWindow: true
    });

    const title = document.getElementById('titleInput').value.trim();
    const tagsRaw = document.getElementById('tagsInput').value.trim();
    const notes = document.getElementById('notesInput').value.trim();

    if (!title) return;

    const tags = tagsRaw
      ? tagsRaw.split(',').map(t => t.trim()).filter(Boolean)
      : [];

    await BookmarkStorage.save({
      title,
      url: tab.url,
      tags,
      notes,
      favicon: tab.favIconUrl || ''
    });

    saveForm.classList.add('hidden');
    await renderBookmarks();

    // Notify background to update badge
    chrome.runtime.sendMessage({ type: 'BOOKMARK_SAVED' });
  });

  // Search with debounce
  let searchTimeout;
  searchInput.addEventListener('input', () => {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(async () => {
      const query = searchInput.value.trim();
      if (query) {
        const results = await BookmarkStorage.search(query);
        renderBookmarkItems(results);
      } else {
        await renderBookmarks();
      }
    }, 250);
  });

  // Export
  exportBtn.addEventListener('click', async () => {
    const data = await BookmarkStorage.exportAll();
    const blob = new Blob([data], { type: 'application/json' });
    const url = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = 'bookmarks-export.json';
    a.click();
    URL.revokeObjectURL(url);
  });

  // Render functions
  async function renderBookmarks() {
    const bookmarks = await BookmarkStorage.getAll();
    renderBookmarkItems(bookmarks);
    const count = bookmarks.length;
    countLabel.textContent = `${count} bookmark${count !== 1 ? 's' : ''}`;
  }

  function renderBookmarkItems(bookmarks) {
    if (bookmarks.length === 0) {
      bookmarkList.innerHTML = `
        <div style="text-align:center; padding:24px; color:#64748b; font-size:13px;">
          No bookmarks yet. Save your first page!
        </div>`;
      return;
    }

    bookmarkList.innerHTML = bookmarks.map(b => `
      <div class="bookmark-item" data-id="${b.id}">
        <a href="${b.url}" target="_blank" class="title">${escapeHtml(b.title)}</a>
        <div class="tags">
          ${b.tags.map(t => `<span class="tag">${escapeHtml(t)}</span>`).join('')}
        </div>
        <div class="meta">
          <span>${formatDate(b.createdAt)}</span>
          <button class="delete-btn" data-id="${b.id}">Delete</button>
        </div>
      </div>
    `).join('');

    // Attach delete handlers
    document.querySelectorAll('.delete-btn').forEach(btn => {
      btn.addEventListener('click', async (e) => {
        e.stopPropagation();
        await BookmarkStorage.remove(btn.dataset.id);
        await renderBookmarks();
        chrome.runtime.sendMessage({ type: 'BOOKMARK_DELETED' });
      });
    });
  }

  function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }

  function formatDate(isoString) {
    const date = new Date(isoString);
    return date.toLocaleDateString('en-IN', {
      day: 'numeric', month: 'short', year: 'numeric'
    });
  }
});

That's a lot of code. Taken piece by piece, though, it's straightforward: we render bookmarks when the popup opens, handle saves with tag parsing, run a debounced search (250ms delay so we don't fire a search on every single keystroke), and provide an export feature that creates a downloadable JSON file. Notice how chrome.tabs.query grabs the current tab's info, which is why we needed the tabs permission in the manifest.

This is a good point to pause and test whether everything works so far. You can do that without writing the rest of the code.

Background service worker

Service workers run in the background without a visible page. In Manifest V3 they're event-driven, waking up when events occur and going back to sleep when idle, which is very different from V2's persistent background pages and trips up a lot of people who are used to the old model.

background/service-worker.js

// Update badge count when bookmarks change
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'BOOKMARK_SAVED' || message.type === 'BOOKMARK_DELETED') {
    updateBadgeCount();
  }
});

// Set badge count on extension install/update
chrome.runtime.onInstalled.addListener(() => {
  updateBadgeCount();
});

// Also update on browser startup
chrome.runtime.onStartup.addListener(() => {
  updateBadgeCount();
});

async function updateBadgeCount() {
  const result = await chrome.storage.local.get('bookmarks');
  const count = (result.bookmarks || []).length;

  await chrome.action.setBadgeText({
    text: count > 0 ? count.toString() : ''
  });
  await chrome.action.setBadgeBackgroundColor({
    color: '#3b82f6'
  });
}

// Context menu for right-click saving
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'quickSave',
    title: 'Save to Quick Bookmarker',
    contexts: ['page', 'link']
  });
});

chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId === 'quickSave') {
    const url = info.linkUrl || info.pageUrl;
    const title = tab.title || url;

    const result = await chrome.storage.local.get('bookmarks');
    const bookmarks = result.bookmarks || [];

    bookmarks.unshift({
      id: Date.now().toString(),
      title,
      url,
      tags: ['quick-save'],
      notes: '',
      favicon: tab.favIconUrl || '',
      createdAt: new Date().toISOString()
    });

    await chrome.storage.local.set({ bookmarks });
    updateBadgeCount();
  }
});

This adds two nice features: a badge count showing how many bookmarks you've saved (that little number on the extension icon), and a context menu option to save a page or link with a right-click. For the context menu to work, you'll need to add "contextMenus" to your permissions.

Update your manifest permissions:

"permissions": [
  "storage",
  "activeTab",
  "tabs",
  "contextMenus"
]

Don't store state in global variables inside the service worker. It can terminate and restart at any time, so use chrome.storage for anything that needs to persist. I learned this the hard way when my badge count kept resetting to zero.

Content script

Content scripts run inside web pages and can read and modify the DOM of any page matching the URL pattern in your manifest. For our bookmarker, we'll use a content script to extract metadata from pages, like descriptions, keywords, and Open Graph images.

content/content.js

// Listen for messages from the popup or background
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'GET_PAGE_META') {
    const meta = extractPageMetadata();
    sendResponse(meta);
  }
  return true; // Keep the message channel open for async response
});

function extractPageMetadata() {
  const meta = {
    title: document.title,
    description: '',
    keywords: [],
    ogImage: '',
    author: ''
  };

  // Meta description
  const descTag = document.querySelector('meta[name="description"]')
    || document.querySelector('meta[property="og:description"]');
  if (descTag) {
    meta.description = descTag.getAttribute('content') || '';
  }

  // Keywords
  const keywordsTag = document.querySelector('meta[name="keywords"]');
  if (keywordsTag) {
    meta.keywords = keywordsTag.getAttribute('content')
      .split(',')
      .map(k => k.trim())
      .filter(Boolean);
  }

  // OG Image
  const ogImage = document.querySelector('meta[property="og:image"]');
  if (ogImage) {
    meta.ogImage = ogImage.getAttribute('content') || '';
  }

  // Author
  const authorTag = document.querySelector('meta[name="author"]');
  if (authorTag) {
    meta.author = authorTag.getAttribute('content') || '';
  }

  return meta;
}

The content script listens for a GET_PAGE_META message and responds with metadata pulled from the page's meta tags. Your popup could use this to auto-populate tags based on page keywords or show a preview image. Plenty of pages skip these meta tags. The code falls back to empty strings and arrays when one is missing.

How message passing works

Message passing is how the different parts of your extension talk to each other. Quick reference:

The confusing bit is that content scripts and the popup both use chrome.runtime.sendMessage to send messages, yet they run in completely different contexts. Content scripts live inside the webpage (with some isolation), while the popup lives in the extension's own context, so they might as well be on different planets connected only by this message-passing bridge. Once that clicks, the whole architecture makes sense.

Testing and debugging

Loading your extension

1. Open Chrome and go to chrome://extensions/
2. Enable Developer mode (toggle in the top right)
3. Click Load unpacked and select your extension folder
4. Your extension icon should appear in the toolbar

That's it. You have a running extension.

Debugging tips that'll save you time

• Popup: right-click the extension icon and choose Inspect popup. This opens DevTools for the popup, where you can see console logs, set breakpoints, and inspect the DOM. I open it maybe a hundred times per project.
• Service worker: on chrome://extensions/, click Inspect views: service worker under your extension. This opens DevTools for the background script.
• Content scripts: open DevTools on any page (F12), go to the Sources tab, and look under Content scripts in the file tree. You can set breakpoints directly in your content script code there.
• Storage inspection: in any extension DevTools console, run chrome.storage.local.get(null, console.log) to dump all stored data, which is very handy when something isn't saving correctly.

Mistakes everyone makes (including me)

1. Forgetting to reload. After changing manifest.json, you must click the reload button on chrome://extensions/. Changes to popup HTML/CSS/JS take effect the next time the popup opens, but manifest changes need an explicit reload, and I've wasted embarrassing amounts of time wondering why my changes weren't showing up.
2. Service worker state vanishing. V3 service workers aren't persistent, so keep state in chrome.storage instead of global variables. Your service worker can terminate and restart whenever Chrome feels like it.
3. CSP violations. Extensions have a strict Content Security Policy. You can't use inline scripts (onclick="...") or eval(), and all JavaScript must be in separate .js files, without exception.
4. Silent permission errors. If an API call fails silently, check that you have the required permission in manifest.json. Chrome doesn't always give a helpful error for a missing permission. The call just doesn't work. Frustrating. Get into the habit of checking permissions first and you'll save yourself a lot of head-scratching.

Publishing to the Chrome Web Store

Once your extension works locally, you can publish it.

1. Create a developer account at the Chrome Web Store Developer Dashboard. There's a one-time $5 registration fee.
2. Prepare your assets:
   • Extension icons at 128x128 pixels
   • At least one screenshot (1280x800 or 640x400)
   • A promotional tile image (440x280)
   • A detailed description (this affects search ranking, so don't skimp)
3. Package your extension. Zip your extension folder itself so the zip contains manifest.json at the root level. Zipping the parent folder instead is probably the most common publishing mistake.
4. Upload and fill in details: category, language, pricing (free or paid).
5. Submit for review. Google reviews all submissions, and simple extensions typically get approved within 1-3 business days. Extensions requesting powerful permissions like <all_urls> or webRequest face more scrutiny and might take longer.

Why extensions get rejected

Common rejection reasons:

• Overly broad permissions, such as requesting access to all URLs when you only need specific ones
• A missing privacy policy, which is required if your extension collects any user data
• A misleading description that claims features that don't exist
• Violating the single-purpose policy, which says each extension should do one primary thing

Don't get discouraged if you're rejected on the first try. It happens to everyone. Read the rejection reason carefully, fix the issue, and resubmit. Google's review process seems to have gotten stricter over the past year, which is arguably good for the ecosystem.

Making money from extensions

If you build something valuable, there are several ways to turn it into income:

• Freemium: free core features with a paid upgrade. Use chrome.storage.sync to track plan status, and verify it with your server.
• One-time purchase: the Chrome Web Store supports paid extensions, though this has become less common.
• Subscription via your own server: integrate with Stripe or Razorpay, and have your extension check subscription status via API calls.
• Donations: add a "Buy me a coffee" link. This works surprisingly well for popular utilities.
• Affiliate links: if your extension relates to products or services, tasteful affiliate integration can generate revenue.

Freemium tends to work best, I think. Give real value for free, and make the premium tier good enough that upgrading feels like an easy choice, because nobody likes being strong-armed into paying for something that felt free five minutes ago.

Ideas to take it further

If you want to keep building on this, a few directions you could go:

• Sync with a backend: store bookmarks in a database so they persist across devices, even when you're not signed into Chrome
• Keyboard shortcuts: define shortcuts in manifest.json under "commands" so users can save pages without clicking anything
• Import bookmarks: add a JSON/CSV import feature to go with the export
• Tagging suggestions: use the content script's metadata extraction to suggest tags automatically based on page keywords
• Offline support: cache saved bookmarks for offline access using the Cache API

Extension development is a skill that compounds. Once you understand the architecture (manifest, popup, content scripts, service workers, message passing), you can build almost anything, from browser automation tools and productivity helpers to developer utilities and accessibility aids. Same structure. Different logic.

Now ship it

My challenge to you: don't read this guide and close the tab. Build the extension today, or this weekend, or whenever suits you.

It doesn't have to be the bookmarker we made here; build whatever scratches your own itch. Maybe that's a tab organizer, a reading time estimator, a page highlighter, or a quick note-taker that's faster than Notion. The point is to go from "I should build a Chrome extension someday" to "I built a Chrome extension."

There's real satisfaction in seeing your first extension's icon appear in Chrome's toolbar: something you built, living right inside the browser and ready to help every day. If you want to level up your version control workflow for projects like this, our Git and GitHub mastery guide covers everything beyond the basics.

Shipping something people can install and use immediately is deeply satisfying, with no app store review taking two weeks and no infrastructure to manage. Zip it, upload it, and it's live.