Create Chrome Extension Using Angular

Don’t we all use Chrome extensions? We regularly use them on our browsers, such as Ghostery, Grammarly, Wappalyzer, Dark Reader, etc.

For your Chrome browser, they bring more functions. On your desktop browser, you can tweak and customize it.

We only want to create an extension in this post, therefore all we do is add a straightforward text box to the extension.

Step 1: Setup your project.

Make certain that you have npm set up before starting an angular project. If angular/cli isn’t already installed, you can start the installation process now.

npm install -g @angular/cli

To start working on our project, we must set up a workspace after installing angular/cli. Activate this command.

ng new test-extension

Setting up will take a little while. Run these instructions after creating a new workspace.

cd test-extension

Our Angular project is already set up in our local. It can be executed with this command.

ng serve --open

Your project will be executed on port 4200 in your default browser. The URL will be http://localhost:4200.

Step 2: Add input box…

Add a simple text box in the app.component.html file.

<input type="text">

Step 3: Add manifest.json file in your src folder

Add the following code in the manifest.json file.

{    
    "name": "Textbox",
    "version": "2.0",
    "description": "simple text box",
    "manifest_version": 3,
    "action": {
        "default_icon": {
            "19": "assets/logo.png",
            "38": "assets/logo.png"
        },
        "default_popup": "index.html"
    }
}

Step 4: Build the project.

Build your project by running this command.

ng build --prod

With this command, our project will be built under the dist directory. test-extension/dist/test-extension is the directory’s hierarchy.

Step 5: Test your extension.

Use your Chrome browser to navigate to the following URL.

chrome://extensions

Enable the developer mode in chrome.

Now, click on the Update then Load unpacked button on that page.

When you click on the Load unpacked then it will say to select the folder. So, Browse to test-extension/dist/test-extension

You can see that our extension has been added after choosing the folder.