Delighted to announce I recently took over ownership of Charles from the talented @d9999! I’ve been a fan of Damian and Charles for a couple of years now, so really excited to build on his great work.
What is Charles?
Charles is a Bubble plugin that makes it was easy to create a Chrome extension with Bubble.
There’s quite a bit of custom code needed to create a Chrome extension if you’re building it from scratch. Charles takes care of all the heavy lifting and lets you build Chrome extensions based on your Bubble app. You can literally get started in minutes. The Charles plugin give you access to a bunch of actions that allow your Chrome extension to interact with the page the user is on (among other things).
How does it work?
Charles lets you display your Bubble app through a Chrome extension popup, modal or sidebar. You can download the Charles source code on the Charles website and then modify one line of code to link it to your Bubble app.
I’m planning to add new features and create additional tutorials for Charles over the coming months. Keep an eye on this forum thread or sign up to the Cranford Tech newsletter to be notified about these updates.
How to build a Bubble component library Chrome extension - video tutorial
Just released a new video tutorial on how to build a component library with Charles:
You can save down components you build in a Bubble app for future use. No need to keep recreating the same thing from scratch every time you start a new app.
This is awesome! I had contact with this in the past and I planned to create my own component library (currently more than 1000 components stored in an app and organized by category, etc.). But I never had the necessary time to start.
Thanks for reminding me about this. Who knows, maybe the fresh air of 2025 will allow me to add some projects that are currently “paused”.
New video tutorial - The ultimate guide to building Chrome extensions with Bubble - Jan-25
Just released a very detailed video tutorial on how to build Chrome extensions using Bubble and Charles.
The video is split into 3 sections.
1. Displaying your Bubble app in a Chrome extension
Downloading Charles source code
Modifying the code
iFrame settings
Choose between a popup, sidebar and modals
Opening your extension on a specific site when opened for the first time
2. Key actions
Access text selected by user
Access tab info
Copy text to clipboard
Capture a screenshot
Show a native alert
3. Specific use cases
Bookmark manager
Automate browser actions
Summarise text with AI
Bubble component library
Each section is timestamped in the video description, so feel free to jump to whatever part interests you most.
