Bubble.io app as a Chrome Extension

As a Bubble.io developer, you might want to expand your web app’s reach or use it for your internal tool by converting it into a Chrome extension. Below is a simplified guide tailored for you.

Bubble app as a Chrome Extension Banner Image

Step 1: Create a Responsive Bubble App

Design and build your Bubble web app with responsiveness in mind.
Use the Nocode AI template gallery for pre-designed responsiveness.

Step 2: Adjust Your Bubble App Settings

Navigate to Settings > General in your Bubble editor.
Select "Allow all iframes" to enable rendering in a frame/iframe.

Step 3: Create Chrome Extension Files

Download and prepare the necessary files for your Chrome extension:

extension.zip. (Please note that this is a file link to this developer's github repo https://github.com/hugonalfe/chorme_extension/. If you are not sure about downloading the file, please read our next article on how to create this file by yourself. )
Unzip the downloaded file.

Files should look like this.

Step 5: Add URL and Set Popup Size

Open background.js and content_script.js in your preferred code editor and replace URL with your app's URL. (You can also use normal text editor to edit the code)

Modify the width and height parameters to set the popup's size.

Step 6: Personalize Icon, Name, and Description

In manifest.js, Change the name and description to reflect your app's identity.

Add your icon image in the images folder and point to the image file name in the manifest.json.

Step 7: Load and Test Your Chrome Extension

Compress your project files into a .zip file.
In Chrome, go to Manage Extensions or type below in address bar.

chrome://extensions/

Enable Developer mode.

Click on Load unpacked and select your .zip file.

🎊 Congratulations

You have finished all the steps to convert your bubble app into Chrome extension. Click your chrome extension to get started!

Final Thoughts

Following these steps will convert your Bubble app into a Chrome extension, offering a popup version of your app whenever clicked. This not only provides users with quick access but also turns your Bubble app into a versatile tool within the Chrome browser.

NoCode AI