Hey everyone, hope you're doing well!
Recently, I discovered a site called Watchparty, which allows you to watch videos in sync with your friends and family. It's a fantastic concept, but I encountered a few issues: there were no options for syncing subtitles, and the user interface felt a bit outdated (no offense intended). Nonetheless, the site works wonders and is definitely worth checking out.
While exploring similar sites, I came across Metastream, which has a modern interface and supports subtitles with third-party Chrome extensions. However, I faced challenges there too—some videos didn't work, and the platform hadn't been updated in six years. So, I decided to tackle these issues myself.
Introducing Sync Buddy
Sync Buddy is a Chrome extension designed to let you watch any video from any website in sync with others. It also features a chat functionality that can be toggled by pressing Shift + Enter.
It can support any website as long it has a video tag in it. it syncs in real time and the chat box is nonintrusive as well.
While this isn't a tutorial, I'd like to provide an overview of the components involved in developing my Chrome extension:
Components:
- Popup (Svelte): The main UI of the extension, accessible by clicking the extension icon in your browser.
- content.ts: Injected script that adds listeners and updates the DOM on websites.
- background.ts: Web worker managing logic and authentication.
- manifest.js: Configuration file for the extension.
That's all, Yeah it's pretty easy to make an extension.
I made this project over the weekend and learned a lot about creating browser extensions. It's important to note that this is a personal/pet project, so there may be some bugs.
Oh, I forgot to tell you, it's pretty simple to use as well. Install the extension, then open a website with a video, click on the icon, and enter a room name. Share the room name and ask your friends and family to join using the same name (they should be on the same website as well). Voila! You're done. Enjoy binge-watching!
You can learn how to install and get started using the extension from the GitHub repository's README.
You can find the code on GitHub under the MIT License.
Credits:
I would like to give credit to Watchparty and Metastream for inspiring this project and providing valuable insights into synchronized video watching.
Additionally, this project is based on svelte-chrome-extension-template by taishi55. Thank you for the foundation!
Thank you so much for checking it out! Feel free to ask any questions, share suggestions, or provide feedback. Your input is valuable!😁😁
Top comments (0)