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.
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.
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
You can start the development server using
Your application started running at default URL:
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”,
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