Dela via

Utveckla ett webbtillägg

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

Använd tillägg för att förbättra Azure DevOps med nya webbupplevelser, instrumentpanelswidgetar, bygguppgifter med mera. Du kan utveckla tillägg med hjälp av standardtekniker som HTML, JavaScript och CSS. Den här guiden vägleder dig genom att skapa ett webbtillägg för Azure DevOps.

Tips

Utforska tilläggsexemplen och den senaste dokumentationen om tilläggsutveckling med hjälp av Azure DevOps Extension SDK.

Förutsättningar

Kategori Krav
behörigheter Organisationens ägare.
Verktyg - Node.js
– Paketeringsverktyg för tillägg: Kör npm install -g tfx-cli från en kommandotolk som du använder för att paketera tillägget senare.

Skapa en katalog och ett manifest

Ett tillägg består av en uppsättning filer som innehåller en obligatorisk manifestfil. Du paketera den i en .vsix-fil och publicera den på Visual Studio Marketplace.

  1. Skapa en katalog för att lagra de filer som behövs för tillägget:

    mkdir my-first-extension

  2. Initiera ett nytt npm-paketmanifest från den här katalogen:

    npm init -y

    Den här filen beskriver de bibliotek som krävs av tillägget.

  3. Installera SDK-paketet för Azure DevOps-tillägget och spara det i NPM-paketmanifestet:

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

Det här SDK:t innehåller ett JavaScript-bibliotek som tillhandahåller API:er som krävs för att kommunicera med sidan som tillägget är inbäddat i.

  1. Skapa en tilläggsmanifestfil med namnet vss-extension.json i roten i tilläggskatalogen med följande innehåll:

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

    Viktigt!

    Egenskapen public styr om tillägget är synligt för alla på Visual Studio Marketplace. Håll dina tillägg privata under utvecklingen.

  2. Skapa en fil med namnet my-hub.html i roten av din tilläggskatalog med följande innehåll, vilket är för vyn (även kallad en hubb) som bidrar till webbupplevelsen.

    <!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. Tilläggskatalogen bör se ut som i följande exempel.

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
    Behöver du hjälp? Skicka frågor till Azure DevOps Services Developer Community.

Nästa steg

Paketera och publicera tillägget

Relaterat innehåll