How To Build a Chrome Extension With Sentiment Analysis
Send cat when sad chrome extension
A while ago, I saw someone who made a project that sends you cat pictures when you’re sad. And I thought, wow, this is exactly what I need in life.
The Inspiration
The original project utilizes facial recognition to determine if you’re sad or happy. And if you’re sad while using your laptop, it will send you a phone notification with a cute cat’s image.
If we use a library called ML5js, we can easily integrate facial recognition into a chrome extension application.
However, from my experience of building Chrome extensions with facial recognition, the application will eat up most of the CPU on your computer.
Plus, the user will have to keep their webcams on the whole time for it to work. And nobody wants that.
The Plan
Instead of using facial recognition, we will use sentiment analysis on the text that the user types.
Imagine Grammarly for your mood.
Step 1 . Find a Foundation To Start With
Of course, you can go to the “Getting Started” section of the documentation for the Chrome extension.
In fact, if this is your first Chrome extension, here’s another article that explains the process in detail: https://medium.com/better-programming/how-to-build-your-first-chrome-extension-8abdee9a4365
But if you’re already familiar with the pieces that make a Chrome extension, this repository is a great boilerplate to start with: https://github.com/chibat/chrome-extension-typescript-starter
Step 2. Listen to the User’s Input
I am not talking about being a good listener to what the user has to say.
But in order to do sentiment analysis, we need to capture the text that our Chrome extension user types.
Whether they are typing an email or doing some search on Google, it will give us hints about how they feel.
Where do we write that code?
In the content script, we will want to capture the element that the user is currently focused on.
So you might ask, what about the other elements like input, textarea, etc.?
Assuming that your user is a human, usually, a user can only type at one place at a time. And before they go to another input, they will click the next input, which then will change the focus on the page.
In the browser’s JavaScript, the document object already has a property called, activeElement , that does exactly that. Getting the element that the page is focused on.
When the content script initializes, we will trigger a function that gets the active element and also listen to the focus change on the page.
The callback function will always return the latest element that the page is focused on.
You might notice that we have a function to check the types of elements. The obvious elements that could be editable are <textaread/> and <input/>.
The less obvious one is the element with the contenteditable attribute, which turns a regular <div/> into an area for editing. This is what’s happening when you type an email in your Gmail or write an article on Medium.
With the active element, you will be able to listen to the input. Here’s the code:
You might notice that we have setTimeout to determine if we want to trigger the search function. This is because we don’t want to call our API too often and also gets more meaningful sentence rather than individual letters.
Step 3. Sending Data to a Server
Then it brings us to the search function. This function should send the user’s text to our API to know if the text is “positive,” “neutral,” or “negative.”
An alternative:
If you don’t want to build your own sentiment analysis API, you can use existing services. The downside is that you will have to pay for the service but definitely will save you time.
Step 4. Set Up Your API
You can use python to set up your server, but since I’m more familiar with JavaScript. We will use Node.js.
In our endpoint, we will parse the request body to get the following:
For the part that actually does the sentiment analysis, we will use Tensorflow.js to predict the result.
In our setupSentimentModel function, we will load up the model.
Load the model and the metadata. You can train your own sentiment analysis model, but you can also find the available models on the internet.
Once the model and metadata are loaded, we can use the getSentimentScore function to process the text.
We will convert our text into a sequence of indices because tensor2d expects an array of numbers. Here’s how:
Step 5. Show Cat Pics
In the original project, the author chose to send the user a notification on the phone.
But since we’re already in the Chrome browser, we can just open a new tab and show the cat pic.
For the cat pics, there’s already an API for that.
In our search function, you might have noticed the notifyUser function. That’s where we will get cat pics and show them to users.
getRandomCat only makes an API request to thecatapi.com to get a random cute cat pic. Then we will trigger an event on the background script to open a tab with the cat image.
In the background, all we need to do is to listen to that event and create the tab with the cat image URL.
References
Chrome extension code: https://github.com/davidyu37/therapypet-chrome-extension
Sentiment analysis server code: https://github.com/davidyu37/sentimentserver
Therapy Pet on the Chrome store:
Thanks for reading! Stay tuned for more.
