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
  • Download the Charles source code
  • Define the opening action
  • Using the standard popup
  • Allow iframes in your Bubble app
  • Load the Charles extension in Chrome
  • Build out your Bubble workflows
  • Submit your Chrome extension to the Chrome Webstore
  1. Getting started

Quickstart guide

PreviousWelcomeNextPopup, side bar and modal options

Last updated 5 months ago

Here's how to get started with Charles:

Download the Charles source code

Estimated time: 1 minute

Download the free Chrome extension source files from (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

If you're using the standard popup, skip to the next section

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

If you're using a side bar, floating modal, or full screen modal, you can skip this section

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

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!

  • Build your app using the elements and workflows provided by the Charles plugin 😊

Submit your Chrome extension to the Chrome Webstore

To access Charles’ native features through bubble workflows, you'll need to install the from the Bubble plugin marketplace.

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 .

Check out submission guide .

Charles Bubble plugin
Charles demo app
here
this link
Download the Charles source code (for free)
Define the opening action
Using the standard popup
Allow iframes in your Bubble app
Load the Charles extension in Chrome
Build out your Bubble workflows
Submit your Chrome extension to the Chrome Webstore