# 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). 

<figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FAgb73FAT9uxOWIz2K4Ck%2F2024-11-28%2010.41.39.gif?alt=media&#x26;token=d503a903-59c7-4a78-bf79-eb4941d5a0f7" alt=""><figcaption></figcaption></figure>

Once you've downloaded the files, unzip them:

<figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FD9kl6uFdDbSWCj4JXkmw%2F2024-11-28%2011.04.22.gif?alt=media&#x26;token=824c45b4-945f-4e96-8f19-7158c03399ea" alt=""><figcaption></figcaption></figure>

### 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:&#x20;

* side bar,&#x20;
* floating modal or&#x20;
* 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:&#x20;

Open the `background.js` file in any text editor (we're using VS Code in the below example):&#x20;

<figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FWvRIoHGYUKzDv2rahHlF%2F2024-11-28%2011.47.14.gif?alt=media&#x26;token=091858e1-d5a3-478e-91e8-3e8604372e86" alt=""><figcaption></figcaption></figure>

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**:&#x20;

   <figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FJp9Ckf2mQc28O0VCtKDE%2F2024-11-28%2011.51.11.gif?alt=media&#x26;token=8d031de7-60e9-4733-9310-35e609af258f" alt=""><figcaption></figcaption></figure>
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.&#x20;

<figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FC2aSOirOzj0tAUp3a7bH%2F2024-11-28%2011.58.29.gif?alt=media&#x26;token=35368ea0-7179-4dcf-9878-3ed76d181fb3" alt=""><figcaption></figcaption></figure>

#### 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&#x20;

<figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2F3bBO42epqn1HzpPgMdnN%2Fimage.png?alt=media&#x26;token=6774389c-fcf8-4f43-a855-b3b51277c2da" alt=""><figcaption></figcaption></figure>

#### **Setting dimensions**

If you're using a Bubble app page with dimensions different to:&#x20;

* width:320px and&#x20;
* height:640px&#x20;

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">`.)

### Allow iframes in your Bubble app

*Estimated time: 1 minute*

In your Bubble app, go to settings/general and allow all iframes:

<figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FTp4Sl89cjmYPCJCTg1W1%2Fimage.png?alt=media&#x26;token=7514295d-0c73-47d4-9fbe-b9a95b840999" alt=""><figcaption></figcaption></figure>

### 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).

<figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FoQsaQt6bRhhkTszdBY7q%2Fimage.png?alt=media&#x26;token=669c452f-6e10-4c61-af11-3dc3d644743e" alt=""><figcaption></figcaption></figure>

Then, click on ‘Load unpacked’ and select the Chrome Extensions folder to install a local copy.

<figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2F5prYN0ABso7xhmTZWNhe%2Fimage.png?alt=media&#x26;token=e53af7b1-500f-4f5b-97c1-7630f2dab94a" alt=""><figcaption></figcaption></figure>

**⚠️  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:

<figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FFa0I3lUrTIT6WnMQbT4r%2F2024-11-28%2012.22.15.gif?alt=media&#x26;token=3f74489e-a313-4f55-b256-0eb4d2386da4" alt=""><figcaption></figcaption></figure>

#### **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.

<figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FwhyTdfPk24ZbNySCwDQi%2FScreenshot%202024-11-28%20at%2012.24.14.png?alt=media&#x26;token=e158b981-be97-4f98-ba4a-a02df1b20985" alt=""><figcaption></figcaption></figure>

### Build out your Bubble workflows

You should now be able to display your Bubble app in a Chrome extension!&#x20;

* 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](https://cranford-tech.gitbook.io/charles/publishing-to-the-chrome-webstore).