Back
Lesson 14

Submitting the Extension to the Web Store

View Source Code

Overview

Publish TabNotes to Chrome Web Store and Firefox Add-ons, making it available to millions of users. This lesson covers building production packages, creating store listings, writing permission justifications, and navigating the review process.

By the end, your extension will be live and downloadable from official browser stores.

What You’ll Learn

  • Build production packages with WXT
  • Create Chrome Web Store developer account
  • Write effective store listings
  • Provide permission justifications
  • Submit to Firefox Add-ons
  • Handle review feedback
  • Update published extensions
  • Understand approval timelines

Building Production Packages

Using WXT’s Build Commands

# Build optimized bundles
bun run build
# or
npm run build

# Create store-ready zip files
bun run zip
# or
npm run zip

Output:

.output/
├── chrome-mv3/          # Unzipped Chrome build
├── firefox-mv3/         # Unzipped Firefox build
├── chrome-mv3.zip       # Ready for Chrome Web Store
└── firefox-mv3.zip      # Ready for Firefox Add-ons

Verifying Build Quality

Before submission:

  1. Load .output/chrome-mv3/ as unpacked extension
  2. Test all features work
  3. Check for console errors
  4. Verify file sizes are reasonable
  5. Ensure no development code remains

Pro Tip: Test the production build for 24 hours before submitting.

Chrome Web Store Submission

Step 1: Create Developer Account

  1. Visit Chrome Web Store Developer Dashboard
  2. Sign in with Google account
  3. Pay $5 one-time registration fee
  4. Account activates within minutes

Step 2: Upload Extension

  1. Click New Item
  2. Upload chrome-mv3.zip
  3. Wait for automatic verification
  4. Fix any errors reported

Common Upload Errors:

  • Manifest format issues
  • Invalid icon sizes
  • Missing required fields

Step 3: Complete Store Listing

Basic Information

Extension Name: TabNotes

Description (132 chars max):

Save notes for every website you visit. Notes sync across devices and stay with specific pages.

Detailed Description:

TabNotes is a simple, powerful note-taking extension for your browser.

KEY FEATURES:
• Save notes for any website
• Notes sync across your devices (when signed into Chrome)
• Visual indicator shows which pages have notes
• Clean, sticky-note interface
• Auto-save as you type

HOW TO USE:
1. Visit any website
2. Click the TabNotes icon
3. Start typing your note
4. Note saves automatically

PERFECT FOR:
• Research and studying
• Website feedback
• Shopping lists
• Remember why you bookmarked pages
• Track important info across sites

PRIVACY:
• Notes stored only in your browser
• Optional sync via Chrome sync
• No external servers
• No tracking

Open source and free forever.

Category

Select: Productivity

Language

Primary: English

Step 4: Visual Assets

Extension Icon

Upload 128×128px icon (high quality PNG)

Create 3-5 screenshots showing:

  1. Main Feature: Popup with note-taking interface
  2. Visual Indicator: Ribbon on page with notes
  3. Notes List: All notes management page
  4. Empty State: What users see first
  5. Cross-Device: Sync functionality

Screenshot Tips:

  • Use actual extension UI (no mockups)
  • Clean, uncluttered backgrounds
  • Highlight key features with annotations
  • Show value proposition immediately

Promotional Images (Optional)

  • Small tile: 440×280px
  • Large tile: 920×680px
  • Marquee: 1400×560px

Step 5: Privacy & Permissions

Single Purpose

Description:

TabNotes is a note-taking tool that allows users to save and manage notes for websites they visit.

Permission Justifications

storage:

Save user notes across browser sessions and sync across devices when user is signed into Chrome.

tabs:

Detect which website is active to load and save the correct note for that page.

