🔧 阿川の電商水電行
引言
我之前開發了一款名為「肌肉大腦」（Muscle Brain）的大腦訓練應用，並在微軟商店上發布了。
🚀我是如何免費發布我的應用程式的（💪🧠肌肉大腦）
https://dev.to/webdeveloperhyper/how-i-released-my-app-for-free-muscle-brain-44p8
我正在考慮發展和推廣這款應用，發現Reddit推廣效果不錯，所以就註冊了一個帳號。 Reddit是一個美國的社交媒體論壇，用戶可以發布文字、圖片和影片，還可以按讚、踩和評論。我聽說剛註冊帳號就做推廣不太好，所以我每天都登錄，累積每日登入天數，給貼文點贊，慢慢累積粉絲。之後，我在r/sideproject版塊推廣了我的應用，結果帖子瞬間被自動刪除，我的Reddit帳號也被封鎖了！ 😭看來我的帳號粉絲成長不夠，推廣方式也不對。我向Reddit申訴帳號恢復，但一個多星期過去了，仍然沒有回應…於是，我開始了尋找其他有效方法來增加應用程式使用者的旅程。 🚀
Chrome 擴充功能 vs 微軟商店 vs Google Play vs App Store
這次，我選擇將我的應用程式以Chrome 擴充功能的形式發佈到Chrome 線上應用程式商店。上次我把它發佈在Microsoft Store ，所以我的應用程式只能在 Windows 電腦上使用了。透過新增 Chrome 擴充功能版本，不僅 Windows 用戶可以使用我的應用，macOS 和 Linux 用戶也可以使用。此外，Chrome 擴充功能不僅可以在 Google Chrome 瀏覽器上使用，還可以在 Microsoft Edge 瀏覽器上使用。 ~~此外，Android 和 iOS 行動用戶也可以透過 Google Chrome 瀏覽器使用我的應用程式，用戶覆蓋範圍將會擴大。 ~~ ←發布 Chrome 擴充功能後，我才意識到它無法在行動裝置上使用。 🤦 說實話，我原本想把應用程式發佈到Google Play （Android）和App Store （iOS），但對於新手來說，發布難度太大，成本也太高。相比之下，以 Chrome 擴充功能的形式發布看起來更容易也更經濟實惠。事實上，以 Chrome 擴充功能的形式發布應用程式確實非常簡單，只需一次性註冊 5 美元。而且，商店和應用程式的分析資料也比 Microsoft Store 更詳細。
如何製作Chrome擴充程式
我的應用程式是用Next.js建構的，並使用PWABuilder將其轉換為 MSIX 格式，以便在 Microsoft Store 上發布。這次，我針對 Chrome 擴充功能的發布執行了以下步驟。我希望盡可能減少改動，提高效率，以便未來能持續改善應用，使其同時適用於這兩個平台。
我需要編寫一個manifest.json ，但它比 Microsoft Store 的 manifest.json 文件要簡單，所以很容易參考 Microsoft Store 的 manifest.json 文件進行編寫。
https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#hello\_world
大部分發布工作都類似或相同，因此熟悉其中一項後，您就可以加快速度。以下設定專門針對 Next.js。
Next.js App Router 預設不支援static export ，所以我必須在next.config.ts中設定output: 'export',來處理這個問題。
https://nextjs.org/docs/app/guides/static-exports
Next.js 預設會建立一個_next資料夾，但 Chrome 擴充功能不允許這樣做，所以我必須將其重命名為next資料夾。
Next.js 將 React 資料放在inline scripts中，而 Chrome 出於安全原因會阻止這種做法，所以我必須將程式碼移到 Chrome 允許的單獨檔案中。
如何發布 Chrome 擴充功能
1️⃣ 您可以在提交之前在本地 Chrome 瀏覽器上測試您的應用程式。
1：存取“chrome://extensions/”
2：啟用“開發者模式”
3：點擊“載入已解壓縮的檔案”，然後選擇您的應用程式資料夾
https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked
2️⃣ 一次支付 5 美元註冊開發者帳號，並填寫您的帳號資訊。
https://developer.chrome.com/docs/webstore/register
https://developer.chrome.com/docs/webstore/set-up-account
3️⃣ 將您的應用程式以 zip 資料夾的形式上傳。
https://developer.chrome.com/docs/webstore/publish#upload-your-item
4️⃣ 填寫應用程式的所有上架資訊。這比在微軟商店上架要簡單得多。
https://developer.chrome.com/docs/webstore/cws-dashboard-listing
我首先將“可見性”設定設為“不公開”，以檢查商店和應用程式是否運作正常。之後，我將“可見性”設定改為“公開”以發布應用程式。
https://developer.chrome.com/docs/webstore/cws-dashboard-distribution#setting-the-visibility
↓ 5️⃣ 認證通過後，我的應用程式會作為 Chrome 擴充功能在 Chrome 線上應用程式商店上線，面向全球用戶！ 🚀
肌肉大腦 - 終極版 v4
讓我來介紹一下我的應用程式「肌肉大腦」。
4.0.0 版本新增功能
🔥每日連勝- 每天玩遊戲，累積連勝紀錄，解鎖里程碑成就
🔤 ABC模式- 使用字母（A-Z）序列而非數字進行挑戰
🌍支援英語/日語- 支援英語和日語，並帶有各自語言的音效
💪🧠如何免費提升你的大腦功能（肌肉大腦 - 終極版）
《肌肉大腦》是一款終極工作記憶訓練遊戲，能夠有效刺激你的大腦。遊戲基於科學驗證的N-back學習方法，挑戰你記憶、處理和回憶數字序列的能力。無需害怕艱苦的訓練，大腦先生——大家的英雄——將全程陪伴你，助你達成目標！ 😀
擁有高工作記憶力，你可以：
🙆輕鬆應付複雜任務
🙆 提升多工處理能力與專注力
🙆 提升創意思考與問題解決能力
遊戲特色：
🧠無限模式- 訓練你的大腦直到極限，精疲力竭
👶練習模式- 在學習遊戲的過程中查看答案
🎵節奏模式- 根據大腦先生的節奏輸入你的指令
🔥每日連勝- 養成習慣並解鎖成就
🔤 ABC模式- 用字母序列代替數字進行挑戰
⚙️設定- 調整換檔方向、換檔次數和數字長度，以獲得最佳效果
🌍支援英語/日語- 雙語介面和聲音
💯歷史- 收集全部 120 枚金牌，成為肌肉大腦傳奇！
完全免費- 無廣告、無追蹤、無需註冊
歡迎提出回饋意見：
我非常想了解您使用我的應用程式的體驗。 👂 如果您對下次更新有任何想法、錯誤報告或其他回饋，歡迎在本貼文下方留言。或者，您也可以透過 X（在我的開發者社群個人資料中）直接與我聯繫。
免費提供 Chrome 擴充功能版本
https://chromewebstore.google.com/detail/muscle-brain-ultimate-edi/nmlolddnfpfambkcnplggphjgbjeabfc
可在微軟商店免費取得
V4 是最新版本，如果頁面仍然顯示舊版本，請重新整理頁面。
https://apps.microsoft.com/detail/9NG572QMV56M
其他
在 Chrome 線上應用程式商店發布 Chrome 擴充功能比我想像的要容易得多。只需要 manifest.json 檔案和 Next.js 的靜態建置即可。下次，我想做一個落地頁，然後把我的應用程式發佈為 Android 和 iOS 平台的PWA（漸進式 Web 應用程式） 。此外，我還想持續更新我的應用程式，或發布新的應用程式，並在未來享受、學習和分享的樂趣。 😊
希望你從這篇文章中學到一些東西。
感謝閱讀。
你說得完全對！ 🤖
原文出處：https://dev.to/webdeveloperhyper/how-i-released-chrome-extensions-muscle-brain-v4-3ijn
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
