Build a "Hello World" Chrome Extension

Hey Coders,

Recently while browsing the internet a thought came to my mind that how a chrome extension is made. Rushed to a new tab and searched for "how chrome extension is made". Several videos got recommended to me, but I was not in the mood to watch a video. So I went to the documentation in "developer.chrome.com" for the chrome extension. As the title suggests it's just a basic chrome extension that says "Hello World".

So going through the documentation I came to know the main Ingredient for the Extension is the "manifest.json". So it basically contains the metadata of the extension. Let me show the example provided by Chrome:

//manifest.json
{
  "manifest_version": 3,
  "name": "Hello World Extension",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

In the above code, we can see the manifest_version, name, and other basic information about the extension. The main information is in the "action" key. We can see the "default_popup" set as "hello.html". Another thing is that the "manifest.json" file must be in the root directory. Now let us create the "hello.html" file. We will create it in the root directory itself.

<!-- hello.html -->
<html>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Now to test it, go to "chrome://extensions", toggle the "developer mode" in the top right corner and click on "load unpacked". Select the directory where the files are there you go you have the chrome extension loaded into your chrome. Now when you click on the "Hello World Extension", you would see a popup that says "Hello World".

Well, This is it! for this blog. Hope to write more in future.

Vishnu Menon

Vishnu Menon

Build a "Hello World" Chrome Extension