Entwickeln einer Weberweiterung

  • Artikel
  • 2 Minuten Lesedauer

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 mithilfe von 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

Sie müssen über die folgenden Berechtigungen und Installationen verfügen.

Erstellen eines Verzeichnisses und Manifests

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

  1. Erstellen Sie ein Verzeichnis, um die für Ihre Erweiterung erforderlichen Dateien zu halten:

    mkdir my-first-extension

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

    npm init -y

    Diese Datei beschreibt die von Ihrer Erweiterung erforderlichen Bibliotheken.

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

    npm install vss-web-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 mit dem Namen vss-extension.json "Stamm" Ihres Erweiterungsverzeichniss mit den folgenden Inhalten:

    {
    "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/vss-web-extension-sdk/lib",
            "addressable": true,
            "packagePath": "lib"
        }
    ]
}

    Hinweis

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

  5. Erstellen Sie eine Datei mit my-hub.html dem Namen "Stamm" Ihres Erweiterungsverzeichniss mit dem folgenden Inhalt, der für die Ansicht (auch als Hub bezeichnet) zur Weberfahrung beigetragen hat.

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="lib/VSS.SDK.min.js"></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>
    <script type="text/javascript">
        VSS.init();
        VSS.ready(function() {
            document.getElementById("name").innerText = VSS.getWebContext().user.name;
        });
    </script>
</head>
<body>        
    <h1>Hello, <span id="name"></span></h1>
</body>
</html>

  6. Ihr Erweiterungsverzeichnis sollte wie das folgende Beispiel aussehen.

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- vss-web-extension-sdk
|-- package.json
|-- vss-extension.json
Sie brauchen Hilfe? Posten Sie Fragen zum Azure DevOps Services Entwicklercommunity.

Nächste Schritte

Verpacken und Veröffentlichen Ihrer Erweiterung