publication logo
post cover

Automatically Deploy Your Edge Extension to the Edge Store

Leverage the power of Github Actions to automatically deploy your Edge extension to the Microsoft Edge Add-Ons Store

author profile

Stefan Aleksic

Mar 30 2022

7 mins read

Deploying Edge extensions to the Edge Store used to be a tedious process that was hard to automate, but Microsoft just released a new API that makes things a lot easier. This article walks through how to leverage this new API to build an automated deployment workflow using GitHub Actions.

Prerequisites for Edge Extension Uploading

💡 Pro-tip: If you're planning on adding Github Actions for a repository you don't have write access to, you can still fork it and run your action on your fork!

What Deploying an Edge Extension Automatically Means

We're going to be doing the following:

  • Integrate the Edge Webstore Upload NPM package into our project
  • Create credentials on Microsoft Edge's Add-Ons Publish API
  • Save credentials on Github's secrets management system
  • Build a Github Action to build and deploy your Edge Extension automatically
🚨 Be on the lookout for an extra section on our Browser Plugin Publish tool that automatically does all of this manual work.


Edge Extension Deployment Project Setup

To leverage this new API, we will be using the Edge Webstore Upload package. This NPM package we've built at Plasmo makes it super easy to use the latest Microsoft Add-Ons API in Javascript.

Package Installation

npm install --save-dev @plasmo-corp/ewu

It's that simple :)

🚨 Make sure to use save-dev flag so that the edge-webstore-upload package isn't unnecessarily packaged with your production build

Acquiring Credentials

To use the @plasmo-corp/ewu edge-webstore-upload package, we'll need a few credentials to authenticate to Microsoft's servers.

We'll need to get a productId, clientId, clientSecret, and accessTokenUrl

Once you've signed into the Partner Center, go to the Publish API page. Here, you should see a section where you can create credentials:

Once you click on the Create API credentials button, you'll have most of the information you'll need

Microsoft

The only piece we're missing is the Product ID. This is because it's technically not considered a credential but rather metadata. Go to the Edge Overview page to get your extension's product ID,

Here, you'll see a list of your extensions:


Image

When you click on the one you want to use for this automated deployment workflow, you'll see a section that says "Product ID":


Product ID for a browser extension


Using the Edge Extension Webstore Upload NPM Package

Now that we have the four values we need, we can start coding up a script that we can use to upload our extension to the Edge Web Store.

💁 If you'd prefer a more high-level zero-config approach that supports multiple web stores, skip to the Browser Plugin Publish section


Packaging the Edge Extension

You can ignore this section if you already have an automated way to package your extension as a ZIP file. If not, read on!

We'll have to package the extension as a ZIP file.

Steps

  • Find the folder your build process generates (this is frequently dist/ or out/)
  • Add the following script to your package.json's scripts key: "build:zip": "cd dist/;zip -r ../extension.zip .; cd -"

Now we can do npm run build:zip, and our zip file will get created

⚠️ Make sure to run the build:zip command in your root folder containing dist/
⚠️ Make sure you change dist/ to the folder your build process uses for output.
⚠️ This uses Bash which might not be available to Windows users

Writing the Deploy Script for your Edge Extension

In your repository, create a new folder called scripts. This is where we'll put the deploy.ts script.

Contents of the deploy.ts script:

import { EdgeWebstoreClient } from "@plasmo-corp/ewu"

const client = new EdgeWebstoreClient({
  process.env.PRODUCT_ID,
  process.env.CLIENT_ID,
  process.env.CLIENT_SECRET,
  process.env.ACCESS_TOKEN_URL
})

await client.submit({
  filePath: "../extension.zip",
  notes: "Updating extension"
})


As we did with packaging, we'll add a section in our package.json to write an alias for this script: "deploy": "ts-node scripts/deploy.ts"


Tying in Github Actions to Automatically Deploy your Edge Extension

Secrets

A careful observer would see we're getting the product information from the process' environment variables.

We don't want to store these variables in the source code as it would mean anyone with access to our source code could see them and upload a malicious extension using our credentials.

We're going to store these using Github's secure secrets management solution. Once we save these secrets with Github, we can access them using the process' environment variables, as you can see from the deploy script!


Settings -> Secrets (on left panel) -> Actions -> Environment secrets

Add environment secrets for PRODUCT_ID, CLIENT_ID, CLIENT_SECRET, and ACCESS_TOKEN_URL


Workflow

Now we need to configure how the Github Actions Runner executes our code. At a high level, we want it to do the following:

  • Set up the environment (installing node, etc.)
  • Run our build:zip script to ZIP the Edge Extension
  • Run our deploy script
⚠️ Before continuing, make sure you've checked out to a new branch (NOT main). Github doesn't support testing actions on the main branch.

Create a file in this directory: .github/workflows/deploy.yml with the following content:

on: workflow_dispatch

name: Submit the Edge Extension to Edge Web Store

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Package the extension
        run: npm run build:zip
      - name: Deploy extension to Edge Store
        run: npm run deploy


Once you push your code, switch to your working branch and head over to the Actions tab in your repository.

Here, you should see your action, along with a prompt letting you know that you can run your workflow:

Prompt stating you can run your workflow

Run your workflow and witness the power of automation!

Let's review a bit, shall we?

Before:

  • Manually zip your file
  • Browse to the Microsoft Power Center
  • Click on Edge Extension
  • Find your extension
  • Click Upload
  • Dig through your file system for the ZIP
  • Upload your Edge extension

After

  • Go to your Github repository's Actions page
  • Click "Run workflow"

That's the power of automation!


Br‎owser Plugin Publish — A More Opinionated Approach to Deploying Browser Extensions

Suppose you'd like to support more stores and reduce complexity and maintenance. In that case, you can try out Browser Plugin Publish, a more high-level, opinionated package that automates most of the things we've discussed.

Set up BPP_KEYS secret

Add a secret in Github called BPP_KEYS with the credentials for whatever stores you want to support. Check out the schema to understand what BPP is expecting.

Here's an example BPP_KEYS for the Edge Web Store:

{
    "edge": {
        "productId": "<enter yours here>",
        "clientId": "<enter yours here>",
        "clientSecret": "<enter yours here>",
        "accessTokenUrl": "<enter yours here>",
        "notes": "<enter yours here>"
    }
}

You can add Chrome, Firefox, or Opera here with their respective keys, and BPP will upload to those stores as well, automatically.

Now, we can add a workflow YAML file to .github/workflows/deploy.yml:

on: workflow_dispatch

name: Submit to Web Stores

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Package the extension
        run: npm run build:zip
      - name: Browser Plugin Publish
          uses: plasmo-corp/bpp@v2
          with:
              artifact: ./extension.zip
              keys: ${{ secrets.BPP_KEYS }}


This will automatically deploy your zip to all the stores you configured in BPP_KEYS.



At Plasmo, we're an early-stage team excited about automation, open-source, and especially the browser extension ecosystem.

As you can see in this article on automating edge extension deployment, we're building tools to make browser extension development as easy as possible, from end to end. We're going to be building a lot more awesome stuff in this space. If this sounds interesting to you, subscribe to our mailing list!

Read more posts like this in your inbox

Subscribe to the newsletter

browser extensionedge extensiongithub action