bubbleHacks
bubbleHacks
Documentation and FAQ

Documentation and FAQ

Charles Bubble Plugin Documentation

ℹ️
To access the below functions, you will need to install the Charles Bubble Plugin to your Bubble app.
⚡

Install the Chrome extension source code and set up your app → Get started

‣

Feature overview. Please read ⚠️

⚠️ Some features only work in the extension popup or only in the sidebar:

Feature
Popup
Sidebar / Modal
Get tab infos
✅
✅
Get user selected text
✅
✅
Get element text
✅
✅
Get element HTML
✅
✅
Open URL in sidebar modal
✅
❌
Open URL in full-screen modal
✅
❌
Copy text to clipboard
✅
✅
Populate an input filed
✅
✅
Simulate mouse click on element
✅
✅
Capture screenshot
✅
❌
Show native alert
✅
✅
Open URL in new tab
✅
✅
Set an extension badge color and text
✅
❌
Change extension icon
✅
❌
Close extension
✅
(✅)
Save to Chrome storage
✅
✅
Injecting custom JavaScript
✅
❌
Record audio from Bubble app (using 3rd party Bubble plugins)
❌
✅
‣

Define opening action

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 or full-screen modal.

🎉 Since Charles is awesome, most plugin actions will also work in the side bar or full-screen modals

