Freigeben über

Entwickeln einer Weberweiterung

  • Artikel

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

Verwenden Sie Erweiterungen, um Azure DevOps mit neuen Weboberflächen, Dashboard-Widgets, Aufgaben zu erstellen und vieles mehr zu verbessern. Sie können Erweiterungen mit Standardtechnologien wie HTML, JavaScript und CSS entwickeln. Dieses Lernprogramm führt Sie durch das Erstellen einer Weberweiterung für Azure DevOps.

Tipp

Erkunden Sie die Erweiterungsbeispiele und die neueste Dokumentation zur Erweiterungsentwicklung mithilfe des Azure DevOps Extension SDK.

Voraussetzungen

Kategorie Anforderungen
Berechtigungen Besitzer der Organisation.
Tools - Node.js
- Erweiterungspakettool: Führen Sie npm install -g tfx-cli über eine Eingabeaufforderung aus, die Sie zum Verpacken der Erweiterung später 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, um die dateien zu speichern, die für Ihre Erweiterung erforderlich sind:

    mkdir my-first-extension

  2. Initialisieren Sie ein neues npm-Paketmanifest aus diesem Verzeichnis:

    npm init -y

    In dieser Datei werden die bibliotheken beschrieben, die von der Erweiterung benötigt werden.

  3. Installieren Sie das Azure DevOps Extension SDK-Paket, und speichern Sie es im 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.

  1. Erstellen Sie eine Erweiterungsmanifestdatei namens vss-extension.json im Stammverzeichnis Ihres Erweiterungsverzeichnisses mit dem folgenden 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"
        }
    ]
}

    Wichtig

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

  2. Erstellen Sie eine Datei mit dem Namen my-hub.html im Stammverzeichnis Ihres Erweiterungsverzeichnisses mit dem folgenden Inhalt, der für die Ansicht (auch als Hub bezeichnet) zur Web-Erfahrung beiträgt.

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

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
    Benötigen Sie Hilfe? Stellen Sie Fragen zur Azure DevOps Services Developer Community.

Nächste Schritte

Paketieren und Veröffentlichen Ihrer Erweiterung