Display VS Code extension stats from Marketplace API

[michaeldistel]

Problem

Homepage doesn't show extension credibility:

• No install count
• No rating/reviews
• No social proof
• Users don't know if extension is popular

Solution

Fetch stats from VS Code Marketplace API:

// src/lib/api/vscode-marketplace.ts
export async function getExtensionStats(extensionId: string) {
  const response = await fetch('https://marketplace.visualstudio.com/_apis/public/gallery/extensionquery', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      filters: [{
        criteria: [{ filterType: 7, value: extensionId }]
      }],
      flags: 914
    })
  });
  
  const data = await response.json();
  const ext = data.results[0].extensions[0];
  
  return {
    installs: ext.statistics.find(s => s.statisticName === 'install')?.value ?? 0,
    rating: ext.statistics.find(s => s.statisticName === 'averagerating')?.value ?? 0,
    ratingCount: ext.statistics.find(s => s.statisticName === 'ratingcount')?.value ?? 0,
    lastUpdated: ext.lastUpdated,
    version: ext.versions[0].version
  };
}

Display Component

<!-- src/lib/components/ExtensionStats.svelte -->
<script>
  import { onMount } from 'svelte';
  import { getExtensionStats } from '$lib/api/vscode-marketplace';
  
  let stats = { installs: 0, rating: 0, ratingCount: 0 };
  
  onMount(async () => {
    stats = await getExtensionStats('controlforge.structured-text');
  });
</script>

<div class="extension-stats">
  <div class="stat">
    <strong>{stats.installs.toLocaleString()}</strong>
    <span>Installs</span>
  </div>
  
  <div class="stat">
    <strong>
      {stats.rating.toFixed(1)} ★
    </strong>
    <span>({stats.ratingCount} reviews)</span>
  </div>
  
  <div class="stat">
    <strong>v{stats.version}</strong>
    <span>Latest Version</span>
  </div>
</div>

Caching

• Cache API response (1 hour)
• Store in localStorage
• SSR-friendly (fetch on client)

Homepage Integration

<!-- src/routes/+page.svelte -->
<section class="hero">
  <h1>ControlForge</h1>
  <p>Professional Structured Text IDE Extension</p>
  
  <ExtensionStats />
  
  <div class="cta">
    <a href="vscode:extension/controlforge.structured-text">
      Install Extension
    </a>
  </div>
</section>

Stats to Display

• Install count (primary social proof)
• Star rating (5-star display)
• Review count (credibility)
• Latest version (shows active development)
• Last updated (shows maintained)

Fallback

If API fails, show static numbers:

{#await getExtensionStats('controlforge.st')}
  <div>Loading stats...</div>
{:then stats}
  <ExtensionStats {stats} />
{:catch}
  <div class="stats-unavailable">
    Trusted by developers worldwide
  </div>
{/await}

Success Criteria

• Stats fetch from VS Code Marketplace
• Display on homepage prominently
• Cached to avoid rate limits
• Graceful degradation if API fails
• Auto-updates (client-side fetch)