Forum Academy Marketplace Showcase Pricing Features

Huddle - a comment section built-in to your browser (Chrome extension)

Hey All,

Just sharing a side-project I built with Bubble called Huddle.

Huddle is a Chrome extension that creates a comment section for the current page you’re browsing - which means Netflix shows, Spotify albums, Zillow and eBay listings, etc, now have a place where people can interact without leaving the tab.

Just click the Huddle button on your browser and the comment section for that page will pop-up in an overlay. The current version is a bare-bones concept with more features to come (should it gain traction).

It went live over the weekend (Google reviewed and published the extension in under 24 hours, which was a pleasant surprise).

Here’s a link if anyone is interested in checking it out: https://chrome.google.com/webstore/detail/huddle/nmhclnpadkncgkcefabkobjjajdknjco



5 Likes

Hey this is an awesome concept!

1 Like

Very cool! I wanted to do something like this years ago, but it was a more manual process where the URL was copied to the site and then comments could be made… Never happened because it just wasn’t user friendly and I had no idea how to better accomplish it. This is a great solution!

Are you able to make plugins for Firefox, Edge, Safari, etc?

Imagine now being able to make comments about a YouTube video whose comments are turned off. :wink:

1 Like

Thanks @MattN - the idea occured to me a while ago and lately I’ve noticed more and more posts on social media from people wishing that Netflix, Spotify, Zillow, etc, had a comment section.

Thanks @cklester - yeah, it sounds like we went through the same thought process! That was my initial solution, too.

I hope to extend this to Firefox, Safari, etc. Microsoft Edge currently allows users to install extensions from the Chrome Web Store, which is good, as does the Brave browser.

:joy: YouTube videos with comments disabled is definitely a use case!

1 Like

Is there a place to see all the comments that have been made? I left a comment on this page, but apparently it is very (too) URL specific (?). For example, on this page of the forum, I left a message, but it was left on the URL of one of the messages, not really on the “page” itself. You will probably need to figure out how to trim this URL:

https://forum.bubble.io/t/huddle-a-comment-section-built-in-to-your-browser-chrome-extension/176274/5

to this URL:

https://forum.bubble.io/t/huddle-a-comment-section-built-in-to-your-browser-chrome-extension/176274

Or something like that. OR… maybe show comments also with URLs that mostly match the current URL…

So, this URL: https://forum.bubble.io/t/huddle-a-comment-section-built-in-to-your-browser-chrome-extension/176274/5

mostly matches this URL:

https://forum.bubble.io/t/huddle-a-comment-section-built-in-to-your-browser-chrome-extension/176274

I went back and looked, and the message I left is on this URL: https://forum.bubble.io/t/huddle-a-comment-section-built-in-to-your-browser-chrome-extension/176274

But it doesn’t show up when I’m on this page: https://forum.bubble.io/t/huddle-a-comment-section-built-in-to-your-browser-chrome-extension/176274/5

1 Like

This is definitely an issue - but hopefully a rare one. In this case, the dynamic URL doesn’t use a query, so I have no way of knowing whether it’s a dynamic URL or a new static URL.

Typically, when dealing with a dynamic URL, Huddle will dismiss text that appears after a query in the URL, so all comments will be recognised as belonging to the same page.

I’ll have to give this some thought. Thanks for bringing it to my attention!

Super awesome. Would you be interested in discussing here more of what someone would need to creating a Chrome extension? In example, Bubble plugins (if any), custom code, necessary API calls, etc. Thank you so much.

1 Like

Thanks, @allan ! Absolutely, let me give you a quick rundown of how my Chrome extension is structured.

There are three main parts to the extension:

1. Manifest file
This is the file that defines various aspects of your extension such as its name, version, icon files, browser permissions, etc. In this case, it also instructs the extension to open a pop-up window (HTML file) when the Huddle button is clicked in Chrome. You can read about Manifest files here.

2. HTML file
This is the pop-up window launched by the extension. It basically just includes instructions to load a javascript file.

3. Javascript file
This is the javascript file referred to in the HTML. It instructs the browser to load an iframe in the pop-up window. The site loaded in this iframe is my Bubble page.

These three files are then packaged (along with my icons) in a zipped folder. This zipped folder is the extension.

In summation, this Chrome extension is essentially a pop-up window that loads my Bubble site. There are no specific plugins or API calls required to achieve this.

I’m hesitant to provide any custom code here because that will be determined by the nature of your extension. My advice is to find extensions that employ similar functions to those which you require - then just dive into their code and see how it works.

Hope that provides some insight!

2 Likes

Your breakdown was super helpful! Thank you!