Slack. Giphy has made slack almost like a game. It's incredibly fun way to express over emojis. Way more expressive. Yet most of the internet is still stuck on plain text to exclamation marks. With my extension you can leave a Giphy comment on any site, even on urls of SPA build with react or angular.

What it does

You write a comment, it saves the comment by url you are on in database, and everybody who has this extensions and happens to be on same page gets notified of new reaction. And then they can respond with a Giphy as well.

How I built it

Firebase: to save gif urls and get notification using its builtin websocket functionality. Chrome Extension Api: that allows to inject some html/css/js into every page of user who has installed it. This way GIPHYREACT widget gets displayed.

Giphy Api: to get gifs from keywords.

Challenges I ran into

First I was building database in postgress, however, I quickly realized that to include websocket and build api for sql would take more than a day. So I knew of Firebase, so I decided to give it a try. Majority of my time went into fighting with firebase.

Problem #1: I couldn't include firebase sdk into extension due to some file encoding issue utf-8, for some reason file is being seen and of different encoding and chrome is refusing to accept it. So I had to find a way to load it through javascript from url while bypassing third party origin restrictions. Remember extension's code runs in sandbox, separate from actual webpage and it doesn't have access to any JS on page.

Problem #2: This is partially solved, but page own css affects widget/extension css, have to define every css property and not leave anything to be default as there could be inherited properties that can change defaults, but if defined very concisely they wont get over written.

Problem #3: React/Angular/etc SPA frameworks utilize html 5 history api which allows developer to change url of page without having to reload the page. Which is great, but it sucked for my app which has to show gifs based on what page user is at. And due to hindsight of century there is no event in html 5 that would let me know that url has changed via JS. So I had two ways, run a interval timer that checks url every second Or monkey patch JS api to trigger an event on pushState and replaceState. For performance reason I choose later.

Problem #4: not as much of a problem but concern, firebase rules have not been set.

Accomplishments that I'm proud of

A) Overcoming series of problems B) Being able to pick up Firebase and Giphy api in timely manner C) Being able to grab snacks at least once D) Actually come up with idea that fits time and scope. E) Built Idea into functioning thing

What I learned

I learned about Firebase, Giphy api, and Chrome Extension Api.

What's next for GIPHY REACT

  • Definitely address some of the problems listed above in better manner. Like make it secure.
  • Also limit the amout of comments per page, there is no need to have 3000 comments.
  • Allow people to thumbs up Gifs

Built With

Share this project: