Automatically Deploy Your Edge Extension to the Edge Store

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 discusses how to leverage this new API to build an automated deployment workflow using GitHub Actions.

Prerequisites for Edge Extension Uploading

• A Microsoft Partner Center account
• A Github account
• An Edge extension Github repository where you can run actions
• Node installed
• Experience working with Github actions: view the quick start to get up to speed quickly

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

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

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

It's that simple!

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

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:

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

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.

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.

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:

1import { EdgeWebstoreClient } from "@plasmo-corp/ewu"
2
3const client = new EdgeWebstoreClient({
4  process.env.PRODUCT_ID,
5  process.env.CLIENT_ID,
6  process.env.CLIENT_SECRET,
7  process.env.ACCESS_TOKEN_URL
8})
9
10await client.submit({
11  filePath: "../extension.zip",
12  notes: "Updating extension"
13})

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!

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

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

1on: workflow_dispatch
2
3name: Submit the Edge Extension to Edge Web Store
4
5jobs:
6  build:
7    runs-on: ubuntu-latest
8    steps:
9      - uses: actions/checkout@v2
10      - name: Package the extension
11        run: npm run build:zip
12      - name: Deploy extension to Edge Store
13        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:

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:

1{
2    "edge": {
3        "productId": "<enter yours here>",
4        "clientId": "<enter yours here>",
5        "clientSecret": "<enter yours here>",
6        "accessTokenUrl": "<enter yours here>",
7        "notes": "<enter yours here>"
8    }
9}

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:

1on: workflow_dispatch
2
3name: Submit to Web Stores
4
5jobs:
6  build:
7    runs-on: ubuntu-latest
8    steps:
9      - uses: actions/checkout@v2
10      - name: Package the extension
11        run: npm run build:zip
12      - name: Browser Plugin Publish
13          uses: plasmo-corp/bpp@v2
14          with:
15              artifact: ./extension.zip
16              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, check us out!

Back to Blog