Partager via

Développer une extension web

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

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

Explorer 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.

Conditions préalables

Catégorie Spécifications
Permissions Propriétaire de l’organisation.
Outils - Node.js
- Outil d’empaquetage d’extension : Exécutez npm install -g tfx-cli à partir d’une invite de commande, 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. Initialisez un nouveau manifeste de package npm à partir de ce répertoire :

    npm init -y

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

  3. Installez le package sdk d’extension Azure DevOps 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.

  1. 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"
        }
    ]
}

    Importante

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

  2. Créez un fichier nommé my-hub.html à la racine de votre répertoire d’extension avec le contenu suivant, conçu pour la vue (également appelée hub) ajoutée à 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>

  3. 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

Contenu connexe

  • Last updated on