🆓 Step by Step: Convert Bubble Apps to Chrome extensions in 10 minutes

[edtyli9]

Hi Bubblers, after converting Bubble apps to native mobile apps, I started to explore more possibilities with Bubble apps. This is a document about how to create a simple popup extension.

Step 1: Download and unzip the files

extension.zip

Step 2: Add URL and customize the popup size

Open popup.js with any text editor. Replace https://nalfe.com with your app’s URL. (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 width and height to customize the size of the popup.

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.

Guide to building advanced plugin features

Open new tabs from the extension
Get active page’s URL

[zein.fayyad]

This worked smoothly, thank you!

[edtyli9]

That’s awesome! Let us know your extension launches. Will go and check it out.

[edtyli9]

Open new tabs from the extension

Chrome extension can do more than just display your Bubble app in the popup. This guide explains how to add functions to your extension, and how to trigger the functions from your Bubble app.

We are going to create an extension function that opens links in new tabs. This function can be triggered by an action in your Bubble app’s workflow.

Step 1: Add listener and define functions

Communication between extensions and Bubble apps works by message passing. In short, we can send a message from the Bubble app to the extension. The extension can listen for the message, run some functions, and send a response.

To receive the message, we need to create a listener in the background script. We will also create a function openNewTab() to open URLs in new tabs.

Open background.js with any text editor.

//background.js

let openNewTab = function(url) { //create new tab
    chrome.tabs.create({
        active: true,
        url: url
    });
}

chrome.runtime.onMessageExternal.addListener( //receive msg from Bubble app
    function(request, sender, sendResponse) {
        if (request.action === 'openNewTab') {
            openNewTab(request.url);
        }
    }
);

Step 2: Allow the extension to receive messages from your app

Open manifest.json. Find the key externally_connectable in the JSON file. Add URL pattern to the list matches. The URL pattern should match your Bubble app’s URL.

{
    "name": "Nalfe extension demo",
    ...
    "externally_connectable": {
        // Match patterns for web pages.
        "matches": [
            "https://*.bubbleapps.io/*"
        ]
    },
    ...
}

Step 3: Send message from the Bubble App

To send a message from your page, you have to run a JavaScript function with an action. You can create a custom plugin action to do it, or use the Toolbox plugin.

Run this function to send a message:

let extensionId = "<extensionID>"; //replace this with your extension id
let url = "https://nalfe.com/"; //this URL will be opened in a new tab

try {
    chrome.runtime.sendMessage(extensionId, {
        action: "openNewTab",
        url: url
    }, function(response) {
        var lastError = chrome.runtime.lastError;
        if (lastError) {
            console.log(lastError.message);
        }
    });
} catch (err) {
    console.log(err);
}

You can find your extension ID here.

Notice that the extension ID for an unpacked extension is not fixed.

Done!

You have created an action that opens a link in a new tab. Load the extension to test. Make sure you have the correct extension ID.

[machadoa953]

Great, this is cool! Make extesions using bubble is a game changer for some bubble developers. Add some js functions and your extesions touch the sky haha. I’m excited for more news!

[J805]

Hey @edtyli9

This is pretty cool. I am going to try to submit a chrome extension and see how it goes. So far in testing it’s already super useful. Thanks for this tip!

[edtyli9]

Awesome! Let us know when your extension launches.

[edtyli9]

Get active page’s URL

This guide walks you through how to get data from the extension user and send the data to your Bubble app.

Step 1: Create a listener on the Bubble page

To receive messages from the extension, we need to create a listener on the Bubble page. This can be done by adding a custom plugin element, or the Toolbox plugin.

Using the Toolbox plugin

1. Add a “Javascript to Bubble” element to the page. Fill in the suffix with a variable name url. Check the box “Publish state”. Select “text” as the type of data.
2. Add an HTML element to the page.

<script>
    window.addEventListener("message", (event) => {
        bubble_fn_url(event.data.url);
    }, false);
</script>

1. Display the URL by the dynamic expression “JavascripttoBubble’s value”.

Make sure the elements are visible on page load.

Step 2: Get URL and send a message

Go to your extension folder. Open popup.js with any text editor. Find the function iframe_onload(). This function is triggered when the Bubble page is loaded. Insert the following code into the function.

let iframe_onload = function () {
    //...
    //insert the following code
    let getCurrentTab = async function() {
        let queryOptions = { active: true, currentWindow: true };
        let [tab] = await chrome.tabs.query(queryOptions); //get current url with tabs API
        if(!tab) return;
        if(!tab.url) return;
        iframe.contentWindow.postMessage({ //send message to the Bubble page
            url: tab.url
        }, iframe_url);
        return true;
    }
    getCurrentTab();
}

Step 3: Declare permission

Declaring permission is necessary for some of the chrome APIs. To get the tab’s URL, you must declare the “tabs” permission.

Open manifest.json. Find the key permissions. Add “tabs” to the list.

{
    "name": "Nalfe extension demo",
    ...
    "permissions": ["tabs"],
    ...
}

Done!

You should be able to see the URL when you open the popup.

[J805]

We just launched our Chrome Extension and it was approved. A lot easier than trying to get approval from Apple.

Check it out!

myColors - by NoCodeMinute

It’s only accessible to members of the NoCodeMinute - eLearning Hub. So you will have to create an account to check it out. Pay for a subscription for full access. Here is a video so you can at least see it in action. There is also a nice drag and drop feature as well as a color picker to use.

We use this all day when working on our projects. Saves us so much time.

myColors

[edtyli9]

Awesome job! Your plugin looks great and I just installed it on my browser.

Quick question. Is there a way to try it before registering for an account?

[J805]

Hey @edtyli9

I don’t have a trial for it as of yet. I would have to see how I could do something like that. Maybe limit the colors to a few, then unlock the rest with a subscription or something.

[edtyli9]

A way to try the extension before registering would be helpful. It would let users like me get an idea of what the extension does before signing up.

[J805]

Hey @edtyli9

I just added a way to allow you to try it out before you purchase it. Give it a shot and let me know what you think. It just allows 3 colors on the ‘free’ version.

[edtyli9]

That’s quick!

Not sure whether I did everything right, I am still stuck on the signup page.

[J805]

Hey @edtyli9

Hmm

That is the login screen. Press the sign up button on the top right so you can create an account. Then once you are signed up you will have free access to the platform with a limit of 3 colors/fonts.

Let me know if that helps. Otherwise I can show you a screen recording on how to sign up. Keep me posted.

If you already have an account then you can enter your email to send yourself a login link. Just remember to login using the chrome browser if that’s not your default browser. You might need to right click the link and say ‘open link in chrome’ or something like that. Or copy and paste the link to the chrome browser.

[edtyli9]

Got it. I tried signing up for a new account.

This is the message I got: Oops! Your browser seems to have cookies disabled. Make sure cookies are enabled.

I’m using Brave and I have my shields turned off.

[J805]

Hmm

Thanks for letting me know. I will have to download brave and see how to get it working.

[edtyli9]

Congrats on getting the first few users. It is usually the hardest at the start.

How did it go? You may be able to reproduce the issue on Chrome as well. Brave is a Chromium browser.

[J805]

Hey @edtyli9

Thanks for asking. I have the same error come up on Brave.

Chrome has no issues. I’m not sure why it doesn’t want to work on Brave. I tried accepting all the cookies and it was still giving me the same errors.