In this video I show how you can build Chrome extensions with Bubble. We’ll be using Charles, a framework and Bubble plugin that makes it incredibly easy to create powerful Chrome extensions with Bubble.
We’ll cover some of the key actions you can add to your Chrome extension and also go through 4 specific types of Chrome extensions you can build:
1. Bookmark manager
2. Browser automations
3. AI summariser
4. Bubble component library
Links
🧩 Charles
https://buildwithcharles.io/
ℹ️ Charles documentation
https://cranford-tech.gitbook.io/charles
📧 Support
https://www.cranfordtech.com/support
🎨 Check out our other templates and plugins
https://bubble.io/contributor/1639725919422x893231862142530600
💼 Hire us to build your custom app
https://www.cranfordtech.com/hire-us
Timeline
00:00 Intro
01:19 Displaying your Bubble app in a Chrome extension
06:48 Setting the dimensions of your app and extension
08:40 Choosing between a popup, sidebar or modal
15:17 Opening a specific URL on install/uninstall
17:50 Key action #1: Access text selected by the user
23:31 Key action #2: Accessing tab info
28:29 Key action #3: Copying text to the clipboard
29:44 Key action #4 Capturing a screenshot
34:05 Key action #5: Show a native alert
37:44 Use case #1: Bookmark manager
43:54 Use case #2: Automate browser actions
49:07 Use case #3: Summarise text with AI
54:24 Use case #4: Bubble component library