Cradle Uses Plasmo to Ship their Crypto Gaming Wallet Faster
Learn how Cradle built their crypto gaming wallet with Plasmo, improving their development flow and gaining cross-browser support. Cradle's CTO shares tips for successful implementation and advice for others considering using Plasmo.
Learn how Cradle used the Plasmo framework and Itero TestBed to quickly design and refine their browser extension, propelling the development of their crypto gaming wallet to new heights.
Moiz Ahmed is the CTO and co-founder of Cradle, a company that makes it possible to start and play a crypto game with just a few clicks. I sat down with him to learn more about how Plasmo accelerated his team’s rate of development.
In the conversation, Moiz says that his team offloads engineering efforts to Plasmo so that his team can focus more on their product. We’ve earned that trust because we’ve invested countless hours making the development experience spectacular. From the code we’ve written, to the level of support we provide, we constantly strive to be the best engineering team you could possibly have for your browser extension.
Read the full interview below! Make sure not to miss the section on Itero Testbed, as that one is particularly interesting!
What is Cradle?
Cradle is enabling the Web 3 revolution with their crypto gaming wallet, making it possible to start and play a crypto game within a few clicks, simplifying the experience.
Moiz Ahmed: Cradle is working on four products. We are building an SDK, a version of a game on a chain, and then we're building a physical controller. We’re making a bunch of gaming tools, but our most prominent tool is our crypto wallet.
That wallet enables people to play games. It will also be integrated with our future physical controller and act as the SDK that will be used by any other company using our injected provider.
In terms of the wallet, which is what we use Plasmo for the most, it's a Chrome Extension that allows users to connect to decentralized applications and do regular wallet things like making transactions, linking to NFTs, and anything blockchain related. We're also adding a bunch of game features, but that's a high-level overview of the wallet.
🔒 Security is at the core of Plasmo. That’s why so many Web3 companies have put their trust in us.
What is the composition of your engineering team?
Moiz Ahmed: We have around six engineers working on the wallet team, working on the game, and other projects.
👩🚀 When you have six engineers working on your browser extension like Cradle does, it can get quite hectic managing versions between everyone. This complexity increases dramatically as you start adding more users. Check out Itero for a solution to this problem. We automatically ship the latest version of your extension to everyone, zero clicks required.
What was Cradle using before Plasmo Framework?
When we switched to Plasmo, it made a big difference.
Moiz Ahmed: We tried a few different approaches for our extension. Initially, we built the first version of the extension from scratch without using React. This was because we brought on a contractor engineer who implemented everything in Vanilla JavaScript since there was no tooling available. As a result, the extension was a large JavaScript file with a lot of document.getElementById and onclick events. Then, we tried using React and TypeScript in the same repository, which was still problematic as certain features like pop-ups and messaging did not work well. We also didn't have hot reloading or bundling, which slowed development.
When we switched to Plasmo, it made a big difference. It allowed us to use features like pop-ups that worked, and we could create an extension with multiple pages. Our development flow improved because we gained access to live reloading, bundling, and cross-browser support. Before Plasmo, we had support for Chrome, but now we can generate builds for Firefox and other browsers as well.
What were the biggest hurdles Cradle faced in setting up Plasmo Framework?
Moiz Ahmed: One hurdle we encountered was not reading the docs more thoroughly. We had a background in building Chrome extensions and were used to doing things our way rather than considering Plasmo. We tended to take the "from scratch" approach rather than using the framework.
👌 Reading documentation for new projects is often time-consuming. We’ve heard this from a lot of people using the Plasmo Framework. That’s why we’ve build Pallas, an AI trained on our docs, and other resources related to Chrome extensions. You can ask Pallas questions, and even ask it to build an extension for you! Check it out by joining our Discord server.
Did Cradle consider using boilerplate Chrome Extension template solutions?
Moiz Ahmed: We did fork an open-source repo that was bundling React with Typescript into an extension. But we were scared of having too much bloat in our repos. So that's why we stayed away from some tools.
How long has Cradle been using Plasmo Framework?
Moiz Ahmed: Since around July, so about five months now.
Advice for other Chrome Extension developers considering using Plasmo Framework
Moiz Ahmed: Ask lots of questions on the Discord server. One of the initial things we were trying to figure out was how to do something in Chrome; each way was hacky. For example, if we sent a message, we’d send a dummy message to check if a tab was ready. So just talking about that stuff with you guys was useful. It's also good to speak with other Chrome extension devs who have done this for a while.
The other thing is to use all the APIs. So you don't keep doing the same things over and over. Like the Plasmo tabs API, you can do that on your own, but having that directory structure makes things more manageable, and the import schemes, like data-base64, and knowing how to use it.
🔮 Our Discord server is filled with hundreds of amazing browser extension developers that talk about Plasmo, get help building their extensions, sharing their launches, and chatting about all things browser extension related. It’s a friendly community available for everyone. Join us!
Experience using Plasmo Framework
Moiz Ahmed: It was pretty smooth. We had to move from Javascript to Typescript and figure out what inject flow to use. We had to inject our provider into the main world, and Plasmo doesn’t have a declarative way of doing that. So we had to run a few hurdles, but once we got past those, we could focus on development.
Itero Testbed
It’s much better than what we had before, where we'd just bundle it up, create a zip, send that over to the team members, and then tell them how to load it every time we needed to push an update.
Moiz Ahmed: We have a growth team, QA testers, and designers that need to review our extension before we push it to prod. We use Itero TestBed so our designers can check how designs look on the extension. Our growth team uses TestBed right now to look at the best places to add metrics and analytics. It’s much better than what we had before, where we'd just bundle it up, create a zip, send that over to the team members, and then tell them how to load it every time we needed to push an update.
Hurdles with Sending Zip Files
Moiz Ahmed: Loading an unpacked extension is convoluted for someone unfamiliar with developing browser extensions. On top of that, the dev version used a local endpoint for the API. So we had cases where it just broke for some of the team members, and that was because dev versions used a version of the API you would need to run locally—having everything be in production endpoints and having it all just bundled together and updated as we push stuff that’s been the biggest help.
😨 Imagine having to zip up your website’s HTML, CSS, and Javascript files, and send them out to your beta testers every single time you want them to see a new change. If this sounds outrageous, it’s because it is! Yet this is exactly what browser extension teams have been doing for years. TestBed makes this a thing of the past. With TestBed, you can automatically push new updates to your users without a review process, or annoying Zip files blocking your path. Check it out now.
What would it mean to Cradle if Plasmo ceases to exist?
Moiz Ahmed: It would slow us down in terms of our future roadmap because we offload a lot of engineering things to Plasmo so that we can prioritize more product stuff. But if Plasmo didn’t exist for us, our product growth would slow because we would have to do a bunch of engineering stuff.
Thanks for reading! We're Plasmo, a company on a mission to improve browser extension development for everyone. If you're a company looking to level up your browser extension, reach out, or sign up for Itero to get started.