Explore the “Surface Owner” VSO Extension - 1. Getting started

Publishing Visual Studio Online extensions within the preview explored the publication process of an extension … but how do we get there? In this series we cover the lifecycle of an extension we are working on, and point you in the right direction for more information.

Explore and bookmark the documentation

Create a skeleton extension

 … and watch this Channel9 demo video to get an understanding of what was generated by the template.

Tweak the manifest to suit your (at this stage) assumed requirements

  • Edit the generated vss-extension.json manifest file.
  • Update the generated values for the publisher, extensionId, name, description and the baseUri as needed:

"publisher": "demo-publisher",
"extensionId": "almrangers-vsoextensions-SurfaceOwner",
"name": "Surface Owner of a file",
"description": "This is the extension simplifies the process of determining ownership",
"baseUri": https://localhost:44300/,

Explore the contribution(s)

The action starts with the user selecting one of your contribution points.

  • Peruse contribution model for an overview and contributions reference for the details.
  • We will probably be adding menu actions, but until we have the storyboard and requirements (next post) we will add a simple hub to be able to build and test.
  • Return to the manifest and a test contribution and the referenced html file following the add a hub walkthrough:

"contributions": [
"id": "Surface-Owner",
"type": "ms.vss-web.hub",
"description": "Adds a 'Hello' hub to the Code hub group.",
"targets": [
"properties": {
"name": "Hello",
"order": 99,
"uri": "action.html"

OK, so you want to click F5 in VS IDE

Once we have published and installed our extension in our VSTS account and team project collection, we can verify that the skeleton framework is sound.

  • We see our basic index page when we click F5 in Visual Studio:
  • When we go to our VSTS account, we see our contribution point:
  • We can even click on our new hub extension:

… but, we first need to define the scope of our extension before we proceed. Handing over the keyboard to our storyboard and UX master, Anisha Pindoria .

Coming up …

  • Explore the “Surface Owner” VSTS Extension – …