Forum Academy Marketplace Showcase Pricing Features

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

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

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

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.

2 Likes

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!

1 Like

Hey @edtyli9 :wave:

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! :blush:

2 Likes

Awesome! Let us know when your extension launches.

1 Like

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.

5 Likes

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

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.

3 Likes

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?

1 Like

Hey @edtyli9 :wave:

I don’t have a trial for it as of yet. :thinking: 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.

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.

1 Like

Hey @edtyli9 :wave:

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. :blush: It just allows 3 colors on the ‘free’ version.

That’s quick!

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

Hey @edtyli9 :wave:

Hmm :thinking:

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. :blush:

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.

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.

1 Like

Hmm :thinking:

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

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.

Hey @edtyli9 :wave:

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. :man_shrugging:t2: I tried accepting all the cookies and it was still giving me the same errors.

Hi its possible to open a link in a current tab, not in a new tab? I have a whatsapp link in my bubble app, that I want to open in the current whatsapp web tab. Do you know how I can do that?

1 Like

Very helpful. One quick question - can the plugin be opened in a sidebar rather than in a popup?

To open a sidebar, first you need to create a div and position this div using css, like a sidebar and put the bubble iframe inside this div