How to Create Google Chrome Extension?

Google Chrome is currently the most popular web browser worldwide owing to its numerous features and security. Moreover, Chrome extensions allows users to add more or modify functionality in Chrome without changing the browsers native code. You can download extensions from the Chrome Web Store to perform nearly every action on Chrome. However, you can miss an extension that provides specific functionality that you need from the library of extensions in the Web Store. Fortunately, Chrome allows users to create their own extensions which they can distribute to other Chrome users. In this article, we will explain how to create Google Chrome extension and publish in Web Store.

Related: How to install and uninstall extensions on Google Chrome?

Prerequisites

Here are the basic requirements for creating a Chrome extension:

• Basic knowledge of web development technology – Chrome extension is like a web page so you need basic HTML, JavaScript and CSS skills to build an extension.
• Code Editor –  You will also need a simple code editor such as Notepad++ or Brackets.
• Chrome Web Store Developer Account – This is needed only if you want to distribute your extension to other Chrome users.

Elements of a Chrome Extension

Any Chrome browser extension must have the following basic components:

• The manifest file in JSON format “manifest.json”.
• Content Script.
• Pop-up Page.
• Events Page.

Create a Directory for Chrome Extension

The first step is to create a new directory (folder) where you will load save all the extension files. So you need to create a new folder on your PC and give it your preferred name, in this case, “My Sample Ext”.

Create and Save the Manifest File

The manifest file gives Chrome detailed information about the extension such as name, permissions and version number among other details.

• To create the file, open a code editor and create a new file named “manifest.json”.
• Now add the content of the manifest file as shown in the image and save the file in the directory you created above.

• You can add more details to the manifest file. For instance, we can register the pop-up page and icon for the extension.
• The best approach is to store other elements of the extensions such as the scripts, HTML and image files in different folders and use a relative URL to refer to them.
• Add your icon and pop-up page and save the changes.

• You may also add permissions on the manifest file.

How to Create a Pop-Up Page

A Pop-up page is an HTML file which will be loaded when the user clicks on the browser action. In our case, we have named the file, “sample.html”.

• To create a new file in the code editor and save the file in the extension directory with a .html file extension.

• Being a standard HTML file, you can add anything you want including buttons, texts and so on in the file.
• The HTML file includes a reference to the “sample.js” script, a background page that contains the logic for the Chrome extension.

Styling the Pop-up Page

Here we will use a .css file to style the extension pop-up page, you may specify several elements such as the font size and colour, pop up window dimensions and text alignment among others.

• To do so, create a new file and rename it with a .css file extension, “sample.css” for our case. Note that this is the file referenced .css file referenced in the HTML file above.
• Add your CSS code as shown in the image and save the changes.

Create a Content Script/ Background Page

This is a .js file which defines the logic behind the extension. It specifies the task(s)/ functionality that the extension will perform.

• Add the four file in the code editor and save the file with a .js extension “sample.js” in the directory.
• Add commands that will execute once the user clicks on the button or clicks the extension icon as shown.
• You also need to register the content script in the manifest.json file.

Note: You can add multiple tasks to accomplish a major task in the .js file.

Adding Your Extension to Chrome

Creating all the 4 files and saving them in a directory, you are now ready to load your extension in Chrome.

• Open the Chrome browser, type the URL, “chrome://extensions/” to open the extension management page.
• Toggle the switch on the top-right corner of the page to activate the “Developer Mode”.

• On the left side, click on the “Load Unpacked” button and browse through your files to select the folder where you save the extension files.
• A new extension will be added to the list. You will also notice your extension’s icon on the toolbar located to the right of the address bar.

• To test the extension, click the icon to open the pop-up page.

Wrapping Up

Chrome extensions help users to add more functionality to perform specific tasks in Chrome. While you can download a range of readymade Chrome Extensions, you can follow the above basic steps to create customized extensions for your website. Besides, you can share your extension with other Chrome users worldwide through the Chrome Web Store, but you will need to pay for a developer account to achieve this.