Desarrollar una extensión web

  • Artículo

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

Use extensiones para mejorar Azure DevOps con nuevas experiencias web, widgets de panel, tareas de compilación y mucho más. Puede desarrollar extensiones mediante tecnologías estándar como HTML, JavaScript y CSS. Este tutorial le guía a través de la creación de una extensión web para Azure DevOps.

Sugerencia

Explore los ejemplos de extensión y la documentación más reciente sobre el desarrollo de extensiones mediante el SDK de extensión de Azure DevOps.

Requisitos previos

Debe tener los siguientes permisos e instalaciones.

Creación de un directorio y un manifiesto

Una extensión se compone de un conjunto de archivos que incluye un archivo de manifiesto necesario. Se empaqueta en un archivo .vsix y se publica en Visual Studio Marketplace.

  1. Cree un directorio para almacenar los archivos necesarios para la extensión:

    mkdir my-first-extension

  2. Desde este directorio, inicialice un nuevo manifiesto de paquete de npm:

    npm init -y

    Este archivo describe las bibliotecas necesarias para la extensión.

  3. Instale el paquete del SDK de extensión web de Microsoft VSS y guárdelo en el manifiesto del paquete de npm:

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

    Este SDK incluye una biblioteca de JavaScript que proporciona las API necesarias para comunicarse con la página en la que se inserta la extensión.

  4. Cree un archivo de manifiesto de extensión denominado vss-extension.json en la raíz del directorio de extensión con el siguiente contenido:

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

    Nota:

    La public propiedad controla si la extensión es visible para todos los usuarios de Visual Studio Marketplace. Mantenga las extensiones privadas durante el desarrollo.

  5. Cree un archivo denominado my-hub.html en la raíz del directorio de extensión con el siguiente contenido, que es para la vista (también conocida como centro) que ha contribuido a la experiencia web.

    <!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. El directorio de extensión debe tener un aspecto similar al del ejemplo siguiente.

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
¿Necesita ayuda? Publique preguntas en la Comunidad de desarrolladores de Azure DevOps Services.

Pasos siguientes

Empaquetar y publicar la extensión