めんどくさがりのためのブラウザ拡張開 発の最適解 <WXT + ExtensionPayで個人開発>

Transcript

1. めんどくさがりのための ブラウザ拡張開発の最適解 WXT + ExtensionPay で個人開発 1
2. 自己紹介 名前: 伊藤 翼 / てば（@basabasa8770） 仕事：千株式会社 卒業アルバムのプロダクトエンジ ニア・PM マイブーム：オーダーメイド枕を使って寝るのが楽 しみです 2
3. 今日話すこと 1. Lofi BGM Player って何？ 2. 拡張機能開発のめんどくさいポイント 3. WXT - めんどくさいを全部やってくれる 4. ExtensionPay - 課金実装もめんどくさくない 5. めんどくさがりでもできるTips 6. まとめ 3
4. みなさん 作業用BGMはどうしてますか？ 4
5. 自分の場合 YouTube や Apple Music でローファイBGMを流してた でも... わざわざサイトやアプリを開くのがめんどくさい 固定タブが増える 再生/停止のために移動するのがめんどくさい → 1画面に抑えたい 5
6. Lofi BGM Player とは Google拡張機能でローファイBGMをワンクリック 再生 ポップアップから再生/停止 バックグラウンド再生（タブ不要） Chrome / Firefox / Edge 対応 6
7. ないなら作ろう ...でも拡張機能開発って めんどくさくない？ 7
8. めんどくさいポイント その1 手動リロードだるい問題 コード変更するたびに... i. ビルドする ii. chrome://extensions 開く iii. 更新ボタン押す iv. ポップアップ開き直す → 1日何十回も... 8
9. めんどくさいポイント その2 アイコン作成だるい問題 拡張機能には複数サイズのアイコンが必要 16x16（ツールバー） 、32x32、48x48（管理画面） 、128x128（ストア） → 4サイズ手動で作るの？ 9
10. めんどくさいポイント その3 ブラウザごとに違う → 設定ファイル多すぎ問題 Chrome: Manifest V3 + Service Worker Firefox: Manifest V2 + Background Script Edge: Chrome と同じ...? → ブラウザごとに設定が違うから... ├── manifest.json # Chrome用 ├── manifest.v2.json # Firefox用だと別ファイル... ├── webpack.config.js # 200行超え... └── ... → コード書く前に疲れる 10
11. WXT なら 全部めんどくさくない 11
12. WXT とは https://wxt.dev/ めんどくさがりのためのフレームワーク npx wxt@latest init my-extension cd my-extension npm run dev # これだけ。終わり。 設定ファイル？ 書かなくていい。 12
13. めんどくさいを排除した結果 めんどくさかったこと WXT webpack設定200行 書かなくていい 手動リロード 自動リロード ブラウザ別manifest 自動生成 TypeScript設定 最初から入ってる Vue/React導入 テンプレートある 13
14. 3ブラウザ対応もコマンド1つ npm run dev # Chrome で開発 npm run dev:firefox # Firefox で確認 npm run dev:edge # Edge で確認 コードは1つ。ビルドは WXT が勝手にやる。 14
15. ブラウザ分岐も勝手にやってくれる if (import.meta.env.FIREFOX) { // Firefox 用（これだけ書けばいい） audio = new Audio(url); } else { // Chrome/Edge 用 await createOffscreenDocument(); } ビルド時に不要なコードは自動で消える 15
16. アイコンも自動生成 @wxt-dev/auto-icons モジュール // wxt.config.ts export default defineConfig({ modules: ['@wxt-dev/auto-icons'], autoIcons: { baseIconPath: 'assets/icon.svg' } }); SVG 1枚 → 4サイズ自動生成。神。 16
17. 課金実装も めんどくさくない 17
18. 課金実装、普通はめんどくさい バックエンド構築？ → Firebase Functions とか...めんどくさすぎ 決済システム実装？ → セキュリティ怖い Chrome の課金機能？ → 2020年に廃止された → 個人開発で課金、諦めがち 18
19. ExtensionPay なら数行で終わる https://extensionpay.com/ import ExtPay from 'extensionpay'; const extpay = ExtPay('your-extension-id'); // これで課金チェックできる const user = await extpay.getUser(); if (user.paid) { // Pro機能を有効化 } // 課金ページを開く extpay.openPaymentPage(); 19
20. ExtensionPay のいいところ Stripe ベース → 信頼性あり サーバー不要 → 管理めんどくさくない 買い切り / サブスク対応 手数料: Stripe手数料 + 5% めんどくさいことは全部やってくれる 20
21. めんどくさがりでも できる Tips 21
22. Stripe 審査は LP で突破 ExtensionPay は Stripe 連携が必要 → 「事業のウェブサイト」を求められる GitHub Pages で LP 作ればOK 特定商取引法に基づく表記 プライバシーポリシー 22
23. デプロイもめんどくさくない 従来: zip作成 → 各ストアにログイン → 手動アップロード → 確認画面ポチポチ... → 承認可否 WXT: npx wxt submit --chrome-zip ... --firefox-zip ... # 終わり。 一度公開したら、最終確認画面すら見なくていい。 23
24. 作ったら OSS コントリビュート WXT の Example Projects に追加できる PR 出すだけで OSS 貢献実績になる → 実際に出しました: wxt-dev/wxt#2056 → 作者の方がめちゃくちゃ雰囲気いい人 24
25. 正直なデメリット 25
26. WXT のデメリット 日本語情報が少ない → 簡潔で読みやすいが、英語ドキュメント読む必要あり 比較的新しい → 保守が続くか不透明（v0.0.1 は 2023年6月） とはいえ GitHub は活発、Discord コミュニティもあるし、AI系と行えば簡単 26
27. ExtensionPay のデメリット 日本語情報ほぼゼロ 個人運営サービス → 保守が続くか不透明（v1.0.0 は 2021年1月） 追加手数料 5% → Stripe手数料に上乗せ 売上の約9%が手数料になる （Stripe 3.6% + ExtensionPay 5%） → それでもサーバー運用よりは楽。最悪捨ててもいいサービスにしておく 27
28. 今後やっていきたいこと 28
29. もう少し伸ばしたい ダウンロード数を伸ばす ASO最適化/SEO/Reddit、Discord、X（旧Twitter）で地道に広める 特に海外向け 楽曲を増やす Lofi曲の制作・追加（with SunoAI） 流石に3曲は少ない 29
30. まとめ 30
31. めんどくさがりのためのブラウザ拡張開発 の最適解 めんどくさいこと 解決策 設定ファイル WXT (ゼロコンフィグ) 手動リロード WXT (自動リロード) 複数ブラウザ対応 WXT (自動) 課金実装 ExtensionPay デプロイ GitHub Actions 全部やってくれる。最高！ 31
32. リンク集 WXT: https://wxt.dev/ ExtensionPay: https://extensionpay.com/ Lofi BGM Player: https://tsubasa-ito.github.io/lofi-extension-site/ SunoAI: https://suno.com/invite/@tsubasa8770 32