Charles: The Bubble Chrome Extension Builder
Build Chrome Extensions from your Bubble app.
Build Chrome extensions from your Bubble app, without effort and without spending a fortune. No coding skills needed. Built on Manifest v3.
Start immediately
Download the extension files and get started immediately.
Simple setup
Adjust the extension files with just a few clicks. No coding skills needed.
Simple pricing
Free source files. USD 8 / month or USD 50 one-time for the Bubble plugin.
Features include
Get started
Detailed intro and setup walk through video
Setup
- Element: Charles: Tab Info: Get the current tab’s title and URL
- Element: Charles: Selected Text: Get the selected text from the page
- Action: Charles: Show Alert: Show an alert in the browser
- Action: Charles: Open New Tab: Open a URL in a new tab
- Action: Open a website in a modal/popup on the current tab
- More coming soon!
See https://charles-chrome-extension-demo.bubbleapps.io/popup for demo setup. If you just want to use Charles to render your Bubble app in an extension popup, you can skip this step. You can also do this later.
https://charles-chrome-extension-demo.bubbleapps.io/version-test/popup in line 4 with your app's URL. Make sure you use the full URL of the page you want to display in the Chrome extension. 
If you use a Bubble app page with dimensions different to width:320px and height:640px, you will need to adjust the extension files:
- Open popup.js in any text editor and adjust the two numbers in line 15
iframe.style.cssText = 'width:320px;height:640px;';. - Do the same for popup.html, line 4
<body style="width:320px;height:640px">.)
chrome://extensions/ (just enter this in the URL field) and turn on developer mode (toggle in the top right corner).
Then, click on ‘Load unpacked’ and select the Chrome Extensions folder to install a local copy.
⚠️ Extensions don’t work while on the chrome://extensions site - please got to another website to test the extension.
- Open manifest.json in any text editor and adjust the app name and description in line 3 and 4.
- If you have a square icon for your Chrome extension, use an online resizing service (e.g. https://www.simpleimageresizer.com/upload) and replace the files in the images folder. Make sure to keep the names as is (i.e. 16x16.png, etc.).
- Open an iFrame in a modal
- Open an iFrame in a sidebar
⚠️ Please be aware that (for now) these iFrames won’t be able to communicate with your Bubble app as the standard extension popup (i.e. the plugin actions only work in the standard popup).
Here is how to set it up:
- Open background.js in any text editor and uncomment (→ remove the // in front of the lines) lines 4-6 for the sidebar or lines 9-11 for the modal. Please also adjust the target URLs and the modal title. It should then look like that:
- Open manifest.json in any text editor and delete the full line '"default_popup": "popup.html",' in manifest.json and make sure there is no empty line left
- Save your files and update your extension in Chrome
or
should then become
Other features
Injecting custom JavaScript
With Charles you can inject custom JavaScript files into a page. ⚠️ Please make sure you use the Charles Chrome Extension v1.6 or later.
Unfortunately, in Chrome Manifest v3 it is no longer possible to inject remote JavaScript into a page. However, we have built in 3 empty files into Charles (in the folder CustomJavaScript), where you can add your own JavaScript. If you like, you can also add more .js files into the folder.
There are two ways to inject a file into a page.
- Most common: Inject a file every time a certain page is loaded. E.g. every time the user visits bubblehacks.io. The extension does not have to be open (i.e. the user does not have to click the extension icon.). A common use case for this is to inject a button to a page. This can be configured in manifest.json → content_scripts
For this to work, you need to adjust the following code:
- matches: match pattern on which pages the script should be injected. See https://developer.chrome.com/docs/extensions/mv3/content_scripts/#matchAndGlob for more information
- exclude_matches: match pattern on which pages the script should NOT be injected. See https://developer.chrome.com/docs/extensions/mv3/content_scripts/#matchAndGlob for more information
- js: Script file(s) to be injected. Make sure the File Name corresponds to a file in the CustomJavaScript folder of the extension. Also make sure to add the folder name in front of the file name, e.g.
"CustomJavaScript/customScript1.js”. You can include multiple files, adding them using comma-separation - The example above will inject the custom script
customScript1.jsin https://bubblehacks.io/ and all it’s subpages, except https://bubblehacks.io/charles.
- Less common: Using the Bubble Plugin to inject a file when the extension popup is visible and an action is triggered in your Bubble file. Make sure the File Name corresponds to a file in the CustomJavaScript folder of the extension.
- Add the Charles: Chrome storage element to your Bubble app
- Use the workflow actions:
- Charles: Write to local storage
- Charles: readFromLocalStorage
- Charles: deleteFromLocalStorage
- Charles: clearLocalStorage
- Extension context: Isolated context of the extension. Can be accessed from any tab.
- Active tab context: Read and write in the local storage of the currently active tab.
- After using ‘Charles: readFromLocalStorage’, an event ‘Charles:Chromestorage A Local variable is read’ will be triggered. You can access the results in the ‘Charles: Chrome storage’ - Element’s states ‘Variable name’ and ‘Variable value’, e.g.
⚠️ The extension can read / write either in the context of the extension itself or in the context of the active tab (currently active website in Chrome)
Need help? Feature requests?
Reach out at damian@bubblehacks.io or https://twitter.com/DamianJanzi
