開發工具擴充功能

適用於: Windows Admin Center、Windows Admin Center 預覽版

工具延伸模組是使用者與 Windows Admin Center 互動以管理連線的主要方式,例如伺服器或叢集。 當您在 Windows Admin Center 主畫面中按一下連線並連線時,您會在左側瀏覽窗格中看到工具清單。 當您按一下工具時,工具延伸模組會載入並顯示在右窗格中。

載入工具延伸模組時,它可以在目標伺服器或叢集上執行 WMI 呼叫或 PowerShell 指令碼,並根據使用者輸入在 UI 中顯示資訊或執行命令。 工具延伸模組會定義應該顯示的解決方案,因此每個解決方案會有一組不同的工具。

注意

不熟悉不同的延伸模組類型嗎? 深入瞭解擴充性架構和延伸模組類型

準備您的環境

如果您尚未這麽做,請安裝所有專案需要的相依性和全域先決條件來準備您的環境

使用 Windows Admin Center SDK 建立新的工具延伸模組

安裝所有相依性之後,即可建立新的工具延伸模組。 建立或瀏覽至包含專案檔案的資料夾、開啟命令提示字元,並將該資料夾設定為工作目錄。 使用先前安裝的 Windows Admin Center SDK,使用下列語法建立新的延伸模組:

wac create --company "{!Company Name}" --tool "{!Tool Name}" --version latest
說明 範例
{!Company Name} 您的公司名稱 (含空格) Contoso Inc
{!Tool Name} 您的工具名稱 (含空格) Manage Foo Works

以下是範例用法:

wac create --company "Contoso Inc" --tool "Manage Foo Works" --version latest

這會使用您為工具指定的名稱,在目前的工作目錄中建立新資料夾,將所有必要的範本檔案複製到您的專案,並使用您的公司和工具名稱來設定檔案。

注意

此命令中的 --version 旗標會指定您想要設為目標的 Windows Admin Center SDK 版本。 閱讀如何 以不同版本的 Windows Admin Center SDK 為目標,讓您的延伸模組隨時掌握最新的 SDK 和平台變更。

接下來,將目錄變更為剛建立的資料夾,然後執行下列命令來安裝必要的本機相依性:

npm install

完成之後,您已做好一切所需的設定,可將新延伸模組載入 Windows Admin Center 中。

將內容新增至您的延伸模組

既然您已使用 Windows Admin Center SDK 建立延伸模組,即可自訂內容。 如需您可以執行的範例,請參閱下列指南:

如需更多範例,請參閱我們的 [開發人員指南]。 [開發人員指南] 是一個功能完整的解決方案延伸模組,可側載至 Windows Admin Center,並包含一組豐富的範例功能和工具範例,可供您在自己的延伸模組中瀏覽及使用。

在 Windows Admin Center 設定的 [進階] 頁面上啟用 [開發人員指南] 延伸模組。

自訂延伸模組的圖示

您可以在工具清單中自訂延伸模組顯示的圖示。 若要這樣做,請針對延伸模組修改 manifest.json 中的所有 icon 專案:

"icon": "{!icon-uri}",
說明 範例 URI
{!icon-uri} 圖示資源的位置 assets/foo-icon.svg

注意: 目前,在開發模式中側載延伸模組時,不會顯示自訂圖示。 因應措施是移除 target 的內容,如下所示:

"target": "",

此設定僅適用於開發模式中的側載,因此請務必保留包含在 target 中的值,然後在發佈延伸模組之前加以還原。

建置和側載延伸模組

接下來,建置並側載您的延伸模組到 Windows Admin Center。 開啟命令視窗,將目錄變更為來來源目錄,然後您就可開始建置。

  • 使用 gulp 進行建置與服務:

    gulp build
    gulp serve --port 4201
    

請注意,您必須選擇目前空閒的連接埠。 切勿嘗試使用正在執行 Windows Admin Center 的連接埠。

您可以附加本機服務的專案至 Windows Admin Center,將您的專案側載至 Windows Admin Center 的本機實例中進行測試。

  • 在網頁瀏覽器中啟動 Windows Admin Center

  • 開啟偵錯工具 (F12)

  • 開啟主控台並輸入下列命令:

    MsftSme.sideLoad("http://localhost:4201")
    
  • 重新整理網頁瀏覽器

您的專案現在會顯示在名稱旁邊的 [工具] 清單中 (側載)。