28
35 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

      Looks great, nice work @matteomosca

      This is on the horizon for me, I'm just going live with my beta now and wanting to make sure the core product gets the job done for folks before adding things like this :) But I did send 71lines to someone who will be interested for sure!

  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

    @matteomosca very interested, i have a bubble app right moving into beta, i'd love to build a chrome extension for it—it's on my roadmap right now in fact.

    1. 1

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

  6. 2

    bump, wanna follow this!

    1. 1

      awesome, I'll keep you posted!

  7. 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

  8. 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.

  9. 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

  10. 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!!)

  11. 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

  12. 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!

Trending on Indie Hackers
How I went from 500€ to 5300€ MRR in one month as a UX coach and indie founder 30 comments 💯 USERS 💯 DAYS 13 comments How I made $10k teaching vim online in one month 9 comments Can you give me some feedback? 8 comments Launch went well. Traffic is falling. Now what? 7 comments Hide Airtable API key from front-end 5 comments