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 självstudien vägleder dig genom att skapa ett webbtillägg för Azure DevOps.

Dricks

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

Förutsättningar

Du måste ha följande behörighet och installationer.

  • Du måste vara organisationsägare. Om du inte har någon organisation kan du skapa en organisation kostnadsfritt.
  • Installera Node.js.
  • Installera tilläggspaketeringsverktyget (TFX). 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 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"
        }
    ]
}

    Kommentar

    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 i tilläggskatalogen med följande innehåll, vilket är för vyn (kallas även en hubb) som har bidragit 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 Utvecklarcommunityn för Azure DevOps Services.

Nästa steg

Paketera och publicera tillägget