Charles
  • Introduction
    • 👋Welcome
  • Getting started
    • Quickstart guide
  • Opening actions
    • Popup, side bar and modal options
    • Trigger the extension with a floating button
    • Open the extension automatically on specific URLs
  • Key features
    • Features overview
    • Open website on install / uninstall
    • Get tab info
    • Get text selected by user
    • Get element text
    • Get element HTML
    • Set element inner text
    • Set element inner HTML
    • Open URL in sidebar modal
    • Open URL in fullscreen modal
    • Copy text to clipboard
    • Populate an input field
    • Simulate mouse click on an element
    • Capture screenshot
    • Open URL in new tab
    • Show native alert
    • Set an extension badge color and text
    • Change extension icon
    • Close extension
    • Save to Chrome storage
    • Injecting custom javascript
  • Extending Charles
    • Extending Charles with your own Javascript
  • Publishing to the Chrome Webstore
    • Prepare extension for submission
    • Registering as a Chrome Webstore developer
    • Publishing your extension
  • FAQ
    • Common questions
  • Troubleshooting
    • Charles Data Elements do not receive any values
    • Cannot log in (cookie issues)
    • Support
Powered by GitBook
On this page
  • Using a popup
  • Using a sidebar, floating modal OR full-screen modal
  1. Opening actions

Popup, side bar and modal options

PreviousQuickstart guideNextTrigger the extension with a floating button

Last updated 3 months ago

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