Complete Guide on How to Build Chrome Extensions and Website Widgets in Bubble

[NigelG]

@matteo is this just iFrame based? Or will we learn how to build something that does a “javascript” style widget embed?

So this …

<div id="poryApp" data-domain="https://embedtest.pory.app" ></div>
<script src="https://pory.app/widget.js"></script>

Rather than…

<iframe src="https://embedtest.pory.app" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="600px" allowfullscreen></iframe>

Or is the widget actually an Iframe in a fancy costume?

[NigelG]

@matteo

The course is focused on how to communicate between the bubble app and the Chrome extension wrapper which actually has access to the information you need.

This is massive. I have created Chrome Extensions using WebdGap… and it works, but it can’t read anything about where it is in terms or URL/Page data etc

[matteo]

You’ll use an iFrame to load the Bubble app!
Then the course is focused on how to communicate between the bubble app and the JS file (which actually has access to the DOM) where the iframe is defined (and added to the page)
M

[NigelG]

@matteo

You’ll use an iFrame to load the Bubble app!

Do you know how to do the javascript widget?

[matteo]

If I correctly understood the question, YES. That’s what I do with Heyhi, join the 71 Lines private Slack Group so we can continue the conversation or schedule a quick call

[matteo]

Hey bubblers,
My course on How to build Chrome extensions and website widgets with Bubble is now available!

Here a couple of reviews I received from happy customers:

• Chirs says: " I love this course — Backend Workflows, Workflow API, CORS, would take me ages to figure out this stuff!"
  

  

• Pablo says: " In 3 hours I learnt how to create a website widget from scratch… handling all the complicated stuff you need help with! "
  

  

And these are the projects that I cover if you buy the Bundle:

• Chrome Extension that lets you save Twitter threads and read them later (after authentication). It also makes you interact with the current web page’s DOM (change page background, change/add/remove HTML divs)

• Website widget to install on your website that let your website’s visitors book a call with you (picking a date from a calendar and leaving their emails);

Basically all the things that I needed to learn to build Heyhi

PS On the website it’s available a limited discount package for early adopters

71lines.com

[nathansessions1]

Just went through the course and it’s a great start! Thank you @matteo so much for making this as there seems to not be much information online.

For my needs, I need to be able to put data from the website and set it as a state so the Chrome extensions can show it. The user would then edit the input fields and click a button that would save the current values to the DB.

Can you point me in the right direction as I can’t figure out how to get data from a website and set it as a state?

Thanks!

[matteo]

Hi @nathansessions1 ,
in the Chrome Extension “popup.js” file, add one of the following lines to “read” the element you want (change the “id” of the elements with what you’re interested in):

// return all the "h1" in the page
const headers1 = document.getElemetsByTagName("h1");

// return all the "item" class objects
const items = document.getElemetsByClassName("item");

// return the first element with id "elem_id"
const items = document.getElemetsById("elem_id");

// it returns the first h2
const headers = document.querySelector("h2");

// it returns all the h2 elements
const headers = document.querySelectorAll("h2");

Then, use the method explained in the course to communicate between the Chrome Extension and Bubble, to pass these data to the Bubble app.

From there, you can save them in your Bubble DB.

Thanks,
M

[robhblake]

Hey @matteo

You have a course for building a chrome extension, and a course for building website “widgets”. The descriptions sound similar. How are these 2 courses different? Do they both cover the same techniques?

Cheers
Rob

[matteo]

Hey @robhblake! Yup they are different:

• The first focuses on how to embed a bubble app into a Chrome extension
• The second focuses on how to avoid CORS policies and install a website widget + bubble on any website

The only thing that they have in common is the way to communicate between the Bubble app (loaded withing an iframe) and the Chrome extension / website where the iFrame is loaded.

PS Just changed domain, now you can find the courses here

Superbuild — Launch your online business. No code required.

[chad]

Hey I want to make my chrome extension a sidebar on the right hand side of the browser, rather than a popup.

Ideally it would be part of the page but it wouldn’t be the end of the world if it was like a floating group that went over the page

I’ve spent about 2 hours trying to figure it out myself. (Also bought your course and it was soooo easy to implement)

Any chance you could point me in the right direction or even better make me some super easy directions

[matteo]

Hey @chad , here is an example with code How To Create a Side Navigation Menu I would definitely follow this.

Try to add this in your file background.js
(Change the code with your iframe.src!)

window.onload = load_iframe();
function load_iframe()
{
    var iframe = document.createElement('iframe');
    iframe.id = "71Lines-iFrame";
    iframe.src = "http://71lineschromeextensionmatteo.bubbleapps.io/";
    iframe.frameBorder= 0; 
    iframe.scrolling= "no";
    iframe.style.cssText = 'width:300px;height:600px;';
    document.body.appendChild(iframe);
}

[chad]

Sorry about the delay in reply. Thanks for the code above, but I still am getting the plug-in display as a popup…
Any ideas.

[harry.roy]

Howdy @matteo! I went to the 71lines link for the guide, but the site seems to be down. Is there another place I can get it, or can you send it to me? Thanks!

[HappyBuilder]

It does not work for me either. Interested.

[matteo]

Hey, @harry.roy @HappyBuilder
Here is the new link to the new website: https://superbuild.io
And this is the course Superbuild — How to build Chrome extensions with Bubble

Matteo

[guy.blueoceans]

hey @matteo just checked out this whole thread & the superbuild course link. fascinating stuff! I’m very interested in building a website widget (at the moment I’m not interested building a chrome extension). Does the course cover how to use bubble to achieve a website widget? It seems focused solely on chrome extensions. If not would appreciate any tips/resources you might recommend.

FYI loved how your site heyhi worked; looking for something similar to that (also example of buymeacoffee etc).

[guy.blueoceans]

You can disregard that question! I dug deeper on your superbuild site & found a dedicated course to widgets exclusively Superbuild — How to build Website widgets with Bubble

Exactly what I’m interested in. I’ll very likely become a new customer soon.

[matteo]

Awesome

[guy.blueoceans]

Any widget class graduates here who may have a quick thought about what I’m doing wrong? @NigelG @cmarchan @stefan1 @cowontherun @eli @TipLister ?? Unfortunately Matteo is away the next 2 weeks & is unable to help me directly. I really want to knock out this feature much sooner. I’m stuck about 60% of through class. I made a 5m loom detailing where I’m currently at. Lemme know if I can clarify anything for anyone who has a few mins. I’ve checked things so many times but still not working properly. Just looking for some quick thought on what anyone sees in my loom video if they see anything wrong/likely to be wrong on my end. Thank you in advance