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 -->
<html>

<head>
    <style>
        /* Add your CSS styles here */
    </style>
</head>

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

</html>

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

Open Google Chrome and navigate to chrome://extensions.
Enable Developer Mode by clicking the toggle switch in the top right corner of the page.
Click the “Load Unpacked” button and select the folder that contains your extension’s files.
Your extension should now appear in the list of installed extensions and be active in your browser.
To test your extension, you can interact with it using the browser action button in the toolbar or by visiting the pages that it is designed to affect.
To debug your extension, you can use the Chrome DevTools to inspect the popup and background pages, view the console output, and set breakpoints in your JavaScript code.

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.