I learned about the concept of the Edge Extension in the previous post.
Concept of the Edge extension
Now, Let’s develop the simplest Edge Extension for beginner with me!
I follow the instruction below. There is no JavaScript file in this extension.
Tutorial part 1: Display an image in a pop-up
Step 0. Setup the development environment first
First of all, I have to create a manifest JSON file that contains basic information about the extension.
- Install Visual Studio Code to create the JSON file.
Go to the link to download and install Visual Studio Code
Visual Studio Code - Open the Visual Studio Code and then add an extension for “Json” file.
Click on the setting icon and select the “Extensions”. Search “Json” to install the Json extension.

Step 1. Create a manifest.json file
- Open new text file in the Visual Studio Code.
- Type the Json code like below.
- Save the file as “manifest.json”.
{
"name": "Image Pop up",
"version": "0.0.0.1",
"manifest_version": 3,
"description": "Displays an image in a pop-up."
}
What is a JSON file?
JSON (JavaScript Object Notation) is a lightweight and efficient format for storing and exchanging data. It is easy for humans to read and write and straightforward for computers to parse. A JSON file is a text file that stores data in this format, typically with the extension .json.
Key Features of JSON:
Language-agnostic and widely supported across most programming languages.
Data is described in key-value pairs (e.g., "name": "John").
Supports hierarchical structure, allowing nested objects.
Require Keys by the Extensions Platform
The required keys are defined in the specifications of Manifest V3. See the link below.
Ok, we created the manifest.json file which is the most important file for the Edge extension! In next post, I will introduce how to add icons to launch the extension and how to open the default pop-up window. See you soon!
Leave a comment