🥳 Build Google Chrome Extension without Code

Dear fellow Bubblers,

we are very excited to announce the launch of our Google Chrome Extensions Builder package for Bubble. We have been experimenting with Google chrome extensions for quite a while and even though it has always been quite simple to wrap your bubble app into an extension, communication wasn’t possible. However with this release we were able to solve that problem by allowing your Bubble App to communicate with your Chrome Extension and also with the browser of the user.

Features
:ballot_box_with_check: Receive ready-to-publish zip file with your embedded bubble application
:ballot_box_with_check: Define extension logo, size and start url
:ballot_box_with_check: Get the users current tab
:ballot_box_with_check: Get the users current highlighted text
:ballot_box_with_check: Trigger a new webpage to be opened
:ballot_box_with_check: Trigger the creation of a bookmark
:ballot_box_with_check: Change a specific input field on page
:ballot_box_with_check: Change all input fields on page
:ballot_box_with_check: Show alert
:ballot_box_with_check: Get the main language of the page
–many more features will be released in the upcoming weeks and months (taking screenshots, changing text etc.)

Pricing
The pricing consists of two parts:

  1. You can purchase a ready-to-publish build delivered as a .zip file for $129 via chrome.nocodehq.com . This will contain a page of your bubble application embedded and all relevant files needed to submit your chrome extension for publishing (logo files, version etc.)

  2. In order to use advanced features like getting data from the browser and triggering actions you will have to subscribe to our Bubble Plugin for $10 / month

Important Links
Create and Buy Build
Bubble Plugin
Demo Video
Documentation
Full Setup Video

We are excited to see what extensions everyone will build :star_struck:

If you have any questions please message us here in this thread so that everyone can benefit.

Noel

14 Likes

Looks good, congrats on your launch!

1 Like

Thank you!

  • Appending a div on the page
  • get id of an element , via css and attach an action (API call, event, code )
1 Like

Added to the roadmap!

Version 1.1 Released

  • Get the text of a certain element on the current users tab via the element id

Noel

Version 1.2 Released

  • Trigger the download of a specific file from your Chrome Extension
1 Like

Hi Anticode, When I am designing the extension, can there be hidden groups that are collapsed when hidden? for example, a login screen? so the height of the entire page (which will become the extension) is for example, 2600, but the height of various groups to make the extension function are ~400. Also, trigger a screenshot of a selection from the current tab (like dragging over an image) would be amazing. Is that in the roadmap? Thanks!

Hello!

yes you can do that however the extension itself where the bubble app will be embedded will have a fixed width and height. It won’t be able to dynamically expand or collapse, so make sure that the height and width that you choose for the extension build is “big enough” to accommodate all your elements.

Yes, taking screenshots of the current tab is actually the next item in our roadmap! We’ll post here in this thread once this is ready.

Noel

Example of a demo chrome extension built by us!

Build a Google Chrome Extension that defines the currently highlighted Word without code!

In this tutorial we will show you how to build a chrome extension that defines the currently highlighted word on any website! We will use a bubble application, a free definition api and our chrome extension builder. Purchase the Chrome Extension Build at: https://chrome.nocodehq.com More Tutorials at https://nocodehq.com

1 Like

This looks amazing! Some ideas for roadmap:

  • Get the full page source of the user’s current page (a raw dump of the whole page)
  • Get value of an input by Element Id, Class name, Tag Name, or Name
  • Get value of pretty much anything by any selector on the page
2 Likes

Build a Bookmarking Chrome Extension without code!

In this tutorial we will show you how to build a bookmarking chrome extension without code using your bubble app and our chrome extension builder! Users will be able to bookmark the current tab, save the bookmark in the bubble database, see an alert and open saved bookmarks in a new tab. Purchase your build at [https://chrome.nocodehq.com]

1 Like

New Features:

  • Get Element Value by its class name
  • Get Element Value by its HTML Tag
  • Get the Full HTML Source Code of the current page!

New Feature!

  • Display a loading spinner while your bubble app is loading within the chrome extension!

New Features

  • Use a custom query selector + property to get any data from the current active tab
1 Like

Great work, really impressive.

One question, do you think it would be possible at one point to include HTML in a page viewed by the user? Example : I’m using Google Calendar, i’d like to add a button that will generate an action in bubble directly in the calendar/event/etc…

Thank you!

What your describing is a bit more complex but we will add that in the future.

The next update however will allow you to inject a custom script into the current page. This would allow you to also display custom HTML. This however would not support the functionality of then sending data back to your bubble app

1 Like

nice! can’t wait :slight_smile:

1 Like

New Features:

  • Remove an HTML Element from the page by targeting its Element ID
  • Append text to the current page by targeting an element via the element id
  • Inject Custom Javascript into the page!
1 Like