Prosenjeet Poul

Create Chrome Extension in Angular

By Prosenjeet Poul

Last updated cal_iconDecember 15, 2021

Hi Everyone, I hope you and your family are doing well. You must have realized that life would be very tough for day-to-day work life without popular chrome extensions like Adblocker, screenshot by lightshot, or VPN extension. Right? 

Being a developer, you must have thought about how they create such cool extensions? Nope don’t google it. I am here today to explain the same. I will help you to create a basic chrome extension. To begin with, you need the following tools and skills:

You need:

  • Chrome Browser
  • Knowledge of Angular 
  • Basic web knowledge (very obvious)
  • And Two hands to type the code (Very important)

Let’s Start

  • First, we will create an ‘Angular project’ or anything you like.

Go to the Angular.json file and set “aot” and “assets area” to look like this

“build”: {
“builder”: “@angular-devkit/build-angular:browser”,
“options”: {
“outputPath”: “dist/ngChromeExtension”,
“index”: “src/index.html”,
“main”: “src/main.ts”,

“polyfills”: “src/polyfills.ts”,
“tsConfig”: “tsconfig.app.json”,
“aot”: true, <= // Make sure this is set to true
“assets”: [
“src/assets/favicon.ico”,
“src/assets”,
“src/manifest.json” <= // Chrome manifest goes in root directory
],

  • Create a new manifest.json file in the root. Remember, we are following manifest v2.

“build”: {
“builder”: “@angular-devkit/build-angular:browser”,
“options”: {
“outputPath”: “dist/ngChromeExtension”,
“index”: “src/index.html”,
“main”: “src/main.ts”,

“polyfills”: “src/polyfills.ts”,
“tsConfig”: “tsconfig.app.json”,
“aot”: true, <= // Make sure this is set to true
“assets”: [
“src/assets/favicon.ico”,
“src/assets”,
“src/manifest.json” <= // Chrome manifest goes in root directory
],

  • Type in ng build
  • Type in chrome://extensions in Chrome
  • Click Load Unpacked
  • Find your compiled dist folder and point there. Chrome will not allow the files to be displayed. No problem, just let it use your dist folder.
  • Next, look for a small square green G icon next to Chrome’s address bar on the left. Click it.

 That’s pretty cool, in my opinion! It’s a way to get interested in learning Chrome Extension internals!

Explore documentation for API reference & more developer.chrome

I will be coming up with a more complex chrome extension with my next post. Stay tuned and subscribe to never miss an update!

Happy Coding!

Get In Touch

How Can We Help ?

We make your product happen. Our dynamic, robust and scalable solutions help you drive value at the greatest speed in the market

We specialize in full-stack software & web app development with a key focus on JavaScript, Kubernetes and Microservices
Your path to drive 360° value starts from here
Enhance your market & geographic reach by partnering with NodeXperts