To do so:

  1. open background.js in any text editor, and uncomment either lines 5-8 (i.e. remove the // in front of the lines) or lines 11-14.
    2. image

    or

    image
  2. Adjust the URL in line 5 or 10 to point to your Bubble app. Start the URL with https:://…
  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
    4. image
    image
‣

Get tab infos

  1. Place the Charles: Tab info element on the page
  2. Access the elements states Tab title and Tab URL
image
‣

Get user selected text

  1. Place the Charles: Selected text element on the page
  2. Access the elements state Selected Text
image
‣

Get element text

  1. Place the Charles: Element text element on the page
  2. Give it a value for the selector that matches the element you want to select, eg. h1 for the h1 title element:
      3. image

      Please note that Charles will automatically select the first element that matches the selector.

      Learn more about CSS selectors:

    1. https://www.w3schools.com/jsref/met_document_queryselector.asp
    2. https://www.w3schools.com/css/css_selectors.asp
    3. https://www.w3schools.com/cssref/css_selectors.php
‣

Get element HTML

  1. Place the Charles: Element HTML element on the page
  2. Give it a value for the selector that matches the element you want to select, eg. html to select the whole html document:
      3. image

      Please note that Charles will automatically select the first element that matches the selector.

      Learn more about CSS selectors:

    1. https://www.w3schools.com/jsref/met_document_queryselector.asp
    2. https://www.w3schools.com/css/css_selectors.asp
    3. https://www.w3schools.com/cssref/css_selectors.php
‣

Open URL in sidebar modal

Use the action Charles: Open iFrame in sidebar workflow action and give it a URL to open and width in px or %: Start the URL with https:://…

image
‣

Open URL in full-screen modal

Use the action Charles: Open iFrame in modal workflow action and give it a URL to open. Start the URL with https:://…:

image
‣

Copy text to clipboard

Use the action Charles: Copy to clipboard workflow action and give it a text to copy:

image
‣

Populate an input filed

Use the action Charles: Populate input field workflow action and give it:

  • A text value to populate the input with
  • A CSS selector to select the input you want to populate
  • Please note that Charles will automatically select the first element that matches the selector.

Learn more about CSS selectors:

image
‣

Simulate mouse click on element

Use the action Charles: Simulate mouse click on element workflow action and give it:

  • A CSS selector to select the element you want to simulate the click on
  • Please note that Charles will automatically select the first element that matches the selector.

Learn more about CSS selectors:

image
‣

Capture screenshot

Take a screenshot of the active tab’s viewport (i.e. the part that is currently visible on the screen):

  1. Add the element Charles: Screenshot to the page.
  2. Use the action Charles: Capture Screenshot to initiate a screenshot
    3. image
  3. Once the screenshot is taken, the event screenshotCaptured is triggered. You can use the Charles: Screenshot's states
    1. Screenshot URL to access an image uploaded to the Bubble CDN. Please use :saved to S3 to make sure the image is permanently stored. This should be the main way of storing images.
    2. Base64 encoded image to save a base64 encoded image directly to Bubble’s databse. This can be useful if you need to use any 3rd party APIs that expect a base64 encoded image. Please note that the string contains a prefix: data:image/png;base64,iVBORw0KGgoAAA….
      3. image
‣

Show native alert

Use the action Charles: Show alert workflow action and give it an alert text:

image
‣

Open URL in new tab

Use the action Charles: Open new tab workflow action and give it a URL to open. Start with https:://… :

image
‣

Set an extension badge color and text

Use the action Charles: Set badge text and color workflow action and give it a short number or text (max 4 characters) and a color (using a hex code):

image

To remove the badge text and color: run the workflow with empty number / text. Please leave a value for the color, otherwise there might be an error.

image
‣

Change extension icon

  1. Create a new set of extension icons in the dimensions 16px, 32px, 48px, 128px and place them in the images folder in the extension source code folder. You can also create a subfolder to keep things cleaner.
    2. image
  2. Use the action Charles: Change icon workflow action fill in the paths to the new images starting with images/…:
    3. image

To reset the the icon, run the same workflow, but point it back to the original images:

image
‣

Close extension

To close the extension popup:

Use the action Charles: Close extension popup workflow action:

image

To close the extension sidebar:

There is no direct workflow action to do so, but you can use the Simulate mouse click on element workflow action to simulate a click on the sidebar closing button, using the selector #chrls-sidebar-close-button:

image

To close the extension full-screen modal:

Same as above, but use #chrls-full-close-button as selector:

image
‣

Save to Chrome storage

With Charles you can save text to Window.localStorage. ⚠️ Please make sure you use the Charles Chrome Extension v1.6 or later.

  1. Add the Charles: Chrome storage element to your Bubble app
  2. Use the workflow actions:
    1. Charles: Write to local storage
    2. Charles: readFromLocalStorage
    3. Charles: deleteFromLocalStorage
    4. Charles: clearLocalStorage

      5. ⚠️ The extension can read / write either in the context of the extension itself or in the context of the active tab (currently active website in Chrome)

      • Extension context: Isolated context of the extension. Can be accessed from any tab.
      • Active tab context: Read and write in the local storage of the currently active tab.
  3. After using ‘Charles: readFromLocalStorage’, an event ‘Charles:Chromestorage A Local variable is read’ will be triggered. You can access the results in the ‘Charles: Chrome storage’ - Element’s states ‘Variable name’ and ‘Variable value’, e.g.
image
‣

Injecting custom JavaScript

With Charles you can inject custom JavaScript files into a page. ⚠️ Please make sure you use the Charles Chrome Extension v1.6 or later.

Unfortunately, in Chrome Manifest v3 it is no longer possible to inject remote JavaScript into a page. However, we have built in 3 empty files into Charles (in the folder CustomJavaScript), where you can add your own JavaScript. If you like, you can also add more .js files into the folder.

image

There are two ways to inject a file into a page.

  1. Most common: Inject a file every time a certain page is loaded. E.g. every time the user visits bubblehacks.io. The extension does not have to be open (i.e. the user does not have to click the extension icon.). A common use case for this is to inject a button to a page. This can be configured in manifest.json → content_scripts

For this to work, you need to adjust the following code:

image
  1. Less common: Using the Bubble Plugin to inject a file when the extension popup is visible and an action is triggered in your Bubble file. Make sure the File Name corresponds to a file in the CustomJavaScript folder of the extension.
    2. image

FAQ

‣

Can I record audio form my extension?

Yes and no. Chrome has certain limitations on microphone access, which affects audio recording capabilities. However, there are alternative options available depending on the type of extension you are using.

If you are using the extension's sidebar, you can utilize an audio recording plugin within your Bubble app to capture audio. When initiating the recording process, the user will be prompted to grant permission for microphone access.

Unfortunately, recording audio directly from the extension's popup is currently not supported.

‣

Can I use Google/FB OAuth to log in ('Log in with Google')?

Yes, you can, but not directly within the extension window due to Google's iFrame restrictions. To work around this:

  1. Open a new tab linked to your Bubble app.
  2. Complete the login process there.
  3. Once authenticated on the site, you'll be automatically logged into the extension as well.

‣

Can I copy and past Bubble elements (like Frames or Atomic Fusion)?

Yes, this can be achieved using the Local Storage feature. Walkthrough here: https://www.loom.com/share/03dd2a4fb0e641a99689c6e9538d6a9a?sid=18d6f98d-cc11-484c-b27d-5433f2d86623. Similar for worfklows.

XYouTube

Home

Mobile

Chrome Extensions

Newsletter

About

© 2023 bubbleHacks by NC Labs GmbH, Switzerland. All rights reserved.