bubbleHacks
Charles

Charles

Charles: The Bubble Chrome Extension Plugin

Build Chrome Extensions from your Bubble app.

Get it

image

Build Chrome extensions from your Bubble app, without effort and without spending a fortune. No coding skills needed.

Start immediately

Download the extension files and get started immediately.

Simple setup

Adjust the extension files with just a few clicks. No coding skills needed.

Simple pricing

Pay USD 19 for the source files, one-time. No recurring costs.

Features include

⚡
Display your Bubble app in a Chrome extension popup
⚡
Customise the Extension name, description, and icons
⚡
Get the current tab name and URL
⚡
Open an iFrame in a modal
⚡
Open an iFrame in a sidebar
⚡
Open a URL in a new Tab
⚡
Get the selected text
⚡
Copy to clipboard
⚡
Display an alert
⚡
Inject custom JavaScript
⚡
Built on Manifest v3
⚡
More coming soon!

Get started

Detailed intro and setup walk through video

Setup

1️⃣
Create a new Bubble app page with the dimensions width:320px and height:640px. (It is also possible to use a different size, but you will need to adjust the extension files. See Step 5 below).
2️⃣
In your Bubble app, go to settings/general and allow all iFrames.
image
3️⃣
Download and unzip the Chrome extension files to your computer.
4️⃣
Optional: Install the free Charles | The Chrome Extension Plugin Bubble plugin to your app. You can use the following elements and actions:
  • Element: Charles: Tab Info: Get the current tab’s title and URL
  • Element: Charles: Selected Text: Get the selected text from the page
  • Action: Charles: Show Alert: Show an alert in the browser
  • Action: Charles: Open New Tab: Open a URL in a new tab
  • Action: Open a website in a modal/popup on the current tab
  • More coming soon!

See https://charles-chrome-extension-demo.bubbleapps.io/popup for demo setup. If you just want to use Charles to render your Bubble app in an extension popup, you can skip this step. You can also do this later.

5️⃣
Open popup.js in any text editor and replace https://charles-chrome-extension-demo.bubbleapps.io/version-test/popup in line 4 with your app's URL. Make sure you use the full URL of the page you want to display in the Chrome extension.
image

If you use a Bubble app page with dimensions different to width:320px and height:640px, you will need to adjust the extension files:

  1. Open popup.js in any text editor and adjust the two numbers in line 15 iframe.style.cssText = 'width:320px;height:640px;';.
  2. Do the same for popup.html, line 4 <body style="width:320px;height:640px">.)

6️⃣
In Chrome, go to chrome://extensions/ (just enter this in the URL field) and turn on developer mode (toggle in the top right corner).
image

Then, click on ‘Load unpacked’ and select the Chrome Extensions folder to install a local copy.

image

⚠️  Extensions don’t work while on the chrome://extensions site - please got to another website to test the extension.

7️⃣
If you change any of the Chrome Extensions files from now on, click on ‘refresh’ to update your local installation.
image
8️⃣
To publish your extension to the Chrome Webstore follow the steps in the Chrome Developer Docs. But let’s do some cosmetics before you do so: 
  1. Open manifest.json in any text editor and adjust the app name and description in line 3 and 4.
    2. image
  2. If you have a square icon for your Chrome extension, use an online resizing service (e.g. https://www.simpleimageresizer.com/upload) and replace the files in the images folder. Make sure to keep the names as is (i.e. 16x16.png, etc.).
    3. image
⚡
Per default, a click on the extension icon in the browser bar open the extension popup. this is the main way for your app to interact with the browser or current website. For some simple use cases, you might want to trigger a different action when the user clicks on the icon. For now there are two more options:
  1. Open an iFrame in a modal
  2. Open an iFrame in a sidebar

⚠️  Please be aware that (for now) these iFrames won’t be able to communicate with your Bubble app as the standard extension popup (i.e. the plugin actions only work in the standard popup).

Here is how to set it up:

  1. Open background.js in any text editor and uncomment (→ remove the // in front of the lines) lines 4-6 for the sidebar or lines 9-11 for the modal. Please also adjust the target URLs and the modal title. It should then look like that:
    2. image

    or

    image
  2. 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
    3. image

    should then become

    image
  3. Save your files and update your extension in Chrome
    4. image
⚡
Injecting custom JavaScript 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

Need help? Feature requests?

Reach out at damian@bubblehacks.io or https://twitter.com/DamianJanzi

You might also like

‣
subpages

TwitterYouTube

Sign up to newsletter

2022 bubbleHacks