Delen via

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.

Hint

Verken de extensievoorbeelden en de nieuwste documentatie over uitbreidingsontwikkeling met behulp van de Azure DevOps Extension SDK.

Benodigdheden

Categorie Vereisten
toestemmingen Eigenaar van de organisatie.
Gereedschappen - Node.js
- Hulpprogramma voor uitbreidingspakketten: voer npm install -g tfx-cli uit vanaf een opdrachtprompt, waarmee u uw extensie later 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 een nieuw npm-pakketmanifest vanuit deze map:

    npm init -y

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

  3. Installeer het AZURE DevOps 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.

  1. 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 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"
        }
    ]
}

    Belangrijk

    De eigenschap public bepaalt of de extensie zichtbaar is voor iedereen in Visual Studio Marketplace. Houd uw extensies privé tijdens de ontwikkeling.

  2. Maak een bestand met de naam my-hub.html in de hoofdmap van uw extensie met de volgende inhoud, bedoeld voor de weergave (ook wel een hub genoemd) die is toegevoegd 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>

  3. 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