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.

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:

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 <body style="width:320px;height:640px">.)

Using a sidebar, floating modal OR full-screen modal

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.

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

PreviousQuickstart guideNextTrigger the extension with a floating button

Last updated