Een webextensie ontwikkelen

  • Artikel

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

Gebruik extensies om Azure DevOps te verbeteren met nieuwe webervaringen, dashboardwidgets, bouwtaken en meer. U kunt extensies ontwikkelen met behulp van standaardtechnologieën zoals HTML, JavaScript en CSS. In deze zelfstudie wordt u begeleid bij het maken van een webextensie voor Azure DevOps.

Tip

Bekijk de extensievoorbeelden en de nieuwste documentatie over extensieontwikkeling met behulp van de Azure DevOps Extension SDK.

Vereisten

U moet over de volgende machtigingen en installaties beschikken.

  • U moet de eigenaar van een organisatie zijn. Als u geen organisatie hebt, kunt u gratis een organisatie maken.
  • Installeer Node.js.
  • Installeer het hulpprogramma voor extensieverpakkingen (TFX). Voer npm install -g tfx-cli uit vanaf een opdrachtprompt, die u gebruikt om de extensie later te verpakken.

Een map en manifest maken

Een extensie bestaat uit een set bestanden die een vereist manifestbestand bevat. U verpakt het in een VSIX-bestand en publiceert deze naar Visual Studio Marketplace.

  1. Maak een map voor de bestanden die nodig zijn voor uw extensie:

    mkdir my-first-extension

  2. Initialiseer vanuit deze map een nieuw npm-pakketmanifest:

    npm init -y

    In dit bestand worden de bibliotheken beschreven die vereist zijn voor uw extensie.

  3. Installeer het Microsoft VSS Web Extension SDK-pakket en sla het op in het npm-pakketmanifest:

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

    Deze SDK bevat een JavaScript-bibliotheek die API's biedt die vereist zijn voor de communicatie met de pagina waarin uw extensie is ingesloten.

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

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

    Notitie

    De public eigenschap 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 hoofdmap van uw extensiemap met de volgende inhoud. Dit is bedoeld voor de weergave (ook wel hub genoemd) die heeft bijgedragen aan de 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) {
            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. De extensiemap moet eruitzien als in het volgende voorbeeld.

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

Volgende stappen

Uw extensie verpakken en publiceren