Last monday, Sir Efren asked us to try and create a simple Google Chrome extension. I was assigned to do the Stock Quote Extension. I will show you how I built my own Extension.

This is the project directory of my extension:

First:Created my manifest.json file.

Your manifest file contains the details about your extension.

• Manifest Version - declares what version your manifest should be. It’s currently should be set to 2 because 1 is already deprecated and the support for it is already phased out.

• Name - this will be the name of your extension. This is what will the users see when they download or use when they search your extension.

• Description - description for your extension. This is to explain to the users what your extension do.

• Permissions - usually used to connect APIs to your extension. It is to permit the connection of your extension to the external API.

• Browser Action - this is where you put what behavior will your extension do when clicked.

• Default icon - this will be the icon of your extension.

• Default popup - once the icon of your extension was clicked this will show up.

• Content Scripts - this is where you declare external scripts, external css, etc.

• Matches - this specifies the pages where your script will be injected.

• scripts - this is where you specify the external script files that will be used. So that the extensions will run your script once it was clicked. Inline scripts are not accepted by the extension. You still have to include your scripts in the head tag of your html file.

Second:Created my html file

Third:Created my js file

I created my own js file so that I can gather data from Yahoo’s Stocks API then it will be printed to the table on the extension’s popup.

My extension when installed

My extension is the one next to the PS Logo.

My extension when clicked

Everytime the user clicks my extension it will return updated results from Yahoo’s Stocks API.