如何通过扩展在VSTS菜单栏添加输入框与按钮等元素？

Great question! It’s true that the official Azure DevOps (formerly VSTS) extension documentation doesn’t explicitly cover adding native HTML elements like <input type="text" /> or <button /> outside the standard menu bar submenu structure. The default MenuBar control is focused on hierarchical menu items, but there are reliable ways to inject custom UI elements into the navigation bar area.

Method 1: Inject Custom React Components via DOM Targeting #

Since most Azure DevOps extensions use React, you can create a custom component with your desired elements and mount it directly into the menu bar’s DOM container. Here’s a step-by-step example:

1. Create the custom component (using Office UI Fabric for consistent styling is recommended):

   import * as React from "react";
   import * as ReactDOM from "react-dom";
   import { TextField, PrimaryButton } from "office-ui-fabric-react";
   import { register } from "VSS/SDK/Shim";
   
   class CustomMenuControls extends React.Component {
     constructor(props) {
       super(props);
       this.state = { inputValue: "" };
     }
   
     handleInputChange = (_, newValue?: string) => {
       this.setState({ inputValue: newValue || "" });
     };
   
     handleSubmit = () => {
       // Add your logic here (e.g., call Azure DevOps API, trigger extension actions)
       console.log(`Submitted value: ${this.state.inputValue}`);
     };
   
     render() {
       return (
         <div style={{ display: "flex", alignItems: "center", gap: "8px", padding: "0 12px" }}>
           <TextField
             placeholder="Enter your input"
             value={this.state.inputValue}
             onChange={this.handleInputChange}
             styles={{ root: { width: 220 } }}
           />
           <PrimaryButton text="Submit" onClick={this.handleSubmit} />
         </div>
       );
     }
   }
   
   // Register the component and mount it to the menu bar
   register("your-extension-id.custom-menu-controls", () => {
     // Target the top navigation bar container (stable class name for Azure DevOps)
     const navBarContainer = document.querySelector(".ms-Nav-bar");
     if (navBarContainer) {
       const mountPoint = document.createElement("div");
       navBarContainer.appendChild(mountPoint);
       ReactDOM.render(<CustomMenuControls />, mountPoint);
     }
   });
   

2. Update your extension manifest to include the component registration:

   {
     "contributions": [
       {
         "id": "custom-menu-controls",
         "type": "ms.vss-web.widget",
         "targets": ["ms.vss-web.top-navigation"],
         "properties": {
           "component": "your-extension-id/components/CustomMenuControls"
         }
       }
     ]
   }
   

Method 2: Use the Toolbar Contribution Point #

Azure DevOps provides a toolbar contribution type that allows you to inject custom items directly into the top navigation toolbar. This is a more official approach than raw DOM targeting:

1. Add the toolbar contribution to your manifest:

   {
     "contributions": [
       {
         "id": "custom-toolbar-items",
         "type": "ms.vss-web.toolbar",
         "targets": ["ms.vss-web.top-navigation-toolbar"],
         "properties": {
           "items": [
             {
               "type": "custom",
               "component": "your-extension-id/components/CustomMenuControls"
             }
           ]
         }
       }
     ]
   }
   

2. Reuse the custom React component from Method 1 – the toolbar contribution will render it directly in the top navigation bar without needing manual DOM mounting.

Key Notes #

• Style Consistency: Always use Office UI Fabric components (like TextField instead of native <input>) to match Azure DevOps’ native look and feel.
• DOM Stability: If targeting DOM elements directly, test across different Azure DevOps environments to ensure class names/structure haven’t changed. The toolbar contribution method is more future-proof.
• SDK Integration: Use the Azure DevOps SDK (VSS/SDK) to handle authentication and API calls from your custom elements, ensuring seamless integration with the platform.

内容的提问来源于stack exchange，提问作者Kajiyama