Skip to content

Building a Microsoft Edge package

Nadeem Shabir edited this page Aug 24, 2020 · 3 revisions

Our understanding of how to distribute the extension is a work in progress and will, hopefully, be solved by the eventual inclusion of the extension into the Windows store.

Until then, it appears that the extension will need to be distributed as a Line-of-Business app or a sideloaded LOB app.

To do this, we're using ManifoldJS to do the heavy lifting.

You'll also need to install nvm to ensure we use the correct version of nodejs.

The steps to get a package are:

  1. Clone the repo and cd into it e.g. git clone https://github.com/talis/rl-bookmarking-extension.git && cd rl-bookmarking-extension
  2. nvm use
  3. npm install
  4. $(npm bin)/grunt dist-manifold
  5. cd dist, from here you can change the icons in in the images/ directory and any different text in the _locales files if you want to add your own branding. Also you can change js/allTenants.js to either your specific institution's information, or you can download https://talis-public.s3-eu-west-1.amazonaws.com/talis.com/customers.json and rename as allTenants.js, or just leave as is, if you're testing (you can add your institution manually in the options screen).
  6. $(npm bin)/manifoldjs -m manifest.json -p edgeextension -f edgeextension -l debug -d <Some directory outside of source root to build extension to> - it's important that this destination directory is outside of the source file tree! You'll get endless recursion and woe be unto you. See https://github.com/pwa-builder/ManifoldJS/issues/280
  7. cd <whatever directory was specified above>
  8. You'll have a directory with a name like MSGExtensionName - this is because the extension's name is translatable and this is what manifold does with it.
  9. Edit MSGExtensionName\edgeextension\manifest\appxmanifest.xml

At this point, it's worth pausing to note that from here the understanding the process, especially as it pertains specific institutions, is far less clear, so the following might change quite a bit as we gain clarity.

  1. In MSGExtensionName\edgeextension\manifest\appxmanifest.xml, change the Identity[Name] and Identity[Publisher] attributes, as well as the Properties\PublisherDisplayName value to the appropriate values as supplied by your enterprise Windows app store, or... possibly via ActiveDirectory values? See: https://github.com/pwa-builder/manifoldjs-edgeextension#validate-appxmanifestxml-and-assets
  2. Build the AppX package with $(npm bin)/manifoldjs -l debug -p edgeextension package .\MSGextensionName\edgeextension\manifest\
  3. If you are able to submit applications to your enterprise Windows store, that may be all you need to do. Otherwise, you'll need to sign the package.
  4. If you have a certificate you can sign the request with, use that, otherwise (for testing purposes) you'll need to use a self-signed certificate.
  5. You will then need to export the certificate for signing, this will need to be done as an administrator.
  6. If you're using a self-signed certificate, you'll need to add it (right mouse click on the cert and install it) as a trusted root certificate.
  7. Use SignTool (available in the Windows 10 SDK) to sign the package with the exported certificate, the command will look something like 'C:\Program Files (x86)\Windows Kits\10\App Certification Kit\signtool.exe' sign /fd SHA256 /a /f C:\{Path\to\exported\cert}.pfx /p {certificate password} C:\{Path\to\extension}\MSGextensionName\edgeextension\package\edgeExtension.appx
  8. If the package was successfully signed, you should then be able to install it either by double clicking on the edgeExtension.appx icon or selecting open from the right mouse context menu. That should bring up an installation wizard.
Clone this wiki locally