Creating a Google Chrome Extension for Loading Movie Ratings (PART-I)

SampleIMDb

Prerequisites:

• Basic Javascript Knowledge
• Chrome Browser

Problem Statement:

Sometimes we spend hours trying to search the IMDB ratings, durations and plots of different movies in a list by manually Googling it.
And that is a serious issue when

• It is already Sunday, 11 PM.
• You’ve got only 2 Golden hours before you crash in your bed.

You got to be absolutely sure that you are not wasting your time watching some lame movie.

So what do you do? Install IMDb Ratings on hover extension.

How does the Extension work?

1. On navigating to any webpage background script listens to click event on the extension.
2. Once clicked, background script sends a message to content script.
3. The content script then listens to hover event.
4. When the user rests a mouse for 250ms(an example) on any text then get the text in that location and make an API call.
5. On getting a successful response, form a template(HTML) from it and populate it on the UI.

Well, that's too much info. I know! Let's break it down and see it action. This will be a 2 parts series.

PART-I

Let us get started on the Implementation.

Step 1: Constructing manifest.json

Properties to look out for:

• content_scripts: Executes the scripts specified inside this property whenever the Browser URL matches URLs specified under “matches” [line 7].Since I need this to be available for all URLs I am using <all_urls> as its value.
• web_accessible_resources: To load any Content through the script.
• background: A script that runs in Browser background whenever the browser is opened.

Step 2: Constructing background.js to listen to Extension click.

Remember: background scripts don't have access to the DOM, so you have to ask content_scripts for help.

We do not want our content.js script to be active in all tabs where the user navigates to. So, we will wait for the user to indicate that he wants our extension to be active. We do that by listening to click event in background.js. Whenever the user clicks on the Extension we send a message to content script saying that the user has clicked it.

Click listener here takes a callback(buttonClicked) with an argument(tab) which gives current tab’s properties. We send back message to content.js through sendMessage API [line 8] and pass tab’s id and message. Message has type which helps to identify the type of message.

Remember: content.js don't have access to browser clicks or tab clicks but the DOM.

Step 3: Listen to the user action (HOVER) through content.js

Add a listener in content.js for the message from background.js

We get a message from background.js when the user clicks on the Extension. Find the type that you got from the message. If the type is ‘clickResponse’ then we start listening to hover event in the DOM through ‘listentoMouseover’.

You can console.log() it to see if you can get that message.

Enjoyed so far??? You can clap :P

If you are successful please proceed to Part II here.