Développer une extension web

  • Article

Azure DevOps Services | Azure DevOps Server 2022 | Azure DevOps Server 2019

Utilisez des extensions pour améliorer Azure DevOps avec de nouvelles expériences web, des widgets de tableau de bord, des tâches de génération, etc. Vous pouvez développer des extensions à l’aide de technologies standard telles que HTML, JavaScript et CSS. Ce tutoriel vous guide tout au long de la création d’une extension web pour Azure DevOps.

Conseil

Explorez les exemples d’extensions et la documentation la plus récente sur le développement d’extensions à l’aide du Kit de développement logiciel (SDK) d’extension Azure DevOps.

Prérequis

Vous devez disposer de l’autorisation et des installations suivantes.

  • Vous devez être un propriétaire d'organisation. Si vous n’avez pas d’organisation, vous pouvez créer une organisation gratuitement.
  • Installez Node.js.
  • Installez l’outil d’empaquetage d’extension (TFX). Exécutez à npm install -g tfx-cli partir d’une invite de commandes, que vous utilisez pour empaqueter votre extension ultérieurement.

Créer un répertoire et un manifeste

Une extension est composée d’un ensemble de fichiers qui inclut un fichier manifeste requis. Vous l’empaquetez dans un fichier .vsix et publiez-le sur Visual Studio Marketplace.

  1. Créez un répertoire pour contenir les fichiers nécessaires à votre extension :

    mkdir my-first-extension

  2. À partir de ce répertoire, initialisez un nouveau manifeste de package npm :

    npm init -y

    Ce fichier décrit les bibliothèques requises par votre extension.

  3. Installez le package sdk d’extension web Microsoft VSS et enregistrez-le dans votre manifeste de package npm :

    npm install azure-devops-extension-sdk --save

    Ce Kit de développement logiciel (SDK) inclut une bibliothèque JavaScript qui fournit des API requises pour communiquer avec la page dans laquelle votre extension est incorporée.

  4. Créez un fichier manifeste d’extension nommé vss-extension.json à la racine de votre répertoire d’extension avec le contenu suivant :

    {
    "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"
        }
    ]
}

    Remarque

    La public propriété contrôle si l’extension est visible par tout le monde sur Visual Studio Marketplace. Gardez vos extensions privées pendant le développement.

  5. Créez un fichier nommé my-hub.html à la racine de votre répertoire d’extension avec le contenu suivant, qui est destiné à la vue (également appelée hub) contribué à l’expérience web.

    <!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>

  6. Votre répertoire d’extension doit ressembler à l’exemple suivant.

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
Vous avez besoin d’aide ? Publiez des questions sur la Communauté des développeurs Azure DevOps Services.

Étapes suivantes

Empaqueter et publier votre extension