Hi everyone.

In this article, we'll talk about creating an Azure DevOps extension.

I didn't develop an Azure DevOps extension until my employer said we needed one. And it wasn't that hard. And now, I will try to share the experiences with you that I gained while doing this.

As you can see from the Wikipedia article, Azure DevOps is a very useful platform. But, like on every other platform, sometimes you need to customize some things on this platform for your specific needs.

https://en.wikipedia.org/wiki/Azure_DevOps_Server

First of all, I started everything with a basic Google search, and I found this link.

https://docs.microsoft.com/en-us/azure/devops/extend/get-started/node?view=azure-devops

If you follow these instructions, everything will be so easy.

At this point, I'm assuming you've created your first extension. Congratulations.

But maybe you were stuck at one of these steps or you required more customization. Anyway, let's look at some details together.

Tech Stack

That might surprise you because we'll only use HTML and JavaScript. And we will use Node.js for just the Azure SDK. If you really don't need it, I don't like using hype technologies or overengineering. Of course, your HTML can communicate with an API if you need to store something in a database or you need to take some actions, but this is not related to your extension at the beginning. In the real world, I posted and read some data via some API requests, and maybe we can talk about this later.

I'm sharing a Github Repository link with you. And we will dive into the codes that are in this repository together.

https://github.com/canurek/AzureDevOpsExtension

The most important file in this Repository is

vss-extension.json

Because we are doing all of our definitions on this file.

This is your extension manifest file.

For more info, you can visit this link.

https://docs.microsoft.com/en-us/azure/devops/extend/develop/manifest?view=azure-devops

The hardest part of creating extensions for me was positioning them because I couldn't find clear information on the web. I had to visit so many resources and investigate them. And I will share this info with you.

Firstly, I just created a hub group.

{
  "id": "HubGroupId",
  "type": "ms.vss-web.hub-group",
  "targets": [
    "ms.vss-web.project-hub-groups-collection"
  ],
  "properties": {
    "name": "Hub Group",
    "order": 100
  }
}

And, I added some items to this hub group.

{
  "id": "Item1",
  "type": "ms.vss-web.hub",
  "targets": [
    ".HubGroupId"
  ],
  "properties": {
    "order": 1,
    "name": "Item 1",
    "uri": "extension.html"
  }
},
{
  "id": "Item2",
  "type": "ms.vss-web.hub",
  "targets": [
    ".HubGroupId"
  ],
  "properties": {
    "order": 2,
    "name": "Item 2",
    "uri": "extension2.html"
  }
},

extension1.html => In the first extension, I just got the user name and put it in a div.

extension2.html => In the second extension, I got more information and put it them the page.

And finally, we came to the hardest part for me.

{
  "id": "WorkItemExtension",
  "type": "ms.vss-work-web.work-item-form-page",
  "targets": [
    "ms.vss-work-web.work-item-form"
  ],
  "properties": {
    "group": "contributed",
    "iconName": "Stopwatch",
    "name": "Work Item Extension",
    "uri": "extension3.html"
  }
}

I had a lot of trouble finding the valid values for type and targets parameters for positioning my extension on work items.

extension3.html => In the third extension, I have positioned my extension on work items and show an alert message that includes the user name and work item id.

If you want to create your extension from this template, you can download it from the repository. You will need to run npm install for node modules.

Also, you will need to change the publisher parameter value in the manifest (vss-extension.json) file.

Then for creating your extension file, you need to run this command on the terminal.

npx tfx-cli extension create

And now, if you are using Azure DevOps online, you can upload your extension using this link.

https://marketplace.visualstudio.com/manage/publishers/{YOURPUBLISHERNAME}

I set the public parameter value in the manifest file to false. So don't forget to share your extension with your organization after you upload it on the upload page.

Then you can access your extension on this link.

https://dev.azure.com/{YOURORGANIZATIONNAME}/_settings/extensions?tab=installed

If you are using Azure DevOps on-premise, you can upload your extension using this link.

https://{YOURONPREMISEAZUREDEVOPSURL}/_gallery/manage

When you make a change to your extension, you should also change your extension version in the manifest file. And you have to create your extension file again. Then you can upgrade your extension on the upload page.

https://github.com/canurek/AzureDevOpsExtension

I hope this article will be useful for some people.

See you next time.