28
33 Comments

How to Build Chrome Extensions and Website Widgets in Bubble

I’m the founder of Heyhi.io, (and https://replayhero.io, https://pain.land) which I fully built in Bubble!

I’m thinking to write an e-book/guide called Complete Guide on How to Build Chrome Extensions and Website Widgets in Bubble

Basically I would explain (step-by-step) how I implemented Heyhi overcoming all the tech limitations that Bubble has when it comes to:

  • Loading a Bubble app in an iFrame embedded in a website with a script added in the HTML Header of the website;
  • Handling communication between an iFrame and a Bubble App;
  • Performing cross-origin REST Api calls from the Bubble app loaded within the iFrame;
  • Sending Javascript callbacks data to the Bubble app;
  • Managing cookies (cross-origin);
  • EXTRA access to a project with Reusable Components like: Payment module (with Stripe), Basic Admin Page, Basic responsive Landing Page;

Are you interested in this guide?
✅ IF YES: what would you love to see in the book?
❌ IF NO: what's the first tech challenge do you face while using Bubble?

[UPDATE] link to the course https://71lines.com

  1. 4

    @TequilaJack @Deweysi @harriskenny @adonic @FarouqAldori @Irodman @mertnesvat @ryanmargono @Red8lima @gtardini

    Hey :) here is the link to the course https://71lines.com.

    Not ready yet, but you can subscribe to get notified and join the slack group! (you’ll receive the invite link in the email once subscribed)

    1. 1

      Thank you Matteo, subscribed! Wish you a great 2021 and congrats for all the work you are doing

      1. 1

        Thanks @gtardini! I saw you're from Modena, I'm from Rimini/Turin. I've added you on LinkedIn, hoping we can get to know each other ! cheers

        1. 1

          Oh great, I also lived and studied in Turin for 5 years. Such an amazing city. Great for LinkedIn, we’ll get in touch for sure, always a pleasure! :) cheers!

    2. 1

      Thank you, I registered. I am quite excited to see the details. Happy New Year to you and your loved ones

  2. 3

    @TequilaJack @Deweysi @harriskenny @adonic @FarouqAldori @mertnesvat @ryanmargono @Red8lima @gtardini guys FYI the 71Lines.com is now available with a discount package for early adopters 📦

    These are the examples projects included in 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);

    1. 2

      Thanks Matteo, congrats for the huge milestone! I'll check it out as soon as I'm back to the (home) office, can't wait :)

      1. 1

        Thanks buddy, looking forward to your "CORS freak" feedback :)

    2. 1

      This comment was deleted a year ago.

  3. 3

    I am very interested in this, didn't think it was possible tbh.

    1. 1

      Great, I'll keep you posted!

  4. 2

    Yes yes yes, this would be great!

  5. 2

    bump, wanna follow this!

    1. 1

      awesome, I'll keep you posted!

  6. 2

    You mention the following:

    "iFrame embedded in a website with a script added in the HTML Header"
    "Handling communication between an iFrame and a Bubble App"
    "Performing cross-origin REST Api calls"
    "Sending Javascript callbacks"
    "Managing cookies (cross-origin)"

    You probably lost 99% of the no-code community.

    However, as a developer I'm definitely interested just to see if it would save me time.

    I've built chrome extensions and website widgets with code, within a single day.

    Just my 2 cents.

    1. 1

      Yes, that's a concern I have.
      To mitigate that risk I would:

      • Write really easy and specific steps on each chapter;
      • In the landing I wouldn't mention those tech aspects but what you as no-coder will achieve if you follow the guide;

      Thanks for the feedback though

  7. 2

    Sounds interesting. I would love to read that ebook. I hecked your links and you did a great job. Did you build all of them with Bubble or only Heyhi.io?

    Did you make a chrome extention of Heyhi that we can download on the chrome market?

    If yes how did you doi it with no-code?

    1. 1

      Yes, I built all of them with Bubble! And I'm gonna write a step-by-step e-book/guide on how I implemented Heyhi. Should be released by the end of January 2021

      1. 2

        Great. You did a pretty good job. I like HeyHi.io it looks great.

  8. 2

    Hi Matteo, I think it would be great to have a chrome extension guide there's very little tutorials out considering such a huge need nowadays it would be very helpful for me to read some examples and use cases for chrome extensions.

    1. 2

      Great to know it @mertnesvat! I can add a chrome extension project example in the book, what do you think about something like something "Pinterest Save Button" https://chrome.google.com/webstore/detail/pinterest-save-button/gpdjojdkbbmdfjfahjcgigfpmkopogic?hl=en which saves a site to your bubble database every time you press “pin to site”?

      1. 2

        I think that would be great example, I'm using Instaread which has a chrome extension to add ycombinator articles to it.

        https://chrome.google.com/webstore/detail/instaread/nppjjjkgkbfldodhfafopkccipkoicfh?hl=en

        1. 1

          Interesting! I'll take a look at Instaread as well

  9. 1

    Hey Metteo, I'm creating a chrome extension too but I opted to use a shadow-DOM instead of an iFrame because i need to make cross-origin requests on behalf on the website I'm on. Is this possible using an iFrame? Shadow-DOM is a pain.

    1. 1

      Yes, it's possible! I'll show how to do it in the course. Here is the link http://71lines.com, not ready yet but you can sign up to get notified (PS this is the first time I share the course publicly!!)

  10. 1

    Yes; but is it for complete novices? Can it be built for people who have chrome extension ideas and no tech builder experience?

    1. 1

      It's gonna be written for no-code developers who have the basic Bubble experience/skills

  11. 1

    Hi Matteo, great idea, I wondered several times how you had built HeyHi after seeing a reply of yours about it being built in no-code. What I would love to see in your guide is exactly what you described in the bullet points, as these are the points I was wondering about your implementation. In addition, I would like to hear about your general experience and the main limitations you encountered working in Bubble, as these are what keep me away from learning a no-code tool. Would you go down the no-code path again, if you had to start over?

    1. 2

      Thanks @gtardini, I love no-code!
      I started using Bubble to rapidly validate my ideas with scrappy MVPs.

      And when it came to building a stable solution for my customers I wanted to give Bubble a shot. And it worked!

      So I would definitely go down the no-code path again and again and again

      1. 2

        Ahhh, so I really have no excuse anymore, I must try it. Write the book, you have my preorder! (btw I am a CORS freak, so I am very very interested about the exact use case you describe)

        1. 2

          That's great, I'll keep you posted buddy!

  12. 2

    This comment was deleted a year ago.

    1. 1

      Hey @harriskenny, great! I'll keep you posted

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 49 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 28 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 15 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments