How to build Chrome Extension with AngularJS & Google’s Natural Language API (Test Blog)
Chrome extensions are like dragons of Game Of Thrones in web world. You won’t see them much, but when you do… Oh boy! They takes your breath away.
I was using many chrome extensions like Ads Block Plus, EverNote, Angular watchers, Motivate etc. from so long and being a web developer was always amazed by the power these small software packages possess.
So I tried to give it a spin myself and to my surprise I didn’t have to learn much to create something of my own.
Just learned some basic concepts of how chrome extension works and mixed it with my prior knowledge of basic HTML, CSS, Javascript and AngularJS. And what I got is this -> Text Sentiment Analysis chrome extension.
An amazing(silly! actually :D) chrome extension which can analyze sentiment of selected text on any web page using Google’s Natural Language(NL) API. See below screenshots to understand how it works.
Select some text on any web page
Click the extension button in browser bar
Fetch the code of the above extension from this Github repo and follow along.
For above code to work, you have to insert your project’s API_KEY in popup.js file. Don’t worry, we will discuss how to create your own project key later in this post.
If I am not wrong, You all might be screaming this by now…
Hey! We got that chrome extensions are fun and powerful but we still don’t know how to build chrome extension with AngularJS and NL API.
Please bear with me for few more minutes and I promise you won’t regret it.
So, let’s take it step by step(4 to be precise)…
1. What is a Chrome Extension?
Some basics are needed at this point. Chrome extensions are tiny web applications(consists of HTML, CSS and Javascript) which when added to chrome lives in your browser and uses some special chrome API’s to enhance your browsing experience or solves any particular use case.
The resources I mentioned at the end of this post, answers this question in a much better way.
2. How does it work?
This is a simple yet powerful question. Once understood properly will open doors for multiple opportunities.
Someone told me : “A picture is worth a thousand words”
So, here is my version for understanding how chrome extension works(these are just rough sketches)…
Overview Of Chrome Extension Entities
Key Points
- Main Entities of chrome Extensions are manifest.json, content.js, background.js and Popup.
- Each one of these entities :- content.js, background.js and popup have their own isolated scopes and dev tool windows for debugging.
- Only content.js have access to the DOM of the current web page directly.
- All these elements interact with each other by sending and listening to events provided by chrome API.
Refer to blogs and tutorials at the end of this post for further details.
Now lets see how our Text Sentiment Analysis extension works with respect to above mentioned components.
Text Sentiment Analysis Chrome Extension Overview
3. How to include AngularJS?
It is same as you include AngularJS in any other web project.
Download the minified version of the framework from here and link it from popup.html file as you would do it in index.html for any other AngularJS project(Refer code).
4. How to include Natural Language API?
It is as simple as using any other third party API in your web project.
(i) First create a Google Cloud Project to generate your own API key . Follow instructions given on this official page.
(ii) Next enable Natural Language API to use in your project from here.
(iii) Start making POST calls as follows from your custom javascript code(popup.js in our case).
$http({
url: 'https://language.googleapis.com/v1/documents:analyzeSentiment?key=YOUR_API_KEY',
method: "POST",
data: {
"encodingType": "UTF8",
"document": {
"type": "PLAIN_TEXT",
"content": "The text for analysis comes here."
}
}
})
Refer the official Google docs to understand how this API works and overall structure of the response.
We are using top level ‘score’ property as a parameter to display overall sentiment of the selected text. -ve value means negative sentiment, +ve for positive and 0 for neutral sentiment.
Hurray! You have learned how to create your own chrome extension and include an advanced Machine Learning API.
Check out Google’s official document page for more Machine Learning API’s.
Thank you for reading this far. I hope this new combined skill set of Chrome extension and Google’s machine learning API’s will open some new doors of creativity for you.
Please don’t forget to give some claps if you like this post. Happy Learning :)
Resources