Entwickeln einer Weberweiterung

Azure DevOps Services | Azure DevOps Server 2022 | Azure DevOps Server 2019 | TFS 2018

Verwenden Sie Erweiterungen, um Azure DevOps mit neuen Weboberflächen, Dashboard Widgets, Buildaufgaben und mehr zu verbessern. Sie können Erweiterungen mit Standardtechnologien wie HTML, JavaScript und CSS entwickeln. In diesem Tutorial erfahren Sie, wie Sie eine Weberweiterung für Azure DevOps erstellen.

Tipp

Sehen Sie sich die Erweiterungsbeispiele und die neueste Dokumentation zur Erweiterungsentwicklung mit dem Azure DevOps-Erweiterungs-SDK an.

Voraussetzungen

Sie benötigen die folgenden Berechtigungen und Installationen.

  • Sie müssen ein Organisationsbesitzer sein. Wenn Sie über keine organization verfügen, können Sie kostenlos eine organization erstellen.
  • Installieren Sie Node.js.
  • Installieren Sie das Erweiterungspakettool (Extension Packaging Tool, TFX). Führen Sie npm install -g tfx-cli von einer Eingabeaufforderung aus, die Sie später zum Verpacken der Erweiterung verwenden.

Erstellen eines Verzeichnisses und Manifests

Eine Erweiterung besteht aus einer Reihe von Dateien, die eine erforderliche Manifestdatei enthalten. Sie packen sie in eine VSIX-Datei und veröffentlichen sie im Visual Studio Marketplace.

  1. Erstellen Sie ein Verzeichnis, in dem die dateien gespeichert werden, die für Ihre Erweiterung benötigt werden:

    mkdir my-first-extension
    
  2. Initialisieren Sie in diesem Verzeichnis ein neues npm-Paketmanifest:

    npm init -y
    

    In dieser Datei werden die Bibliotheken beschrieben, die für Ihre Erweiterung erforderlich sind.

  3. Installieren Sie das Microsoft VSS Web Extension SDK-Paket, und speichern Sie es in Ihrem npm-Paketmanifest:

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

    Dieses SDK enthält eine JavaScript-Bibliothek, die APIs bereitstellt, die für die Kommunikation mit der Seite erforderlich sind, in die Ihre Erweiterung eingebettet ist.

  4. Erstellen Sie eine Erweiterungsmanifestdatei namens vss-extension.json im Stammverzeichnis Ihres Erweiterungsverzeichnisses mit folgendem Inhalt:

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

    Hinweis

    Die public -Eigenschaft steuert, ob die Erweiterung für alle Benutzer im Visual Studio Marketplace sichtbar ist. Halten Sie Ihre Erweiterungen während der Entwicklung privat.

  5. Erstellen Sie im Stammverzeichnis Ihres Erweiterungsverzeichnisses eine Datei mit dem Namen my-hub.html mit dem folgenden Inhalt, der für die Ansicht (auch als Hub bezeichnet) in die Webumgebung eingebunden ist.

    <!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. Ihr Erweiterungsverzeichnis sollte wie im folgenden Beispiel aussehen.

    |-- my-hub.html
    |-- node_modules
        |-- @types
        |-- azure-devops-extension-sdk
    |-- package.json
    |-- vss-extension.json
    
Sie benötigen Hilfe? Stellen Sie Fragen an die Azure DevOps Services Entwicklercommunity.

Nächste Schritte