AzureDevOps Guide

Creating a Private Extension in Azure DevOps

by ·

To create an extension in Azure DevOps, these are the pre-requisites

  • Node.JS should be installed
  • TFX-CLI should be installed
  • Should be a owner of an Azure DevOps Organization

After installing Node.js, install tfx-cli

Step 1: Run the below code for initializing npm package manifest

npm init -y

Then the manifest will be created as shown

Step 2: Then install the Microsoft VSS Web Extension SDK by running the below command (VSS Web Extension SDK is essential for calling the API’s)



Step 3: Create an Extension manifest file with name “vss-extension.json” at the root of your extension directory with the below code

{
    "manifestVersion": 1,
    "id": "my-private-extension",
    "publisher": "publisherID",
    "version": "1.0.0",
    "name": "My Private Extension",
    "description": "A sample Visual Studio Services extension",
    "public": false,
    "categories": ["Azure Repos"],
    "targets": [
        {
            "id": "Microsoft.VisualStudio.Services"
        }
    ],
    "contributions": [
        {
            "id": "my-hub",
            "type": "ms.vss-web.hub",
            "targets": [
                "ms.vss-code-web.code-hub-group"
            ],
            "properties": {
                "name": "My Private Hub",
                "uri": "Private.html"
            }
        }
    ],
    "files": [
        {
            "path": "Private.html",
            "addressable": true
        },
        {
            "path": "node_modules/vss-web-extension-sdk/lib",
            "addressable": true,
            "packagePath": "lib"
        }
    ]
}

The above code is essential for each and every extension as it denotes what are the files involved in the extension, what is the publisher ID and whether the extension is private or public and what are the categories for the extension

The above extension will display a simple page on the Hub in AzureDevOps

In the below extension code, Public is set to false, if the public is set to false the extension won’t be visible for the public and it can be only shared within the Azure DevOps Organizations by the Publisher

Step 3: Let us create a file called Private.html 



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="lib/VSS.SDK.min.js"></script>
    <style>
        body {
            background-color: rgb(0, 67, 117);
            color: white;
            margin: 10px;    
            font-family: "Segoe UI VSS (Regular)","-apple-system",BlinkMacSystemFont,"Segoe UI",sans-serif;
        }
    </style>
    <script type="text/javascript">
        VSS.init();
        VSS.ready(function() {
            document.getElementById("name").innerText = VSS.getWebContext().user.name;
            document.getElementById("project").innerText = VSS.getWebContext().project.name;
        });
    </script>
</head>
<body>        
    <h1>Hello, <span id="name"></span></h1><BR><BR>
        <span id="project"></span></h1>
</body>
</html>

If you see in the above code, I am just getting the Context & Project Name and displaying it as output in an HTML file and the file is placed at the root of the extension directory as shown

Step 4: Now as our extension is ready, we need to package & publish the extension

Step 5: Before Publishing an extension you need a create a Publisher ID in Visual Studio MarketPlace

Step 6: Once you are ready with the Publisher ID, replace the publisher ID in vss-extension.json with the Publisher ID

Step 7: Now run the below command either from command prompt or Visual Studio Code’s Terminal as shown below



npx tfx extension publish

Once you run the command, it will get published and the extension will be created as shown

Step 8: Now upload the extension to Azure DevOps MarketPlace by going to https://marketplace.visualstudio.com/manage/publishers/xxxx and then click on “New Extension” and then choose Azure DevOps

Step 9: Then upload the extension as shown below

Step 10: As you see my private extension is published and it needs to be shared to be visible to anyone

And this extension won’t be visible to anyone unless it’s shared with another organization



Tags:

You may also like...