[PATCHED ] Forever Thankful on FB —Using React to bring the Thankful Reaction back to Facebook 🌸

EDIT: A few hours after the release of my extension on Product Hunt, Facebook has patched this from the server side. It was fun while it lasted. GG, FB.

Facebook brought back its limited edition ‘Thankful’ Reaction so people could show their thanks and appreciation during Mother’s Day this year. People were expressing they gratitude with bouquets of flowers left and right, and everything was a floral bliss.

But then came the fateful moment when Mark Zuckerberg took the gratitude from under our feet and left us broken. The flower is gone again and people are freaking TF out. — Shandukani Mulaudzi

The Internet Is Freaking Out Because The Facebook Flower Reaction Has Disappeared Again. Here's Why…_Uh oh. The Facebook flower reaction is gone and now we don't know how to show our gratitude.The flower made a return to…_www.huffingtonpost.co.za

Just because Mother’s Day is over doesn’t mean we can’t show our gratitude to others. Every day is a day for thanks. I decided I wanted to restore humanity and bring back the Thankful Reaction.

The only possible way to bring back the Reaction that was so suddenly stolen from us is by harnessing the power of browser extensions. With my experience in React and building Google Chrome extensions (e.g. my Chrome IG Story extension with 370k+ users) I was able to reverse engineer the Facebook Reactions React components (FB is powered by its own React framework) and bring the withered flower back.

How did I do it? Well, I must give a shout-out to Alexandre Kirszenberg for his excellent blog post that details how to inspect and hook into React components. He ended up getting a Cease & Desist letter from Facebook though, so hopefully my fate isn’t similar. I just want to spread thanks y’all.

I started by inspecting the Reactions menu popup that appears when you hover your mouse over the Like button.

Inspecting the Facebook Reactions menu with React Developer Tools

As you can see from the screenshot above, on the right side, ‘UFIReactionsMenuImpl.react’ is one of the main components that handles the Reactions-interactions. If you look closely, you can see that one of the props is an array called supportedReactions. Bingo. From here I figured out that the numbers map to the Reaction’s type ID. 1 is ‘Like’, 2 is ‘Love’, etc. The last ID is 8, but what happens if it’s changed to something else?

Modifying the props of the component allows us to dynamically change its behavior with little effort

After incrementing the number, I finally got what I was looking for when I reached 11. The beauty of editing the props in React Dev Tools is that once you update it, it propagates to the state and everything works as expected. It’s not like you’re just editing some HTML in the DOM and then have to change some JS logic. By simply changing the last index’s ID from 8 to 11, the Angry Reaction turned into a Thankful Reaction, and when you click it, it actually submits it to the server and sticks. Facebook’s server isn’t verifying that the Reaction type ID you are sending is no longer available, so you’re free to thank and be thanked.

If you’re curious to what Facebook is up to, like I was, I experimented with some other IDs. There are a few other hidden Reactions that you can uncover with this technique, however Facebook is actually verifying these requests and blocks the request if you try to submit it.

Through my experimentation, I found 5 hidden Facebook Reactions: Yay, Confused, Selfie, Fire, and… Airplane? The only ones that had an icon were Fire and Airplane.

Hidden ‘Selfie’ Reaction with a missing icon

Hidden ‘Like’ Reaction with a Fire icon

Hidden ‘Like’ Reaction with an Airplane icon

Now, I knew I could post Thankful Reactions myself by manually editing the React component, but would I be able to build a product that others could use to do the same? 🤔

Using the techniques described in the blog post referenced earlier, I started to work on a Chrome extension that could enable Thankful Reactions for the masses.

Now, it actually took a while to reverse engineer and trace the component tree to find exactly where I could hook into, intercept, and modify the supportedReactions array programmatically, but eventually I found that everything I needed lived in 2 components called ‘UFICentralUpdates’ and ‘UFIFeedbackTargets’.

Using the ‘requireLazy’ module exposed on the window object on Facebook, I could require those two components and use their methods.

The sight of a callback being registered is surely a sign of an easy in to hook and mutate data

Inside UFIFeedbackTargets I saw that it was subscribing to an event called ‘update-feedback’ which is called once the server responds with an object that so happens to contain the supportedReactions array. If I hook into this subscription, I can know exactly when I get the supportedReactions array and I could mutate it by appending our Thankful Reaction ID. The only question now was, after mutating it, how do I get it to propagate and actually reflect in the React app?

Once you’ve hooked into a callback, it’s time to broadcast your changes.

Inside UFICentralUpdates I saw that the same event I just subscribed to, ‘update-feedback’ was being emitted by an ‘inform’ method. This is the final step. From the callback I subscribed to, I can retrieve the supportedReactions array, append ‘11’ to it, and broadcast the new object with the modified array. Now, since the code is both subscribing to and emitting the same event, we need to prevent an infinite callback loop. My logic was to simply check the size of the supportedReactions array when we receive it. If its size is 6, which is the current number of default Reactions, we append our new Thankful Reaction and emit it. The callback will again receive the array, but this time its size is 7, so we don’t emit anything. Once that event is emitted, React operates as usual and accepts our new props and now renders our beautiful floral Thankful Reaction. 😀

Temporary Reactions can be fun but I really implore Facebook to offically bring back the Thankful Reaction. All things in life are temporary and it’s not until we lose the things that are important to us that we realize how much we truly appreciated them. It’s good to express our gratitude and let those we love know how much we care. Be Forever Thankful, on Facebook, and everywhere else. Thanks 🙏✌️

Install Forever Thankful on FB Extension

Are you ready to show your thanks on Facebook? You can install the Chrome extension from the Chrome Web Store:

Forever Thankful on FB_Chrome extension that brings back the thankful reaction because every day is a day for thanks._chrome.google.com

Open Source on GitHub

Curious how it really works? Feel free to check out the source code.

CaliAlec/Forever-Thankful-On-FB_Forever-Thankful-On-FB - Chrome extension that brings back the Thankful Reaction because every day is a day for thanks._github.com