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 (31)

Collapse
 
ben profile image
Ben Halpern

Neat!

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you! You're absolutely right!🤖

Collapse
 
cyber8080 profile image
Cyber Safety Zone

Great post! 🚀 Loved how you broke down the process of releasing Muscle Brain v4 on the Chrome Web Store — especially the part about using Next.js with output: 'export' and handling Chrome’s security rules. Super helpful for devs publishing their first extension.

Would love to hear more about how you grew your user base after the Reddit issue and what’s next for the PWA version. Thanks for sharing your journey! 💪

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for checking my post!😀 I will write a new post if I update my app and learn new things.

Collapse
 
parag_nandy_roy profile image
Parag Nandy Roy

Love how detailed yet approachable your release process is...

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for checking my post🙂

Collapse
 
aaron_rose_0787cc8b4775a0 profile image
Aaron Rose

🔥💯👍

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you 🔥

Collapse
 
andrewbaisden profile image
Andrew Baisden

Very cool!

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you!😀

Collapse
 
ethan_taylors_067a242388 profile image
Ethan Taylor's

That’s awesome! Really loved how you shared your journey especially the honest part about the Reddit struggle and learning through it. It’s inspiring to see how you turned that into motivation to explore other publishing options like Chrome Extensions. The step-by-step breakdown was super clear too. Keep going, your dedication really shows! 🚀

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for your compliment! I hope I can use Reddit soon... I would like to keep on updating me and my app.🚀

Collapse
 
bobpham profile image
Bob Pham

Thank you, I love it.

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for checking my app, and a 5 star review at Chrome Web Store.⭐⭐⭐⭐⭐

Collapse
 
bobpham profile image
Bob Pham

No problem bro. We all read social network and short videl too much, so a mini game which can train our brain is a good idea. Your app is so simple to play and easy to start.

Thread Thread
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you for your kind words.😆 I would like to add more update in the future.🚀

Collapse
 
olivia-john profile image
Olivia John

Great!

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you!😄

Collapse
 
usman_awan profile image
MUHAMMAD USMAN AWAN

Great 🙌

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you😄

Collapse
 
thatanjan profile image
Anjan Shomodder

Good work👏

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you😊

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more