💡 Build a Chrome Extension with Bubble and Charles

alexcooney5 · 2024-12-06T12:41:47.982Z

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.

Links

Charles website (where you can get the source code)
Charles plugin page
Quickstart guide
Full documentation

Video tutorials

Create a Bookmark Manager Chrome Extension with Bubble
Build an AI Chrome Extension with Bubble
Build a Chat GPT Prompt Library Extension with Bubble

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.

If you have any questions just let me know

Alex
Cranford Tech

build.marshall · 2024-12-06T12:50:57.916Z

Cranford tech offering a chrome extension builder is exactly the sort of news I want to hear. This is sick.

alexcooney5 · 2024-12-06T12:54:55.991Z

Thanks @build.marshall!

alexcooney5 · 2024-12-11T12:29:51.283Z

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.

Any questions just let me know

Newed · 2024-12-11T12:42:34.542Z

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”.

alexcooney5 · 2024-12-11T12:45:20.646Z

@Newed I can certainly relate to that - too many ideas and not enough time!

alexcooney5 · 2025-01-13T16:14:35.491Z

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.

Any questions just let me know