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

Tips
8

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.

6 Likes