開發 Web 擴充功能

  • 發行項

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

使用擴充功能透過新的 Web 體驗、儀錶板小工具、建置工作等等來增強 Azure DevOps。 您可以使用 HTML、JavaScript 和 CSS 等標準技術來開發延伸模組。 本教學課程會引導您建立 Azure DevOps 的 Web 擴充功能。

提示

使用 Azure DevOps 擴充功能 SDK 探索擴充功能開發的最新範例和最新檔。

必要條件

您必須具有下列許可權和安裝。

  • 您必須是組織擁有者。 如果您沒有組織，您可以 免費建立組織。
  • 安裝 Node.js。
  • 安裝延伸模組封裝工具 （TFX）。 從命令提示字元執行 npm install -g tfx-cli ，您稍後會 用來封裝擴充功能 。

建立目錄和指令清單

擴展名是由一組包含必要指令清單檔的檔案所組成。 您可以將它封裝成 .vsix 檔案，併發佈至 Visual Studio Marketplace。

  1. 建立目錄來保存擴充功能所需的檔案：

    mkdir my-first-extension

  2. 從這個目錄，初始化新的 npm 套件指令清單：

    npm init -y

    此檔案描述擴充功能所需的連結庫。

  3. 安裝 Microsoft VSS Web 擴充功能 SDK 套件，並將其儲存至 npm 套件指令清單：

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

    此 SDK 包含 JavaScript 連結庫，提供與擴充功能內嵌在頁面中通訊所需的 API。

  4. 使用下列內容，在擴充目錄的根目錄建立名為 vss-extension.json 的延伸模組指令清單檔案：

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

    注意

    屬性 public 可控制Visual Studio Marketplace上每個人是否可以看到延伸模組。 讓您的延伸模組在開發期間保持私人。

  5. 使用下列內容，在延伸目錄的根目錄建立名為 my-hub.html 的檔案，也就是參與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. 您的延伸模組目錄看起來應該像下列範例。

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
需要協助嗎？ 將問題張貼至 Azure DevOps Services 開發人員社群。

下一步

封裝併發佈您的延伸模組