Events
Mar 17, 9 PM - Mar 21, 10 AM
Join the meetup series to build scalable AI solutions based on real-world use cases with fellow developers and experts.
Register nowThis browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019
Use extensions to enhance Azure DevOps with new web experiences, dashboard widgets, build tasks, and more. You can develop extensions using standard technologies like HTML, JavaScript, and CSS. This tutorial guides you through creating a web extension for Azure DevOps.
Tip
Explore the extension samples and the newest documentation on extension development using the Azure DevOps Extension SDK.
Have the following permission and installations.
npm install -g tfx-cli
from a command prompt, which you use to package your extension later on.An extension is composed of a set of files that includes a required manifest file. You package it into a .vsix file and publish to the Visual Studio Marketplace.
Create a directory to hold the files needed for your extension:
mkdir my-first-extension
From this directory, initialize a new npm package manifest:
npm init -y
This file describes the libraries required by your extension.
Install the Microsoft VSS Web Extension SDK package and save it to your npm package manifest:
npm install azure-devops-extension-sdk --save
This SDK includes a JavaScript library that provides APIs required for communicating with the page your extension is embedded in.
Create an extension manifest file named vss-extension.json
at the root of your extension directory with the following content:
{
"manifestVersion": 1,
"id": "my-first-extension",
"publisher": "",
"version": "1.0.0",
"name": "My First 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 Hub",
"uri": "my-hub.html"
}
}
],
"files": [
{
"path": "my-hub.html",
"addressable": true
},
{
"path": "node_modules/azure-devops-extension-sdk",
"addressable": true,
"packagePath": "lib"
}
]
}
Note
The public
property controls whether the extension is visible to everyone on the Visual Studio Marketplace. Keep your extensions private during development.
Create a file named my-hub.html
at the root of your extension directory with the following content, which is for the view (also known as a hub) contributed into the web experience.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
window.requirejs.config({
enforceDefine: true,
paths: {
'SDK': './lib/SDK.min'
}
});
window.requirejs(['SDK'], function (SDK) {
if (typeof SDK !== 'undefined') {
console.log("SDK is defined. Trying to initialize...");
SDK.init();
SDK.ready().then(() => {
console.log("SDK is ready");
document.getElementById("name").innerText = SDK.getUser().displayName;
});
} else {
console.log('SDK is not defined');
}
});
</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>
</head>
<body>
<h1>Hello, <span id="name"></span></h1>
</body>
</html>
Your extension directory should look like the following example.
|-- my-hub.html
|-- node_modules
|-- @types
|-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
Events
Mar 17, 9 PM - Mar 21, 10 AM
Join the meetup series to build scalable AI solutions based on real-world use cases with fellow developers and experts.
Register nowTraining
Module
Extend Microsoft Viva Connections with web parts - Training
Learn how to extend Viva Connections with custom web parts by using your existing web development skills. You'll learn about the scenarios where web parts are most suitable and how to build them.
Certification
Microsoft Certified: Power Platform Developer Associate - Certifications
Demonstrate how to simplify, automate, and transform business tasks and processes using Microsoft Power Platform Developer.
Documentation
Extensibility points - Azure DevOps
Browse through the places where your extension can extend Azure DevOps.
Package, publish extensions - Azure DevOps
An overview of how to package, publish, unpublish, publicize, and share an extension for Azure DevOps.
Samples overview - Azure DevOps
Overview of the available extension samples for Azure DevOps, including a description, the link to the repo and the contributions they touch.