┌─────────────────────────────────────────────────┐
│                                                 │
│  Search / Browse  ──>  Impression               │
│        │                                        │
│        ▼                                        │
│  Name + Icon + Short Description                │
│        │                                        │
│        ▼                                        │
│  Detail Page View                               │
│        │                                        │
│        ▼                                        │
│  Screenshots + Description + Reviews + Rating   │
│        │                                        │
│        ▼                                        │
│  "Add to Chrome" Click                          │
│        │                                        │
│        ▼                                        │
│  Permission Dialog  ──>  Confirm / Abandon      │
│        │                                        │
│        ▼                                        │
│  Active User (Day 1, Day 7, Day 28)            │
│                                                 │
└─────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│  BAD:                                                   │
│  Name: "SuperHelper"                                    │
│  Desc: "A Chrome extension that helps you do things     │
│         better and faster on the web."                  │
├─────────────────────────────────────────────────────────┤
│  GOOD:                                                  │
│  Name: "Tab Suspender - Save Memory Automatically"      │
│  Desc: "Suspends inactive tabs to free up RAM.          │
│         Whitelist sites, set timers, auto-restore.      │
│         Lightweight — under 50KB, no permissions."      │
└─────────────────────────────────────────────────────────┘

Too many tabs? Your browser is eating 8GB of RAM and your laptop fan
sounds like a jet engine.

Tab Suspender automatically hibernates tabs you haven't used in a while,
freeing memory instantly — without closing anything.

FEATURES
- Automatically suspend tabs after a configurable timeout (30s to 24h)
- Whitelist domains you never want suspended
- Suspend all tabs with one click or keyboard shortcut
- Auto-restore tabs when you click on them
- Pin and group aware — never suspends pinned or grouped tabs
- Dark mode support that follows your system theme
- Under 50KB total size — no bloat, no tracking

HOW IT WORKS
1. Install the extension — no configuration needed
2. Tabs you ignore for 30 minutes get suspended automatically
3. Click a suspended tab to restore it instantly
4. Customize timers and whitelist in the options page

TRUSTED BY 200,000+ USERS
★★★★★ "Best tab manager I've tried. Actually works." — Chrome Web Store review
★★★★★ "Finally, my MacBook runs cool again." — Chrome Web Store review
Featured in Lifehacker's "Best Browser Extensions of 2026"

PRIVACY FIRST
- Zero data collection — no analytics, no tracking, no server calls
- All data stays in your browser's local storage
- Open source: github.com/example/tab-suspender
- Permissions: only "tabs" — needed to detect inactive tabs

SUPPORT
Website: https://example.com/tab-suspender
Report issues: https://github.com/example/tab-suspender/issues
Changelog: https://example.com/tab-suspender/changelog

// scripts/generate-screenshots.ts
import puppeteer from "puppeteer";

const VIEWPORT = { width: 1280, height: 800, deviceScaleFactor: 2 };

async function capturePopup(outputPath: string): Promise<void> {
  const browser = await puppeteer.launch({
    headless: true,
    args: [
      `--disable-extensions-except=./dist`,
      `--load-extension=./dist`,
    ],
  });

  const page = await browser.newPage();
  await page.setViewport(VIEWPORT);

  // Open the popup HTML directly
  await page.goto(`chrome-extension://${extensionId}/popup.html`);
  await page.waitForSelector("[data-ready]");

  await page.screenshot({ path: outputPath, type: "png" });
  await browser.close();
}

// Add annotation overlay using canvas
async function annotateScreenshot(
  inputPath: string,
  caption: string,
  outputPath: string
): Promise<void> {
  // Use sharp or canvas to add a caption bar
  const sharp = await import("sharp");
  const image = sharp.default(inputPath);
  const metadata = await image.metadata();

  const captionHeight = 60;
  const captionBar = Buffer.from(
    `<svg width="${metadata.width}" height="${captionHeight}">
      <rect width="100%" height="100%" fill="#1a73e8"/>
      <text x="50%" y="50%" dominant-baseline="middle"
            text-anchor="middle" fill="white"
            font-family="system-ui" font-size="24" font-weight="600">
        ${caption}
      </text>
    </svg>`
  );

  await image
    .composite([{ input: captionBar, gravity: "south" }])
    .toFile(outputPath);
}

┌──────────────────────────────┐
│                              │
│         ┌──────┐             │
│         │ Icon │             │
│         └──────┘             │
│                              │
│     Extension Name           │
│   One-line value prop        │
│                              │
└──────────────────────────────┘
  440 x 280 — small promo tile

// scripts/research-competitors.ts
// Fetch a competitor's store listing and extract metadata
async function getStoreListing(extensionId: string) {
  const url = `https://chrome.google.com/webstore/detail/${extensionId}`;
  const response = await fetch(url);
  const html = await response.text();

  // Extract the category from structured data
  const categoryMatch = html.match(/"category":"([^"]+)"/);
  const category = categoryMatch?.[1] ?? "unknown";

  return { extensionId, category, url };
}

