Dela via

Utveckla ett webbtillägg

  • Artikel

Azure DevOps Services | Azure DevOps Server 2022 – Azure DevOps Server 2019

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

Se till att ha följande behörigheter och installationer.

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 Microsoft VSS Web Extension SDK-paketet och spara det i ditt npm-paketmanifest:

    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.

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

    Not

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

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

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