‘An extension must fulfill a single purpose that is narrowly defined and easy to understand. A single extension can include multiple components and a range of functionality, as long as everything contributes towards a common purpose.’ —- Developer Chrome

As the Chrome extension platform said, the purpose of Chrome extension is to set as an assist tool for Chrome users to help them have a smoother browsing experience. 

So, where is the Chrome extension located in our browser? It’s actually located on the right side of our browser tab next to our search bar in the picture below(background page).

On the browser side, our extension consists of three main parts. They are the content script, background page & UI page(popup page). The content script will take action with any changes on the browser window. The background page will be the ‘middleware’ between the content script and the popup page, it’s supervising the overall browser changes. When the data want to transfer back and forth, the background page will be there to help.

The Contents

Here I use my extension app as an example to demonstrate below. We can notice that besides those three corresponding files from the browser side,  we also find some extra files, they are manifest.json, popup.js & logo.png.

The logo file is that little icon on your background page. The popup.js is the file bound to your popup.html. The most important file for the Chrome extension is your manifest.json. It is the main pipeline of your entire extension. It works as a context to tell your Chrome browser where to find the appropriate file to work with. Here is a closer look at the manifest.json file below.

Data Transfer

Luckily, we got support from Chrome, they provide us with the easy API below to transfer data back and forth.

Data Storage

The data storage of the Chrome extension is another crucial part of development. We must declare the ‘storage’ in our manifest.json file first ( on line 12 above ). Then, we can use the storage API below in the correspondent place.