StripeサブスクリプションとWeb Store公開の連携

便利なマイクロSaaSを開発した後、最も重要なステップは「収益化」と「公開」です。 Chrome拡張機能の課金モデルは通常のウェブサイトとは少し異なります。なぜなら、複雑なアカウントログインシステムを処理する独自サーバーを持っていないからです。このレッスンでは、最もスマートで軽量な方法であるStripe Payment Links（支払いリンク）とSupabaseを組み合わせて、サブスクリプション制のメンバー認証を完成させる方法を学びます。

最後に、Chrome Web Storeの公開プロセスを踏み、世界中の数十億のChromeユーザーがあなたの製品を見つけられるようにします！

1. 軽量な収益化アーキテクチャ設計

ゼロからショッピングカートやメンバーセンターを作る必要はありません。以下のアーキテクチャを採用します：

無料版（Free Tier）：拡張機能インストール後すぐに基本機能が使えます。
アップグレードボタン（Upgrade UI）：Popupに「Proにアップグレード」ボタンを配置し、クリックすると事前に作成したStripeの支払いリンクにジャンプします。
Stripe Checkout：ユーザーがStripeページでクレジットカード情報を入力し、Emailアドレスを提供します。
認証メカニズム（License Key / Email）：支払い完了後、StripeがWebhookを通じてバックエンド（例：Supabase Edge Functions）に通知し、該当ユーザーのEmailをis_pro: trueとしてマークします。
拡張機能側の認証：ユーザーがOptionsページで自分のEmailを入力（またはLicense Keyを送信して入力）。拡張機能のService WorkerがAPIを呼び出してそのEmailがProかどうかを確認し、もしProならchrome.storage.localに権限を書き込み、高度な機能を解除します！

2. Stripe支払いリダイレクトの実装

このフローを実装するために、拡張機能内で複雑な決済コードを書く必要はありません。

Stripeダッシュボードにログインし、「製品（Product）」を作成し、「定期課金（Recurring）」に設定します。
その製品に対して**Payment Link（支払いリンク）**を作成します。
popup.jsまたはoptions.jsでアップグレードボタンをバインドします：

// popup.js
const upgradeBtn = document.getElementById('upgrade-btn');

upgradeBtn.addEventListener('click', () => {
  const stripePaymentUrl = 'https://buy.stripe.com/test_abcdefg123456';
  
  // chrome.tabs.createを使用して新しいタブで支払いリンクを開く
  chrome.tabs.create({ url: stripePaymentUrl });
});

3. ライセンス認証ロジックの実装

ユーザーが支払いを完了し、認証用メールアドレス/キーを取得した後、Optionsページで認証用の入力ボックスを提供します。

// options.js
const verifyBtn = document.getElementById('verify-btn');
const emailInput = document.getElementById('email-input');

verifyBtn.addEventListener('click', async () => {
  const userEmail = emailInput.value;
  verifyBtn.innerText = '認証中...';

  try {
    // バックエンドAPIを呼び出して、そのメールアドレスが有料かどうかを確認
    const response = await fetch(`https://your-api.com/verify?email=${userEmail}`);
    const result = await response.json();

    if (result.isPro) {
      // 認証成功！Proステータスをstorageに書き込む
      await chrome.storage.local.set({ isProUser: true, userEmail: userEmail });
      alert('おめでとうございます！Pro版機能が解除されました。');
      
      // 他のコンポーネント（Content Scriptなど）に画面更新を通知
      // ...
    } else {
      alert('このメールアドレスの支払い記録が見つかりませんでした。');
    }
  } catch (error) {
    alert('認証中にエラーが発生しました。後ほど再試行してください。');
  } finally {
    verifyBtn.innerText = '認証';
  }
});

Content ScriptsやBackgroundスクリプトでは、高度な機能を簡単なifで囲むだけです：

// content.jsで高度な機能を制御
chrome.storage.local.get(['isProUser'], (result) => {
  if (result.isProUser) {
    // Pro版専用ロジックを実行：例：AIによる文章校正の無制限使用
    executePremiumFeature();
  } else {
    // アップグレードを促すプロンプトを表示
    showUpgradePrompt();
  }
});

これがマイクロSaaSの収益化における最も核心的な防御壁です！

4. Chrome Web Store公開実践

製品が完成したら、次は全世界に公開しましょう！

ステップ1：プロジェクトのパッケージ化

node_modulesを除くすべての必要なファイル（manifest.json、HTML、JS、CSS、icons）を単一の.zipファイルに圧縮します。

ステップ2：開発者アカウントの登録

Chrome Developer Dashboardにアクセスします。一度限りの$5の登録料金が必要です。この料金は悪意のある開発者のスパムを防ぐためのもので、一度支払えば生涯利用できます。

ステップ3：ストア情報の入力

「New Item（新規アイテム）」をクリックし、ZIPファイルをアップロードします。次に、多くのマーケティング素材を準備する必要があります：

拡張機能名と説明：ここではASO（App Store Optimization）が非常に重要です。重要なキーワード（AI、ChatGPT、Productivityなど）をタイトルと説明の最初の数行に含めてください。
ストアアイコン：128x128の高解像度アイコン。
プロモーション画像：440x280のマーケティングバナ��画像。これはストアの推薦欄に表示されます。
スクリーンショット：機能インターフェースを明確に示す1〜5枚のスクリーンショット（1280x800サイズ）を準備します。

ステップ4：プライバシーと権限の声明（最重要！）

Googleはユーザーのプライバシーを非常に厳格に管理しています。「Privacy」タブでは：

**Privacy Policy（プライバシーポリシー）**のウェブリンクを提供する必要があります。NotionやGitHub Pagesを使って簡単な英文の声明を掲載すれば十分です。
Justification（権限の正当性）：ManifestでactiveTabやstorage権限を要求している場合、ここで英語で「なぜその権限が必要なのか」を説明する必要があります。適当に書いたり空白にしたりすると、100%の確率で審査に戻されます！ （例：I need the "storage" permission to save user preferences such as theme colors and license keys locally.）

ステップ5：審査の提出（Submit for Review）

すべて準備が整ったら、審査を提出します。

Manifest V3の時代では、初回公開の審査には通常より時間がかかります（約2〜7日）。以降の更新は通常数時間以内に承認されます。この期間中、ランディングページ（Landing Page）を作成して早期ユーザーを集めることができます。

おめでとうございます！この5つの章を完了することで、ゼロから独立開発、決済連携、マイクロSaaSの公開までの完全なスキルを��につけました。これは個人のデジタル資産を構築する最速の近道です！