Get started with Charles
Set up your Chrome Extension
Download the Charles extension (source code) for free
Download and unzip the free Chrome extension source files to your computer.
Replace the demo Bubble app with your own app
Open popup.js in any text editor and replace 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.html in any text editor and adjust the two numbers in line 8 <body style="width:320px;height:640px">.)
Allow iFrames
In your Bubble app, go to settings/general and allow all iFrames.
Load the Charles extension in Chrome
In Chrome, go to 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.
Pin the freshly installed extension to your extension bar:
Build out your Bubble workflows
- Install the Charles | The Chrome Extension Plugin Bubble plugin to your app. You can use the plugin elements and actions as listed on the plugin.
- Build your app using the elements and workflows provided by the Charles Bubble Plugin 😊
Define opening action
By default, a click on the extension icon opens the extension popup. You can, however, change this so that by default the extension opens as a side bar or full-screen modal.
🎉 Since Charles is awesome, most plugin actions will also work in the side bar or full-screen modals
To do so:
- open
background.jsin any text editor, and uncomment either lines 4-6 (i.e. remove the // in front of the lines) or lines 9-11. - Adjust the URL in line 5 or 10 to point to your Bubble app. Start the URL with
https:://… - Open
manifest.jsonin any text editor and delete the full line '"default_popup": "popup.html",' in manifest.json and make sure there is no empty line left
Hit refresh to update for changes
If you change any of the Chrome Extensions files from now on, click on ‘refresh’ to update your local installation.
Publish in the Chrome Web Store
Prepare: Update app name, icon and description
To publish your extension to the Chrome Webstore follow the steps in the Chrome Developer Docs. But let’s do some cosmetics before you do so:
- Open manifest.json in any text editor and adjust the app name and description in line 3 and 4.
- Make sure to delete the content script section from manifes.json if you don’t use any content scripts in your extension. Otherwise your extension might be rejected by Google.
- If you don’t use the Chrome local storage workflows in your extension, also delete the line
"storage",in manifes.json
- 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.).
