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.
Download the extension files and get started immediately.
Adjust the extension files with just a few clicks. No coding skills needed.
Free source files. USD 8 / month or USD 50 one-time for the Bubble plugin.
Detailed intro and setup walk through video
- Element: Charles: Tab Info: Get the current tab’s title and URL
- Element: Charles: Selected Text: Get the selected text from the page
- Element: Charles: Chrome storage: Read and write to Chrome’s local storage
- 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
- Action: Charles: Copy to clipboard: Copy a text to the users clipboard
- Action: Charles: Set badge text and color: Set an icon badge and color
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/popupin 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 14
iframe.style.cssText = 'width:320px;height:640px;';.
- Do the same for popup.html, line 15
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
should then become
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
- The example above will inject the custom script
customScript1.jsin https://bubblehacks.io/ and all it’s subpages, except https://bubblehacks.io/charles.
- 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)