Create your own Chrome Extension

Every job is the same, after a while we will find ourselves having things that keep repeating daily. Me too, my work is done a lot on Google Chrome and it will be helpful if we have a separate extension to automatically do those repetitive tasks, which is also a way to save time. Save time and more, it looks a lot more professional. You can add other functions to a website that you use it regularly, get data, store … and many other cool things you can do with an extension.

Structure of a Chrome Extension

Basically, a Chrome Extension will mainly be written in Javascript and HTML. You can organize arbitrary folders as appropriate and most convenient in the process of code. For me it will be like this: Below, we will go inside to learn the function of each file

Function of components

1. manifest.json

This is the config file for our extension. It contains basic information about the extension, which files will be run, inject …

• name : An attribute that identifies your extension name
• version : The current version, Chrome will use this to determine if your extension has new updates
• manifest_version : Determines the version of the manifest.json file itself
• description : Describe the extension in more detail
• icons : The icon of the extension will be displayed on the store. In this case, I put them in the images folder
• browser_action :
  • default_icon : The icon will be used to display on the browser
  • default_title : The title will be displayed when hovering on the icon of the extension
  • default_popup : This is the HTML file that will be displayed when you open the extension. We will talk more about this file later
• background :
  • page : This will be the page running in the background and usually will only contain a script tag to include the javascript file
  • persistent : A flag whose value is true or false . Determine how the background page will be run
• content_scripts :
  • matches : Specify the webpages you want to add your content to
  • js : A list of javascript files that will be injected into the above declared websites
  • css : Similar to the js attribute but a list of css files
  • run_at : Time of injecting the above content files into the site
• permissions : Declare access rights for the extension

2. Content script

These are the components injected into web pages that you declare in the matches attribute in the manifest.json file. These components are run in the same environment as the current website, so you can use javascript, css to manipulate DOM components. So you can change the look of the page, add buttons, add other functions you want.

3. Popup page

This is the page that will run and display when you open your extension. Its structure is similar to other HTML pages. In my case, that is the popup.html page. This page is run in a different environment than the content scripts. It can be roughly understood that they are run in a different browser window than the current browser window.

You will create the main interface for your extension here. The page will reload every time the extension is opened. You can use localStorage to store data like a database.

4. Background page

Like the popup.html page, background.html will run in the same environment. However, it has no interface, but merely contains a script tag for the purpose of including the background.js file.

By default this page will automatically be generated and automatically inject the background.js file, but in case you want to customize it this is the place for you to do that.

The background.js file is used for the same purpose as a server, it listens for events called from the popup or content page. Processing, storing data as well as returning data in response.

Communicate between components

Recently we have somewhat understood the function of the components in an extension. As we all know, the content.js file is run with the current web page that it was injected into. Meanwhile, popup.js and background.js are run in the same environment and they are completely separate from the current window the browser is displaying. Therefore, to have the connection between script files in different environments, Chrome uses messages to express that communication.

Let’s work together as an example to better understand this issue. Our extension will have the function of saving the songs we like on https://www.nhaccuatui.com/ so that we can listen to them everyday without having to search. Of course, practically every music site has a playlist function. Let’s get started.

content.js

In this section, we will handle inserting a button that, when clicked on it, takes the current page’s data and sends it to background.js for processing:

Notice that, in the matches attribute in manifest.json , we have a value of "*://nhaccuatui.com/bai-hat/*" . So the script above will only be run on the page where the song is being played.

background.js

Just now in content.js we have sent a message. So in order for background.js receive this message, we must register it to listen for incoming requests

When they receive the message, they store the data in the localstorage .

popup.js

As we saw we use popup.js in the popup.html page so here we will handle in popup.js to show the list of saved songs.

Thus, each time the extension is opened, we will see the list of songs that we have saved displayed here. You can add other features like automatically play the songs in the list, or download them all to your computer.

Load extension

• You go to google chrome, type in chrome://extensions/ address chrome://extensions/
• Click the Load unpacked button in the left corner of the screen
• Go to the folder containing our extension, that’s it

summary

We have just learned about the components of a chrome extension as well as the functions and communication between them. Hopefully, with those shares, you will somewhat understand the structure of an extension so you can create your own extension, serving your needs.

Here is an extension for your work. Its function is to save the ticket’s data, create a pull request template, create a message to send to the team on chatwork … You can refer here https://github.com/dongoclam/rg-plugin .