How to Develop and Host a Google Chrome Extension?

* What is the Google Chrome extension?

Extensions are software programs, built on web technologies (such as HTML, CSS, and JavaScript) that enable users to customize the Chrome browsing experience.

* Create sample chrome extension

We’ll follow the below steps in order to develop the chrome extension.

1. Extensions start with their manifest. Create a file called manifest.json and include the following code.

{
 "name": "Time Zones",
 "description": "Build an Extension!",
 "version": "1.0",
 "manifest_version": 3,
    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": "logo.png"
    }
}

2. Extensions can have many forms of a user interface; this one will use a popup. Create and add a file named popup.html to the extension’s directory
3. For adding the functionality in the extension, you can use JS(java script) and call that JS code in your html page.
4. Keep all your files in a separate folder to test the extension
5. Open the Extension Management page by navigating to chrome://extensions.
6. Enable Developer Mode by clicking the toggle switch next to Developer mode.
7. Click the Load unpacked button and select the extension directory.

* Publish in the Chrome Web Store

 To publish your item to the Chrome Web Store, follow these steps:

1. Create your item’s zip file.
2. Create and setup a developer account.
3. Upload your item.
4. Add assets for your listing.
5. Submit your item for publishing.

You can see the below chrome extension which is created and published by us. It’ll show you other zones’ time.

Time Zones

References:

https://developer.chrome.com/docs/extensions/mv3/getstarted/

https://developer.chrome.com/docs/webstore/publish/