scripting + host_permissions (https:///):

Inject visual indicator (ribbon) on pages with saved notes to provide instant feedback to users.

Critical: Reviewers reject vague justifications. Be specific about how each permission is used.

Step 6: Distribution

Visibility: Choose one:

  • Public: Listed in Chrome Web Store search
  • Unlisted: Accessible via direct link only
  • Private: Only accessible to specific users/domains

Geographic Distribution: Select regions where extension should be available (or select all)

Step 7: Submit for Review

  1. Review all information
  2. Click Submit for Review
  3. Wait for approval (typically 1-3 business days)

Review Process:

  • Automated malware scan
  • Manual code review
  • Permission verification
  • Policy compliance check

Firefox Add-ons Submission

Advantages of Firefox

  • No registration fee (completely free)
  • Faster reviews (often same-day)
  • More lenient (fewer rejections for minor issues)

Step 1: Create Account

  1. Visit addons.mozilla.org
  2. Sign in with Firefox account (free)
  3. Navigate to Developer Hub

Step 2: Upload Extension

  1. Click Submit a New Add-on
  2. Choose On this site (publicly listed)
  3. Upload firefox-mv3.zip

Step 3: Source Code (If Required)

Firefox requires source code for extensions using:

  • Minification
  • Bundlers (like Vite)
  • TypeScript

Create source zip:

# Exclude node_modules and build outputs
zip -r tabnotes-source.zip . -x "node_modules/*" ".output/*" "*.zip"

Upload source code and add build instructions:

BUILDING FROM SOURCE:

Requirements:
- Node.js 16+
- Bun (or npm/yarn/pnpm)

Build Steps:
1. npm install (or bun install)
2. npm run zip:firefox (or bun run zip:firefox)

Output:
- Built extension: .output/firefox-mv3.zip

Step 4: Add-on Details

Name: TabNotes

Add-on URL Slug: tabnotes-for-any-page

Summary (250 chars max):

Save notes for any website. Notes sync across devices and persist per page. Perfect for research, shopping, and remembering why you bookmarked sites.

Description: (Use similar description as Chrome Web Store)

Categories: Select 1-2:

  • Tabs
  • Productivity

License: Choose appropriate license:

  • MIT
  • Mozilla Public License 2.0
  • GNU GPL v3
  • Custom

Step 5: Upload Screenshots

  • Flexible sizing (Firefox auto-scales)
  • Same screenshots as Chrome work fine
  • Minimum 2 screenshots, maximum 10

Step 6: Submit

  1. Review all fields
  2. Submit Version
  3. Wait for automated validation
  4. Manual review (usually 1-5 days)

Firefox Review:

  • Automated code scan
  • Manual security review
  • Less strict than Chrome
  • Provides detailed feedback if rejected

Best Practices for Approval

Keep Permissions Minimal

❌ Bad:

permissions: ['storage', 'tabs', 'history', 'bookmarks', 'cookies']

✅ Good:

permissions: ['storage', 'tabs', 'scripting']

Only request what you actually use.

Clear Permission Justification

❌ Bad:

storage: "Needed for extension functionality"

✅ Good:

storage: "Save user notes across browser sessions and sync across devices when user is signed into Chrome"

Quality Screenshots

❌ Bad:

  • Blurry images
  • Inconsistent sizes
  • Unrelated content

✅ Good:

  • Sharp, high-resolution
  • Show actual extension UI
  • Demonstrate key features

Accurate Description

❌ Bad:

"The BEST extension EVER! Download NOW!!!"

✅ Good:

"Save notes for websites you visit. Notes sync across devices and stay with specific pages."

Handling Rejection

Both stores may reject submissions. Common reasons:

Chrome:

  • Excessive permissions
  • Vague permission justifications
  • Missing privacy policy (for extensions collecting data)
  • Misleading descriptions
  • Trademark violations

Firefox:

  • Security vulnerabilities
  • Obfuscated code
  • Missing source code
  • Broken functionality

Response Strategy:

  1. Read rejection email carefully
  2. Fix specific issues mentioned
  3. Test thoroughly
  4. Resubmit with explanation of changes

Updating Published Extensions

Version Updates

  1. Increment version in wxt.config.ts:
manifest: {
  version: '1.1.0'  // Was 1.0.0
}
  1. Build new package:
bun run zip

  1. Upload via store dashboard:

    • Chrome: Package tab → Upload new package
    • Firefox: Upload new version

  2. Write release notes:

Version 1.1.0
- Added search functionality to notes list
- Fixed bug with special characters
- Improved performance for large note collections
  1. Submit for review (updates also require approval)

Store Metrics

Chrome Web Store Dashboard

Track:

  • Total installations
  • Weekly active users
  • Uninstall rate
  • User reviews and ratings
  • Impression/install conversion

Firefox Add-ons Dashboard

Track:

  • Daily users
  • Downloads
  • Update adoption rate
  • Reviews and ratings

Act on Feedback:

  • Respond to reviews
  • Fix reported bugs
  • Add requested features

TabNotes Submission Results

Chrome Web Store:

  • Name: TabNotes
  • Category: Productivity
  • Permissions: storage, tabs, scripting, host_permissions
  • Review Time: ~2 days
  • Result: ✅ Approved

Firefox Add-ons:

  • Slug: tabnotes-on-any-page
  • Categories: Tabs, Productivity
  • License: Mozilla Public License 2.0
  • Review Time: ~2 days
  • Result: ✅ Approved

Both platforms approved TabNotes without issues because:

  • Minimal permissions
  • Clear justifications
  • Quality screenshots
  • Accurate descriptions
  • Followed best practices

Congratulations!

You’ve built a complete, production-ready browser extension from scratch and published it to official stores. You now understand:

  • Extension architecture and components
  • Modern development with WXT
  • Browser APIs (storage, tabs, scripting, action)
  • Cross-browser compatibility
  • Store submission processes

What’s Next:

  • Monitor user feedback
  • Iterate based on reviews
  • Add new features
  • Build more extensions

Your extension is now available to millions of users worldwide. Well done!