Forum Academy Marketplace Showcase Pricing Features

[2022] Convert your Bubble app to a Chrome extension with this Free package

Hello Bubblers! I just made a Chrome extension for my client. This is already the third extension I have built (e.g. the Nalfe Extension). I think it would be a good idea to share my experience here. This guide shows you how to make a Chrome extension that injects a Bubble page as a right-side panel.

How it works?
The idea is similar to the mobile wrapper apps. We build a container with code and the bubble page will be wrapped in the container. For example, a container in the extension popup.

There is already a guide on the forum:

But this is not the only way to show a bubble page. Sometimes we may want to inject it into the page. Just like the loom extension.

The container has been built in the package. All you need to do is to follow the steps and replace the URL.

Step 1: Download and unzip the files
extension_injected.zip

Step 2: Add URL and customize the right side panel
Open content_scripts.js with any text editor. Replace https://extension-loom.bubbleapps.io/version-test/extension with your app’s URL.

:bulb: Make sure all iframe is enabled. If you are not sure, go to the bubble editor. Settings > General > Allow to render the app in a frame/iframe (X-Frame-Options). Select “Allow all iframes”.

You can also edit the following parameters to customize the side panel.

  • width - the width of the side panel.
  • height - the heght of the side panel.
  • overlay - set to false if you don’t want the overlay.
  • closeButton - set to false if you don’t want the close button at the bottom right.

Step 3: Customize extension icon, name, and description
Open the folder images. You can place your own icon images here.

Open manifest.json with any text editor. Replace the path of the icons.

You can also edit the name and description.

Done!

Your extension is ready. You can load your unpacked extension to test (https://developer.chrome.com/docs/extensions/mv3/getstarted/#unpacked) or upload it to the Chrome Web Store (https://developer.chrome.com/docs/webstore/publish/).

It usually takes 1-2 days for the extension to be approved.

Additional features

  • Bubble action: Get page HTML (Coming soon)
  • Bubble action: Simulate click (Coming soon)

For those who need advanced features, I can add extra plugins to this free package, but I am not sure what features should be included, so please let me know if you have any ideas. Meanwhile, free feel to check out my subscription plans if you need further assistance. Cheers!

3 Likes

Hi @hugolee I’m trying to figure out how to get selected/highlighted text from currentTab and pass that through to my Bubble app that’s iframed in the extension.

I’m having trouble understanding exactly where to put the script, add the listener, etc.

Would you mind giving me some input? Thanks!

Hi Jeff,

You need to add code to the content script.js and your bubble page. This is how I would do it:

  1. Add an event listener into the content script.js. When mouse up, get the selected text.
  2. Send message to the iframe.
    iframe.contentWindow.postMessage('message body', '*')
  3. Add an event listener on your bubble page. When there is a message, get the message and expose the state.

Thanks! I already have the event listener from the code above that explains how to get current tab’s url. I have that working properly.

I think my issue is a weak understanding of the exact Javascript code needed to achieve your third point above. For some reason I can’t pass through a var text from window.getSelection().toString()

Figured it out!