串接 Stripe 訂閱制與上架 Web Store
開發完一款好用的微型 SaaS 後，最重要的一步就是「變現」與「發布」。 Chrome Extension 的付費模式與一般網站略有不同，因為我們沒有自己的伺服器來處理複雜的帳號登入系統。這堂課將教你使用最聰明、最輕量的方式：結合 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，如果是，則將權限寫入
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. 實作 License 驗證邏輯
當使用者付完錢並取得授權信箱 / 金鑰後，我們在 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 實戰
產品做好了，接下來就是要發布到全世界！
步驟一：打包專案
將你專案中除了 node_modules 以外的所有必要檔案（manifest.json, HTML, JS, CSS, icons），打包成一個單一的 .zip 壓縮檔。
步驟二：註冊開發者帳號
前往 Chrome Developer Dashboard。你需要支付一次性 $5 美金的註冊費。這筆費用是用來防範惡意開發者的洗版，付一次就能終身使用。
步驟三：填寫商店資訊
點擊「New Item (新增項目)」並上傳你的 ZIP 檔。接下來你需要準備大量的行銷素材：
- 套件名稱與簡介：這裡非常注重 ASO (App Store Optimization)。請把重要的關鍵字 (如 AI, ChatGPT, Productivity) 寫進標題和簡介的前幾行。
- Store Icon：128x128 的高畫質圖示。
- Promotional Image：440x280 的行銷橫幅圖片，這會出現在商店推薦版面。
- Screenshots (螢幕截圖)：至少需要準備 1-5 張清楚展示功能介面的截圖 (尺寸限制為 1280x800)。
步驟四：填寫隱私與權限聲明 (最重要！)
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.)
步驟五：送出審核 (Submit for Review)
一切就緒後，點擊送出審核。
在 Manifest V3 的時代，通常第一次上架的審核時間會比較久（約 2 到 7 天不等），之後的改版更新通常幾個小時內就會通過。這段期間，你可以先建立一個登陸頁面 (Landing Page) 來收集早鳥名單。
恭喜你！走完這五個章節，你已經從零具備了獨立開發、串接金流、到發布微型 SaaS 的完整能力。這就是打造個人數位資產最快的一條捷徑！