Compartir a través de

Desarrollo de una extensión web

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

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.

Prerrequisitos

Categoría Requisitos
Permisos Propietario de la organización.
Herramientas - Node.js
- Herramienta de empaquetado de extensiones: ejecute npm install -g tfx-cli desde un símbolo del sistema, que usarás para empaquetar la extensión más adelante.

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. Inicialice un nuevo manifiesto de paquete de npm desde este directorio:

    npm init -y

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

  3. Instale el paquete del SDK de extensión de Azure DevOps 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.

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

    Importante

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

  2. Cree un archivo denominado my-hub.html en la raíz de su directorio de extensión con el siguiente contenido, que es para la vista (también llamada hub) que se ha añadido 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>

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

Empaquetado y publicación de la extensión

Contenido relacionado

  • Last updated on