Desenvolver uma extensão da Web

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

Use extensões para aprimorar o Azure DevOps com novas experiências da Web, widgets de painel, tarefas de compilação e muito mais. Você pode desenvolver extensões usando tecnologias padrão como HTML, JavaScript e CSS. Este tutorial orienta você na criação de uma extensão da Web para o Azure DevOps.

Dica

Explore os exemplos de extensão e a documentação mais recente sobre desenvolvimento de extensão usando o SDK de Extensão de DevOps do Azure.

Pré-requisitos

Você deve ter as seguintes permissões e instalações.

  • Você deve ser proprietário de uma organização. Se você não tiver uma organização, poderá criar uma organização gratuitamente.
  • Instale o Node.js.
  • Instale a ferramenta de empacotamento de extensão (TFX). Execute npm install -g tfx-cli a partir de um prompt de comando, que você usa para empacotar sua extensão mais tarde.

Criar um diretório e um manifesto

Uma extensão é composta por um conjunto de arquivos que inclui um arquivo de manifesto necessário. Empacotá-lo em um arquivo .vsix e publicar no Visual Studio Marketplace.

  1. Crie um diretório para armazenar os arquivos necessários para sua extensão:

    mkdir my-first-extension
    
  2. A partir deste diretório, inicialize um novo manifesto do pacote npm:

    npm init -y
    

    Este arquivo descreve as bibliotecas exigidas por sua extensão.

  3. Instale o pacote do SDK do Microsoft VSS Web Extension e salve-o no manifesto do pacote npm:

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

    Este SDK inclui uma biblioteca JavaScript que fornece APIs necessárias para se comunicar com a página na qual sua extensão está incorporada.

  4. Crie um arquivo de manifesto de extensão nomeado vss-extension.json na raiz do diretório de extensão com o seguinte conteúdo:

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

    Observação

    A public propriedade controla se a extensão é visível para todos no Visual Studio Marketplace. Mantenha suas extensões privadas durante o desenvolvimento.

  5. Crie um arquivo nomeado my-hub.html na raiz do diretório de extensão com o conteúdo a seguir, que é para a exibição (também conhecida como hub) contribuída para a experiência na 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. Seu diretório de extensão deve se parecer com o exemplo a seguir.

    |-- my-hub.html
    |-- node_modules
        |-- @types
        |-- azure-devops-extension-sdk
    |-- package.json
    |-- vss-extension.json
    
Precisa de ajuda? Poste perguntas na Comunidade de Desenvolvedores dos Serviços de DevOps do Azure.

Próximas etapas