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

Tips
1

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.

082636
082636581Ă—655 31.8 KB

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.

My Page - 20 June 2022 (1)

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!
Features _ Bubble - 20 June 2022 (1)

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!

6 Likes
3

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!

4

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.
5

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()

6

Figured it out!

7

Hey @hugolee

I’m interested in this extension packages but I wanted to know if the extension could also replaces the page you see when opening a new tab?

I’m creating an experience that displays a dashboard on the actual webpage after clicking the new tab button.

Thanks!

8

Hi @fitalyst2017,

Yes, you will need the chrome.tabs.update function to update the URL of the current active tab.

9

Hey @hugolee ,

Thanks for the speedy response!
Looks like I would also need the onCreated event?

Is this functionality something you can help implement into a chrome extension via your subscription plans?

10

Hey @fitalyst2017,

Yes, I can do it. You can subscribe to my monthly development plans and submit tasks there. Also free feel to DM the details to me so that I can give you an estimated completion time. Thanks!

11

I’d love a feature where you can take a screenshot of the underlying page and draw on it

12

Perfect! Looking forward to connecting soon.

13

Could you tell me more about what you are using to get the current tabs url. This is something Im trying to figure out how to do. Thanks!

14

Hey @hugolee Is there a way to let the bubble.io app communicate with the extension?
E.G when I user clicks a button it passes that as a message to the extension.

15

Yes, you can use Message passing to do it.

In your manifest.json, add your bubble app’s domain to externally_connectable.

On your bubble page, run a JavaScript and trigger the chrome.runtime.sendMessage function. The variable extensionId is required.

In the server script (background.js), add a listener to receive the message. You can do it with the chrome.runtime.onMessageExternal.addListener function.