Delen via

Een webextensie ontwikkelen

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

Gebruik extensies om Azure DevOps te verbeteren met nieuwe webervaringen, dashboardwidgets, bouwtaken en meer. In deze zelfstudie leert u hoe u een eenvoudige webextensie maakt en verpakt.

Hint

Zie de opslagplaats azure-devops-extension-sample voor een volledig werkende referentie.

Benodigdheden

Categorie Vereisten
toestemmingen Eigenaar van de organisatie of lid van de groep Beheerders van projectverzamelingen .
Gereedschappen - Node.js (aanbevolen LTS-versie)
- Hulpprogramma voor extensiepakketten: Voer npm install -g tfx-cli uit om de TFX CLI te installeren.

Een map en manifest maken

Een extensie is een set bestanden die een vereist manifestbestand bevat. Verpak de extensie in een VSIX-bestand en publiceer deze naar Visual Studio Marketplace.

  1. Maak een map voor uw extensie:

    mkdir my-first-extension && cd my-first-extension

  2. Initialiseer een npm-pakketmanifest:

    npm init -y

  3. Installeer de Azure DevOps Extension SDK:

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

    Deze SDK biedt API's voor communicatie met het Azure DevOps-hostframe.

  4. Maak een extensiemanifestbestand met de naam vss-extension.json in de hoofdmap van uw extensiemap met de volgende inhoud:

    {
    "manifestVersion": 1,
    "id": "my-first-extension",
    "publisher": "",
    "version": "1.0.0",
    "name": "My First Extension",
    "description": "A sample Azure DevOps 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"
        }
    ]
}

    Belangrijk

    Stel het publisher veld in op uw Marketplace-uitgevers-id. De eigenschap public bepaalt of de extensie zichtbaar is voor iedereen in Visual Studio Marketplace. Houd uw extensies privé tijdens de ontwikkeling.

  5. Maak een bestand met de naam my-hub.html in de rootmap van uw extensiemap met de volgende inhoud. Deze HTML-pagina is de weergave (hub) die is bijgedragen aan de Azure DevOps-webervaring.

    <!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) {
            SDK.init();
            SDK.ready().then(function () {
                document.getElementById("name").innerText = SDK.getUser().displayName;
            });
        });
    </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>

    Opmerking

    In dit voorbeeld wordt RequireJS gebruikt om de SDK te laden, wat werkt zonder een buildstap. Voor productie-extensies gebruikt u een bundelaar zoals webpack met import van ES-modules (import * as SDK from "azure-devops-extension-sdk") voor betere prestaties. Zie het extensievoorbeeld voor een installatie op basis van een webpack.

  6. Uw extensiemap moet eruitzien zoals het volgende voorbeeld.

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
    Hulp nodig? Stel vragen over de Azure DevOps Services Developer Community.

Volgende stappen

Uw extensie verpakken en publiceren

Verwante inhoud

  • Last updated on