開發工具擴充功能

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

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

Note

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

準備您的環境

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

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

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

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

以下是範例用法:

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

透過使用 Windows Admin Center SDK 6.0.0 版本及以上版本,你也可以建立基於 React 的工具擴充功能。 請使用以下語法建立新的基於 React 的工具擴充功能:

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

以下為範例:

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

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

Note

此命令中的 --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 設定的 [ 進階 ] 頁面上啟用開發人員指南延伸模組。

自訂延伸模組的圖示

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

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

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

"target": "",

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

建置和側載延伸模組

接著,將你的擴充套件建置並側載到 Windows Admin Center。 打開指令視窗,將目錄切換到你的來源目錄。

  • 要建置並提供擴充功能,請執行以下指令:

    npm run build
    npm start
    

讓這個終端機繼續運作。

預設情況下,擴充功能會側載於 4200 埠。 若要變更連接埠,請修改擴充功能的 package.json 和 appsettings.json 檔案。 確保你不要使用Windows Admin Center正在運行的那個埠口。

若要將專案側載到 Windows Admin Center 的本地實例進行測試,請附加本地提供的專案。

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

  • 開啟偵錯工具 (F12)

  • 打開主控台,輸入以下指令以使用 localhost 進行側載:

    MsftSme.sideLoad("http://localhost:4200")
    

    如果您依照 使用 FQDN 進行側載的指示,請開啟主控台並輸入下列命令:

    MsftSme.sideLoad("http://<FQDN>:4200")
    
  • 重新整理瀏覽器。

你的專案現在會出現在 工具 清單中,名稱旁邊會顯示(側載)。