Chrome Extension

Learning Chrome Extension

I start learning the chrome extension, and ChatGPT suggests the following steps

Set up the development environment:

I will use a visual studio code.

Decide the functionality:

Ok, I want to display my name

Create a manifest file:

It is a JSON file that provides important information about the extension to the browser, such as its name, version, and permissions.

I have created a JSON file with all elements

    "manifest_version": 3,
    "name": "Show My Name",
    "description": "This chrome extension show my name",
    "version": "1.0",
    "action": {
        "default_popup": "popup.html",
        "default_icon": "icon.png"

Write a code:

This is the HTML code for the extension. the filename is a popup.html

<!-- popup.html -->

        /* Add your CSS styles here */

    <h1>Show My Name</h1>
    <script src="popup.js"></script>


and linking popup.js file (if required)

// popup.js
document.addEventListener("DOMContentLoaded", function() {
    // Add your JavaScript code here

Test the extension:

Here are the six steps to test the extension

Package the extension

Once you’re happy with your extension, you can package it into a .crx file that can be uploaded to the Chrome Web Store or installed manually.

Publish the extension

You can either publish your extension on the Chrome Web Store or share it with others through other means, such as distributing the .crx file directly.