DEV Community

Cover image for 🚀How I released Chrome Extensions (💪🧠Muscle Brain v4)
Web Developer Hyper
Web Developer Hyper

Posted on

🚀How I released Chrome Extensions (💪🧠Muscle Brain v4)

Intro

I created a brain training app, Muscle Brain, and released it on Microsoft Store before.
🚀How I released my App for Free (💪🧠Muscle Brain)
https://dev.to/webdeveloperhyper/how-i-released-my-app-for-free-muscle-brain-44p8
I am thinking of growing and promoting this app, and I found that promoting on Reddit is effective, so I made an account for it. Reddit is an American social media forum. Users can post text, images and videos and upvote, downvote and comment on posts. I heard that doing PR right after making a new account is not good, so I logged in every day to collect daily streaks, upvoted posts and grew the account for a while. After that, I promote my app on r/sideproject, and BOOM!, my post was instantly removed automatically, and my reddit account was banned!😭 It looked like my account had not grown enough, and how I promoted was not good. I appealed to Reddit for account recovery, but there was no response after more than a week... And my journey to find other good ways to increase my app's users began.🚀

Chrome Extensions vs Microsoft Store vs Google Play vs App Store

This time, I chose to release my app as Chrome Extensions on Chrome Web Store. Last time, I released it on Microsoft Store, so my app could be used only on Windows PCs. By adding Chrome Extensions version, not only Windows but also macOS and Linux users can use my app. Also, Chrome Extensions can be used not only on Google Chrome browser but also on Microsoft Edge browser. Moreover, Android and iOS mobile users can also use my app through Google Chrome browser and user coverage would increase. ←After I released my app as Chrome Extensions, I realized that it cannot be used on mobiles devices.🤦 To tell the truth, I want to release my app on Google Play for Android, and App Store for iOS, but they were hard to release for beginner and expensive. Releasing as Chrome Extensions looked way easier and affordable. And indeed, it was quite easy to release an app as Chrome Extensions, costing only $5 for one time registration. Also, analytics data about store and app were more detailed than on Microsoft Store.

How to make Chrome Extensions

My app is built with Next.js and converted by PWABuilder to MSIX for Microsoft Store release. This time, I did the following steps for Chrome Extensions release. I wanted minimal changes and efficiency to make continuous improvements to the app for both platforms from now on.

I had to write a manifest.json, but it was simpler than the one of Microsoft Store, so it was easy to write referring to the one of Microsoft Store.
https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#hello_world
Most of the release work is similar or the same, so you can speed up after you experience one of them. The settings below are specific to Next.js.

Next.js App Router will not support static export by default, so I had to set output: 'export', in next.config.ts to handle it.
https://nextjs.org/docs/app/guides/static-exports

Next.js creates a _next folder by default, but Chrome Extensions did not allow it, so I had to rename it to next folder.

Next.js puts React data in inline scripts which Chrome blocks for security reasons, so I had to move that code to separate files which Chrome allows.

How to release Chrome Extensions

1️⃣ You can test your app on Chrome browser locally before submitting.
1: Access "chrome://extensions/"
2: Enable "Developer mode"
3: Click "Load unpacked" and select your app folder
https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked

2️⃣ Pay $5 one time to register developer account, and fill out your account information.
https://developer.chrome.com/docs/webstore/register
https://developer.chrome.com/docs/webstore/set-up-account

3️⃣ Upload your app as a zip folder.
https://developer.chrome.com/docs/webstore/publish#upload-your-item

4️⃣ Fill out all the listing information of your app. It was less and easier than listing Microsoft Store.
https://developer.chrome.com/docs/webstore/cws-dashboard-listing

I chose "Visibility" settings to "Unlisted" first to check if the store and app worked correctly. After that, I changed "Visibility" settings to "Public" to release.
https://developer.chrome.com/docs/webstore/cws-dashboard-distribution#setting-the-visibility

↓ 5️⃣ After certification, my app was released as a Chrome Extensions on Chrome Web Store to the whole wide world!🚀

Muscle Brain - Ultimate Edition v4

Let me introduce my app, "Muscle Brain".

What's New in Version 4.0.0
🔥 Daily Streaks - Play daily to build streaks and unlock milestone achievements
🔤 ABC Mode - Challenge with letter (A - Z ) sequences instead of numbers
🌍 EN/JP Support - English and Japanese support with language-specific sound effects

💪🧠How to Boost your Brain for Free (Muscle Brain - Ultimate Edition)

Muscle Brain is an ultimate working memory training game that stimulates your brain. Based on scientifically-proven N-back methodology, this game challenges you to remember, manipulate, and recall number sequences. No need to be afraid of the hard training. Mr. Brain, hero for everyone will support you alongside the game and save the day! 😀

With high Working Memory you can:
🙆 Handle complex tasks easily
🙆 Improve multitasking and focus
🙆 Boost creative thinking and problem solving

Game Features:
🧠 Unlimited Mode - Train your brain until your limit and burn out
👶 Practice Mode - See the answers as you learn the game
🎵 Rhythm Mode - Time your inputs to the rhythm of Mr. Brain
🔥 Daily Streaks - Build habits and unlock achievements
🔤 ABC Mode - Challenge with letter sequences instead of numbers
⚙️ Settings - Adjust shift direction, shift count, and number length for maximum effect
🌍 EN/JP Support - Bilingual interface and sounds
💯 History - Collect all 120 gold medals and become a Muscle Brain Legend!

100% Free - No Ads, No Tracking, No Sign-Up Required

Feedback Welcome:
I would love to hear about your experience using my app.👂 If you have any ideas for the next update, bug reports, or any other feedback, feel free to comment on this post. Or, you can contact me directly via X (in my DEV Community profile).

Available as Chrome Extensions for Free
https://chromewebstore.google.com/detail/muscle-brain-ultimate-edi/nmlolddnfpfambkcnplggphjgbjeabfc

Available on Microsoft Store for Free
V4 is the latest, so please reload the page, if it still shows the old version.
https://apps.microsoft.com/detail/9NG572QMV56M

Outro

Releasing an app as Chrome Extensions on Chrome Web Store was easier than I expected. It only needed manifest.json and static build from Next.js. Next time, I would like to make a landing page and release my app as PWA (Progressive web apps) for Android and iOS. Also, I would like to keep updating my app or release another one, and enjoying, studying and sharing in the future.😊

I hope you learned something from this post.
Thank you for reading.
You're absolutely right!🤖

Top comments (0)