AMET-SOLID: CE#1. First Chrome Extension

Tuesday 15 August 2023

CE#1. First Chrome Extension - Demo

Hey we know Extensions add functionality for any browser. We did not know how to do this simple thing.

Let us dive!

Only two files are need for creating extension

1. manifest.json ( required this configuartion file)

2. helloworld.html (any html file)

Steps:

First creat a directory CEDEMO

create manifest.json with the following contents:

{
    "name": "RMC Demo 1",
    "version": "1.0.0",
    "description": "Hello world!",
    "manifest_version": 3,
    "author": "Chandrasekaran RM",
    "action":{
        "default_popup": "helloworld.html",
        "default_title": "Display Something"
    }
}

Next, create helloworld.html with the follwoing contents for demo.

<!DOCTYPE html>
<html>
<head>
    <title>Demo 1</title>
    <meta charset="utf-8">
</head>
<style>
    body {
       width: 400px;
       height: 200px;
       background-color: aquamarine;
   }
</style>
<body>
    <h1> Hello Chrome extension World!!!</h1>
</body>
</html>