Browser Pets

• 

  the extension

• 

  options page

• 

  chatting

Inspiration

After being bored while scrolling through endless websites, we came up with the idea to create a browser extension that would make it entertaining to browse. After seeing the vscode-pets extension, we thought that having pets would make it fun, and adding a realtime chat would be even better.

What it does

Browser Pets is a Chrome extension that adds customizable pixel art pets and a realtime chat to your browser, in order to create an entertaining browsing experience. You are able to customize your avatar/pet by creating a custom pixel art, you can customize your username that's shown to all online users and you can chat with the other users. You'll never feel lonely or bored while using browser pets, as the cute avatars and chat will keep you entertained.

How we built it

The browser pets extension is built with Svelte, because it compiles down to plain javascript. We also used TailwindCSS for styling and socket.io for realtime functionality. The server is an express server hosted on Railway.

Challenges we ran into

Since I had never worked with socket.io before, I ran in to some challenges when trying to get the realtime chats and functionality working. I was able to resolve them after extensive googling and reading the docs. I also had some trouble testing the extension because I wasn't able to get hot reloading, which meant that I had to rebuild and reload the extension every time I made a change, which made development slow.

Accomplishments that we're proud of

I'm proud that I managed to create a browser extension using Svelte, since I don't have much experience with it. I also learned a lot about websockets, which I had never used before. I think it's pretty cool that this realtime chat can run entirely as a browser extension and that it can help entertain and connect people!

What we learned

I learned a lot about websockets since I had never used them before, and I also became more familiar with Svelte, which I only had limited experience with. I learned that time management is very important, and that a balance needs to be made between adding new features and finalizing the existing ones.

What's next for Browser Pets

We plan to add more interactions, such as moving the pets when the user clicks. The general interface of the pixel art could also be improved to support operations like undo/redo or dragging to paint.

Built With

• railway
• socket.io
• svelte