Develop Chrome Extension using Angular 7 | Part – 1

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.

chrome

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

Written by 

Rudar Daman Singla is the Trainee Software Consultant at Knoldus Software LLP. He has done B.Tech. from Jaypee University of Information technology, Waknaghat(Solan). He has good knowledge of languages C, C++, Java, Scala, HTML, CSS, PHP, Node and Angular. He is also interested in VFX. As a fresher, he always tries to explore the different type of software and tools.

2 thoughts on “Develop Chrome Extension using Angular 7 | Part – 1

  1. You cannot use this in a production scenario. Firstly, you need to ng serve / npm start your application (that depends on the local server).
    An application in the Google Chrome store has to be self-sufficient. If you include Angular, you better build a spectacular application that includes Spring wherever the app is running. But this introduces a lot of trouble as you have to manage cross origin requests.
    So, the conclusion will be: Never use Angular when building a feature-ready Google Chrome extension IF you don’t rely on an external server that is hosting your application.

    1. Hi Jack! 😀

      It is true that we need `ng serve` for development and it helps a lot once it recompiles the files on every save and it keeps the browser on the latest version of the app with auto-reload thing, but… for production we need to pre-compile the code (aka build) and convert all TypeScript files into static Javascript files, you can do it using `ng build`, the end result will be a bunch of HTML/JS/CSS files in a folder called `dist`, nothing different from what we have on any static website (no server-side processing like we do in PHP, asp, ruby on rails, …).

      I have a single page application stored on S3 (static), behind a CloudFront for CDN, cache and rendering exceptions pages (render index.html whenever a 404 or a 403 happens) to make the SPA work

      for more info please take a look on https://angular.io/cli/build

Comments are closed.

Knoldus Pune Careers - Hiring Freshers

Get a head start on your career at Knoldus. Join us!

%d bloggers like this: