Develop Chrome Extension using Angular 7 | Part - 1 - Knoldus Blogs

Develop Chrome Extension using Angular 7

Reading Time: 3 minutes

Extensions are the small software programs that are used to customize the experience of browsing. They enable the user to customize the browser’s functionality and behavior to individual needs or requirements. An extension is basically there to fulfill a single purpose that is narrow defines and easy to understand.

Chrome extensions are in demand because they add features to Chrome browser to do functionalities/things easier without opening the whole website. There are a lot of Chrome extensions available in Chrome Store. If you want to add an extension in your chrome browser, just visit Chrome Store and add it to the browser. Chrome extensions are just javascript applications built on web technologies such as HTML, Javascript and CSS.

In this blog, we are creating a basic Chrome extension using the Angular framework. Prerequisites for creating extension are:

1. Node Package Manager (NPM) is required for any angular project to run and build.

2. Angular CLI project setup is required to set up project automatically instead of manual setup.

3. Chrome Browser is used to make our extension run.

Project Setup:

Chrome extensions are very easy to develop as they are just small angular applications. So, the first step is to set up the angular application using following command:

ng new <project-name>

This command creates everything you needed for an angular project. Now change the directory to project folder

cd <project-name>

You can start the development server using

ng serve

Your application started running at default URL:

localhost:4200

Now you can start developing all the required features of your chrome extension inside angular application.

Deployment: Google chrome requires three things while we deploy chrome extension.

1. Manifest File: Every extension requires a manifest, though most extensions will not do much with just the manifest. The basic structure for manifest.json is:

 {
     “name”: “Test Extension”,
     “description”: “First google chrome extension using Angular”,
     “version”: “1.0”,
     “manifest_version”: 2
 }

2. Extension Icon: This icon is displayed on your browser when the extension is added to the Chrome browser.

3. Template: The template for extension is the angular project that we created. Simply build the angular project using ng build, it will create a dist folder as the template of your extension.

To deploy the extension to your chrome browser, make sure you add the manifest.json file to dist folder.

Now open Extensions menu inside the settings of chrome browser and enable the developer mode at the top-right of the screen. After enabling, upload your dist folder by clicking Load unpacked option.

Finally, your required extension is added to the chrome browser successfully. Enjoy!

For any queries related to angular visit Angular Documentation

For any queries related to extension visit: Chrome Documentation