// Compare your listing against top results
async function auditCompetitors(keyword: string): Promise<void> {
  console.log(`Auditing top results for: "${keyword}"`);
  console.log("---");
  console.log("Action items:");
  console.log("1. Compare your name/description keyword density");
  console.log("2. Note which categories competitors chose");
  console.log("3. Check if your screenshots follow similar patterns");
  console.log("4. Review their update frequency vs yours");
}

BUG REPORT (negative review):
"Thank you for reporting this — we identified the issue and shipped
a fix in version X.Y.Z. Please update the extension and let us know
if the problem persists. You can also reach us at [support email]
for faster resolution."

FEATURE REQUEST (neutral review):
"Great suggestion! We've added this to our roadmap. You can track
progress at [GitHub issue link]. Thanks for helping us improve."

POSITIVE REVIEW:
"Thank you! Glad it's helping. If you have ideas for improvements,
we're always listening at [support link]."

// background.ts
import { createStorage, defineSchema } from "@theluckystrike/webext-storage";

const schema = defineSchema({
  installDate: { type: "number", default: 0 },
  actionsCompleted: { type: "number", default: 0 },
  reviewPromptShown: { type: "boolean", default: false },
});

const storage = createStorage(schema);

chrome.runtime.onInstalled.addListener(async (details) => {
  if (details.reason === "install") {
    await storage.set({ installDate: Date.now() });
  }
});

// Call this after the user completes a core action
async function trackAction(): Promise<void> {
  const data = await storage.get([
    "actionsCompleted",
    "installDate",
    "reviewPromptShown",
  ]);

  const newCount = data.actionsCompleted + 1;
  await storage.set({ actionsCompleted: newCount });

  // Show review prompt after 7+ days AND 10+ actions AND not yet shown
  const daysSinceInstall =
    (Date.now() - data.installDate) / (1000 * 60 * 60 * 24);

  if (daysSinceInstall >= 7 && newCount >= 10 && !data.reviewPromptShown) {
    await storage.set({ reviewPromptShown: true });
    showReviewPrompt();
  }
}

function showReviewPrompt(): void {
  // Send message to popup or inject a subtle banner
  chrome.runtime.sendMessage({
    type: "SHOW_REVIEW_PROMPT",
    payload: {
      message: "Enjoying Tab Suspender? A quick review helps others find it.",
      reviewUrl: `https://chromewebstore.google.com/detail/${chrome.runtime.id}/reviews`,
    },
  }).catch(() => { /* popup not open */ });
}

// manifest.json — minimal required permissions
{
  "permissions": ["storage"],
  "optional_permissions": ["tabs", "activeTab", "notifications"],
  "optional_host_permissions": ["https://*/*"]
}

// Request permissions only when the user triggers a feature
async function requestTabsPermission(): Promise<boolean> {
  return chrome.permissions.request({
    permissions: ["tabs"],
  });
}

// background.ts
chrome.runtime.onInstalled.addListener((details) => {
  if (details.reason === "install") {
    chrome.tabs.create({
      url: chrome.runtime.getURL("onboarding.html"),
    });
  }
});

// scripts/track-listing-stats.ts
// Fetch store stats using the Chrome Web Store Publish API
// Requires OAuth2 credentials from the Chrome Developer Dashboard

interface StoreStats {
  date: string;
  impressions: number;
  detailViews: number;
  installs: number;
  uninstalls: number;
  activeUsers: number;
}

async function fetchStats(
  accessToken: string,
  extensionId: string,
  startDate: string,
  endDate: string
): Promise<StoreStats[]> {
  const response = await fetch(
    `https://www.googleapis.com/chromewebstore/v1.1/items/${extensionId}/stats?` +
    `startDate=${startDate}&endDate=${endDate}`,
    {
      headers: { Authorization: `Bearer ${accessToken}` },
    }
  );

  if (!response.ok) {
    throw new Error(`Stats API error: ${response.status}`);
  }

  return response.json();
}

// Compare two periods
function compareperiods(
  baseline: StoreStats[],
  test: StoreStats[]
): void {
  const sum = (stats: StoreStats[], key: keyof StoreStats) =>
    stats.reduce((acc, s) => acc + (s[key] as number), 0);

  const baselineInstallRate =
    sum(baseline, "installs") / sum(baseline, "detailViews");
  const testInstallRate =
    sum(test, "installs") / sum(test, "detailViews");

  const lift = ((testInstallRate - baselineInstallRate) / baselineInstallRate) * 100;

  console.log(`Baseline install rate: ${(baselineInstallRate * 100).toFixed(1)}%`);
  console.log(`Test install rate:     ${(testInstallRate * 100).toFixed(1)}%`);
  console.log(`Lift:                  ${lift > 0 ? "+" : ""}${lift.toFixed(1)}%`);
}

← Previous storage-quota-management Next → streaming-sse-patterns