6 steps to create a Chrome Extension using Angular

We all use chrome extension, don’t we ? We use them everyday in our browsers like Adblock, Dark reader, LastPass, FoxClocks…etc.

What do these chrome extension dooo…. ?
They add extra features to your chrome browser. You can customize & personalize on your desktop browser.

Let’s create a chrome extension

I’m a beginner in angular, but I’ve created a **Browser Notes chrome extension . **You can make use of this extension for free.

Let’s create a chrome extension, which can be used for write or pasting notes. With this extension, you can copy the contents for making notes & export it as html file.

In my next blog, I’ll be sharing how to publish our extension in chrome web store.

Now in this blog, let’s bother about creating an extension. Follow these steps :

Step 1 : Setup Angular Project in your local

Before creating an angular project, make sure you have npm installed already.
Then you can start installing angular/cli, If you don’t have in your local.

npm install -g @angular/cli

**Create a new workspace
**After installing angular/cli, we need to create a workspace for our project. Run this command.

ng new browser-notes-extension

I’m creating a new project by name **browser-notes-extension **in my local. It’s going to take few minutes to setup. After creation of new workspace, run these 2 commands.

cd browser-notes-extension
npm install --save bootstrap

First command is to go to your project directory & second one is for installing bootstrap.
Now Open angular.json file & bootstrap min css & js files in styles & scripts under build.

"architect": {
  "build": {
    [...], 
    "styles": [
      "src/styles.css", 
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ]
    },

Cool! We have our angular project setup in our local. We can run it with this command.

ng serve --open

It’s going to run your project in your default browser on port 4200. This’ll be the link http://localhost:4200

Step 2 : Write chrome extension code.

We’ll start with text editor

For our browser-notes-extension, we need text editor. So that we can type our notes or we can copy important notes from other sites.

Writing a text editor from scratch is Pain in the A (Please don’t ask what is A 😉). So instead of writing the text editor, I’m using already available ones **Medium-editor**.

Medium-editor is a simple inline editor with toolbar & this is not affiliated with medium.com. This editor serves our purpose & it is available as npm package too.

Install medium editor with this command

npm install medium-editor --save

Now in your angular project, medium-editor is installed. We need to integrate medium-editor with our script. So open your angular.json file & add this line in scripts array.

"scripts": [
              "node_modules/medium-editor/dist/js/medium-editor.min.js"
            ]

Step 3: Integrating text editor

Before directly adding text editor, we also need to import css in to our application. So open styles.scss/styles.css file and these lines in top.

@import '~medium-editor/dist/css/medium-editor.min.css';
@import '~medium-editor/dist/css/themes/default.min.css';

They are going to import medium-editor styles in to your application.
Now final touch, replace all the static html code from app.component.html file with this one

<div #medium-editor></div>

Yupp!!! We’ve integrated text editor successfully. But it won’t work 😅.

Step 4: To Make it work

To make our text editor work, we need to add few properties in our app.component.ts file.

import { Component, AfterViewInit, ViewChild, ElementRef } from '[@angular/core](http://twitter.com/angular/core)';

declare const MediumEditor: any;[@Component](http://twitter.com/Component)({
  selector: 'app-editor',
  templateUrl: './editor.component.html'
});

export class AppComponent implements AfterViewInit {
  editor: any;
  title = 'browser-notes-extension';
  [@ViewChild](http://twitter.com/ViewChild)('medium-editor', { static: true }) medium-editor:ElementRef;
  editorConfig = {
                 imageDragging: true,
                 toolbar: false,
                 anchorPreview: true,
                 autoLink: true,      
                 paste: {
                         forcePlainText: false,
                         cleanPastedHTML: false,
                         cleanAttrs: ['style', 'dir'],
                         cleanTags: ['label', 'meta']
                 },
                 buttonLabels: false,
                 keyboardCommands: false,
                 placeholder: {
                               hideOnClick: true
                              },
                 spellcheck: true,
                 updateOnEmptySelection: true
                }

  constructor() { }

  ngAfterViewInit(): void {
   // Initializing the editor object after view init.
   this.editor = new MediumEditor(this.medium-editor.nativeElement, this.editorConfig);
  }

}

Here in the above code, we’ve added our editorConfig. They can be modified according to your needs, you can find more options to modify your text editor from here yabwe/medium-editor .

Step 5: Converting our application to chrome extension

We have fully working text editor application. We just need to convert it to chrome extension. Here’s how we do it.

First we need to define the size of our chrome extension popup. Chrome extension popups can have a maximum height of 600px and maximum width of 800px. Changing the width or height using CSS on the html or body element will just cause scroll bars.

Open styles.css/styles.scss file and these lines

html { 
     position: relative; 
     min-height: 
} 
body { 
     margin: 0; 
     font-family: Roboto, “Helvetica Neue”, sans-serif; 
     width: 400px; 
     height:430px !important; 
     overflow-y: scroll; 
     overflow-x: scroll;
} 

/* Hide scrollbar for Chrome, Safari and Opera */
#medium-editor::-webkit-scrollbar { display: none;}

Next add manifest.json file in src folder. Here’s the directory structure
browser-notes-extension/src/manifest.json

This manifest.json file is going to define the chrome extension. Add these lines in manifest.json

{    
    "name": "Browser Notes",
    "version": "2.0",
    "description": "You can take notes, which includes text, lists, links & images. We can export our notes in the form of html..",
    "manifest_version": 2,
    "browser_action": {
        "default_icon": {
            "19": "assets/path-to-your-icon-image (it should be in png form)",
            "38": "assets/path-to-your-icon-image (it should be in png form)"
        },
        "default_popup": "index.html"
    }
}

Finally!! We did it.

Now let’s build our project by running this command.

ng build --prod

This command is going to build our project in dist directory. Directory structure : browser-notes-extension/dist/browser-notes-extension

Zip **browser-notes-extension **folder in dist directory. So that we can use it for testing.

Step 6 : Test it

To check if our application can be run as chrome extension or not, we first need to enable developers mode in our chrome browser. You can check it here.

Next in application’s terminal/cmd run this

Now in url bar type

chrome://extensions

It’s going to launch extensions page. Now you can see load unpacked option as shown in the below image & check the Developer mode in the top right too.

Now click on load unpacked button & select your zipped project from dist directory. If there are no errors in our application, it’ll be active directly. Otherwise, it’s going to throw up some error message & you can resolve it & rebuild & re-upload it.

Now you can check your extension in your extensions page (chrome://extensions)

Finally, you know how to pin your extension & use it. This is the end output

You can see the demo of working browser-notes extension here .

In my next article

1. I’ve done abit styling and code to “Export to html” functionality.
2. How to publish our chrome extension & make it public. Here’s the link

Conclusion

Building an extension doesn’t require much work. You just need a manifest.json, right css, images & proper functionality of your code.

If you want your application to manage events with background scripts, you can add background.js script file in your manifest.json as shown here & write your background.js’s scripts in it.

Use this link for managing events with background scripts for reference. Here’s the chrome extension documentation link.

Want to thank me ? Please show your love by buying me a coffee ☕ by hitting the below link 😃

https://www.buymeacoffee.com/vinaynvd
Thank You 🙏