# Popup, side bar and modal options

You have the option to show your Chrome extension in a:

* Popup (the 'standard' chrome extension behaviour)
* Sidebar
* Floating modal
* Full-screen modal

**Please note:** note all of the features that come with the Charles plugin will work in all of these formats. You can see a full list of the plugin's features and the formats they are compatible with in the [Features Overview](https://cranford-tech.gitbook.io/charles/key-features/features-overview).

### Using a popup

#### App link

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:

<figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FrpphwNS6gWyeDUyEumh9%2Fimage.png?alt=media&#x26;token=466515a6-79ee-4000-9306-d2ad530bea7a" 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">`.)

### Using a sidebar, floating modal OR full-screen modal

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%2FKAG1Xz7u9AV7WPflDxsy%2FOpening%20background.js.gif?alt=media&#x26;token=34fad66b-e926-4add-86c8-fd1775b0c3e4" 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%2FdW2scbO0vnjnFiysoUW1%2F2024-11-28%2011.50.46.gif?alt=media&#x26;token=1b8b125f-f83d-43d7-9cdd-ad5935a96680" 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;

<div data-full-width="true"><figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2F1wVxKYTXKtJLuDMgAlq3%2F2025-07-24%2009.00.04.gif?alt=media&#x26;token=049286ba-d364-4d43-a122-7d6b2550a64b" alt=""><figcaption></figcaption></figure></div>

**App link**

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://`
