Azure DevOps Services |Azure DevOps Server |Azure DevOps Server 2022
iframe と互換性のある任意の Web ページを、Azure DevOps クエリの結果ページのタブとしてホストできます。 この記事では、簡単な [Hello World] タブを追加する手順について説明します。
ヒント
テーマ設定や VSS からの移行など、最新の拡張機能開発ガイダンスについて説明します。SDK については、 Azure DevOps Extension SDK 開発者ポータルを参照してください。
Web ページを作成する
azure-devops-extension-sdk パッケージをインストールし、
SDK.jsファイルをhome/sdk/scriptsに配置します。npm install azure-devops-extension-sdk表示する Web ページを作成します。 次の例では、
hello-world.htmlディレクトリに単純なhomeページを追加します。HTML ページで SDK を参照し、
SDK.init()を呼び出してから、SDK.notifyLoadSucceeded()を呼び出します。<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello World</title> <script src="sdk/scripts/SDK.js"></script> </head> <body> <script type="text/javascript">SDK.init();</script> <h1>Hello World</h1> <script type="text/javascript">SDK.notifyLoadSucceeded();</script> </body> </html>
拡張機能マニフェストを更新する
拡張機能マニフェスト ファイルを次のコードで更新します。
...
"contributions": [
{
"id": "Fabrikam.HelloTab.Query.Tabs",
"type": "ms.vss-web.tab",
"description": "Adds a 'Hello' tab to the query results",
"targets": [
"ms.vss-work-web.query-tabs"
],
"properties": {
"uri": "hello-query-tab.html",
"title": "Hello",
"name": "Hello"
}
}
],
"scopes": [
"vso.work"
],
"files": [
{
"path": "hello-query-tab.html", "addressable": true
},
{
"path": "scripts", "addressable": true
},
{
"path": "sdk/scripts", "addressable": true
},
{
"path": "images/logo.png", "addressable": true
}
]
...
貢献
各コントリビューションは、 type (タブ)、 target (クエリ タブ)、および型固有の propertiesを定義します。 タブの場合は、 name と title を表示テキストに設定し、拡張機能のベース URI を基準としたページ パスに uri します。
スコープ
scopes セクションでは、拡張機能に必要なアクセス許可を宣言します。 次の例では、 vso.work を使用して作業項目にアクセスします。
Files
files セクションには、拡張機能が実行時に必要とするすべてのファイルが一覧表示されます。 URL アドレス指定が必要なファイルのaddressableにtrueを設定します。
Example
SDK.register(SDK.getContributionId(), {
pageTitle: function(state) {
return "Hello";
},
updateContext: function(tabContext) {
},
isInvisible: function(state) {
return false;
},
isDisabled: function(state) {
return false;
}
});
使用可能なすべてのコントリビューション ポイントについては、「 拡張ポイント」を参照してください。