Quickstart guide
Last updated
Last updated
Here's how to get started with Charles:
Estimated time: 1 minute
Download the free Chrome extension source files from this link (you will need to sign up for an account).
Once you've downloaded the files, unzip them:
Estimated time: 2 minutes
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,
floating modal or
full-screen modal
If you're using the standard popup, skip to the next section
Here is how to change the opening action:
Open the background.js file in any text editor (we're using VS Code in the below example):
Read through the instructions, starting in line 5. Uncomment / adjust the source code accordingly.
Comment / uncomment the respective sections and save your changes. In the below example, we're uncommenting the section for the Floating Modal:
Adjust the modal sizes in the same lines.
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.
You'll need to replace the URL that links the Chrome extension to the Charles test app with a link to your own Bubble app.
If you're using the side bar, you'll need to replace the URL in line 14 of the background.js script
If you're using the floating modal, you'll need to replace the URL in line 21 of the background.js script
If you're using the full screen modal, you'll need to replace the URL in line 28 of the background.js script
Make sure to start the URL with https:://
Estimated time: 1 minute
If you're using a side bar, floating modal, or full screen modal, you can skip this section
You'll need to replace the default URL that links the Chrome extension to the Charles test app, with a link to your own Bubble app. If you're using the standard popup, you'll need to replace the URL in line 4 of the popup.js script
If you're using a Bubble app page with dimensions different to:
width:320px and
height:640px
you will need to adjust the dimensions in the popup.html file:
→ Open popup.html in any text editor and adjust the two numbers in line 7 <body style="width:320px;height:640px">.)
Estimated time: 1 minute
In your Bubble app, go to settings/general and allow all iframes:
Estimated time: 1 minute
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:
Every time you change any of the Chrome Extensions files (i.e. the code) from now on, click on ‘refresh’ to update your local installation.
You should now be able to display your Bubble app in a Chrome extension!
To access Charles’ native features through bubble workflows, you'll need to install the Charles Bubble plugin from the Bubble plugin marketplace.
Build your app using the elements and workflows provided by the Charles plugin 😊
You can learn how to use the elements and workflows provided by Charles in the rest of the documentation. You can also see examples of workflows in the Charles demo app.
Check out submission guide here.
