Charles: The Bubble Chrome Extension Plugin
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.
Download the extension files and get started immediately.
Adjust the extension files with just a few clicks. No coding skills needed.
Pay USD 19 for the source files, one-time. No recurring costs.
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
- 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/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 15
iframe.style.cssText = 'width:320px;height:640px;';.
- Do the same for popup.html, line 4
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.