> For the complete documentation index, see [llms.txt](https://cranford-tech.gitbook.io/charles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cranford-tech.gitbook.io/charles/getting-started/quickstart-guide.md).
# Quickstart guide
Here's how to get started with Charles:
1. [Download the Charles source code (for free)](#download-the-charles-source-code)
2. [Define the opening action](#define-the-opening-action)
3. [Using the standard popup](#using-the-standard-popup)
4. [Allow iframes in your Bubble app](#allow-iframes-in-your-bubble-app)
5. [Load the Charles extension in Chrome](#load-the-charles-extension-in-chrome)
6. [Build out your Bubble workflows](#build-out-your-bubble-workflows)
7. [Submit your Chrome extension to the Chrome Webstore](#submit-your-chrome-extension-to-the-chrome-webstore)
### Download the Charles source code
*Estimated time: 1 minute*
Download the free Chrome extension source files from [this link](https://hub.buildwithcharles.io/charles-the-bubble-chrome-extension-builder) (you will need to sign up for an account).
Once you've downloaded the files, unzip them:
### Define the opening action
*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
{% hint style="info" %}
If you're using the **standard popup**, skip to the next section
{% endhint %}
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.
1. Comment / uncomment the respective sections and save your changes. In the below example, we're uncommenting the section for the **Floating Modal**:
2. Adjust the modal sizes in the same lines.
3. 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.
#### Linking the chrome extension so your Bubble app
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:://`
### Using the standard popup
*Estimated time: 1 minute*
{% hint style="info" %}
If you're using a side bar, floating modal, or full screen modal, you can skip this section
{% endhint %}
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
#### **Setting dimensions**
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 ``.)
### Allow iframes in your Bubble app
*Estimated time: 1 minute*
In your Bubble app, go to settings/general and allow all iframes:
### Load the Charles extension in Chrome
*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:
#### **Important: Hit refresh to update for changes**
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.
### Build out your Bubble workflows
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**](https://bubble.io/plugin/charles---chrome-extension-builder-1649100032860x383664531542638600) 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**](https://charles-chrome-extension-demo.bubbleapps.io/popup).
### Submit your Chrome extension to the Chrome Webstore
Check out submission guide [here](/charles/publishing-to-the-chrome-webstore/prepare-extension-for-submission.md).