How to Create manifest.json for Edge Extensions

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

  1. Open new text file in the Visual Studio Code.
  2. Type the Json code like below.
  3. 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.

Manifest File Format V3

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!


Comments

2 responses to “How to Create manifest.json for Edge Extensions”

  1. […] part 1: Display an image in a pop-upPrevious post: How to Create manifest.json for Edge ExtensionsIn this post, I will introduce how to create and install the Edge […]

    Like

  2. […] To expose the images as resources, add item below in the manifest.json.Please see the link below that includes the manifest.json,How to Create manifest.json for Edge Extensions […]

    Like

Leave a reply to How to Create and Install Extension to Edge – Mid-Level Engineer's Journey Cancel reply