Share via

Using ManifoldJS to create extension AppX packages

  • Article

Note

This documentation is for extensions for the legacy version of Microsoft Edge. For information on the new Microsoft Edge, see Microsoft Edge (Chromium) Extensions.

Important

The new Microsoft Edge program is now open to accept chromium-based extensions for the new Microsoft Edge (v77 or later). If you want to submit a new extension, visit Publish to Microsoft Edge (Chromium) Add-ons Store to learn about the submission process.

With this announcement, Microsoft is no longer accepting new extensions for the legacy version of Microsoft Edge. If you own an Extension for the legacy version, you should begin the process of porting your Extension to the new Microsoft Edge. The new Microsoft Edge is based on Chromium, so Extensions designed for the legacy version of Microsoft Edge do not work with the new version.

ManifoldJS is an open source Node.js tool that allows you to quickly and painlessly create a package that you can then use for submission to the Microsoft Store.

If you use native messaging in your extension, you should skip the following article and go to Native messaging in Microsoft Edge for packaging instruction.

Before getting started, you will still need to read up on the following articles.

Note

Submitting a Microsoft Edge extension to the Microsoft Store is currently a restricted capability. Once you have created, packaged and tested your extension, please submit a request on our extension submission form.

Installing Node.js and ManifoldJS

The first things you will need to do is install Node.js LTS.
Once you have Node, from a command line (preferably PowerShell), run the following command to install ManifoldJS.

npm install -g manifoldjs

To verify that you have correctly installed ManifoldJS, run manifoldjs from the command line. If ManifoldJS was not recognized, add %APPDATA%\npm to your PATH variables.

Packaging with ManifoldJS

To start the packaging process, you will need to open a command line and change directories to a folder that will be the destination for your packaged extension.

For example:

cd C:\manifoldJSTest

Note

The manifoldjs command outputs in the current directory and overwrites content.

Now that you are in your destination folder, run the following command.

manifoldjs -l debug -p edgeextension -f edgeextension -m path\to\manifest.json

The mainifoldjs command can be broken down into the following parts.

-l debug

Changes the log level to debug to get a full print out.

-p edgeextension

Sets the only platform to run the conversion on to edgeextension.

-f edgeextension

Tells the program that the format of the manifest is an edgeextension format and not to care if it fails validation.

-m \path\to\manifest.json

The path to the extension manifest that you want to convert.

After ManifoldJS has finished running, you will have a folder with the following contents.

┌ My Extension
└┬ edgeextension
 ├- generationInfo.json
 └┬ manifest
  ├- appxmanifest.xml
  ├┬ Assets
  |├- Square150x150Logo.png
  |├- Square44x44Logo.png
  |└- StoreLogo.png    
  └┬ Extension
   ├- manifest.json
   └- popup.html

The generationInfo.json file is a log produced by running ManifoldJS and will not be included in your extension package. Only the contents of the manifest folder will be packaged. Within the manifest folder, the Assets folder contains the images that will be used in the Windows and Microsoft Store UI, while the Extension folder has the contents of your extension within it.

Now that you have the correct files, you will need to edit the generated AppXManifest file within the manifest folder. If the extension’s manifest.json file has an internationalized string for the "name" field, once ManifoldJS is run, the most top layer folder’s name will have no underscores and include "MSG".

For example, a manifest.json file with the following "name" field.

"name" : "__MSG_appName__"

will have a manifest folder that lives in \<CURRENT DIRECTORY>\MSGappName\edgeextension\manifest.

In the AppXManifest file, you will need to:

  • Replace the required Identity fields and PublisherDisplayName field as outlined here. Note that if you are only packaging for testing purposes or for enterprise distribution, you can use placeholder values instead of registering for a Windows Dev Center account.
  • Replace the placeholder icons in the Assets folder with icons for your extension with the same sizes (150x150, 50x50, 44x44) and names. See the Design guide for information about where these icons are used.
  • If your extension is localized, follow the entire Localizing Microsoft Edge extensions guide. If it is not localized, only read the Localizing name and description in the Microsoft Store section.

Once your appxmanifest.xml file is sorted out, run the following command to create your package.

manifoldjs -l debug -p edgeextension package <EXTENSION NAME>\edgeextension\manifest\

Your package will now be in the package folder located within the edgeextension folder. For more information about how to sideload your new package, see testing section of Creating and testing extension packages.

Once your package has been tested, feel free to submit a request on our extension submission form in order to be considered for publication to the Microsoft Store.