How to hide quick add panel Backlogs Items using VSTS extension?

I want to make an VSTS extension that can hide the quick add panel backlog items when loading the page.

The extension is made to target TFS 2015 update 2.

I have run this code but nothing happens.

(action.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Action Sample</title>
</head>
<body>
    <script src="scripts/jquery-2.2.3.min.js"></script> 
    <script src="scripts/VSS.SDK.min.js"></script> 
    <script>
      VSS.init();
      var menuContributionHandler = (function () {
      "use strict";
         return {
         execute: function (actionContext) {
             console.log("extension running...");
             $(".panel-region").hide();
             console.log("extension running...Done");                 
         }
     };
 }());

 // Associate the menuContributionHandler object with the "myAction" menu contribution from the manifest.
     VSS.register("myAction", menuContributionHandler);
    </script>
    <div>
        The end user doesn't see the content on this page.
        It is only in the background to handle the contributed menu item being clicked.
</div>
</body>

(vss-extension.json)

{
 "manifestVersion": 1,
 "id": "targetWork",
 "version": "0.1.18",
 "name": "targetWork",
 "description": "targetWork.",
 "publisher": "ms-samples",
 "public": false,
 "categories": [
   "Developer samples"
 ],
 "links": {
   "learn": {
     "uri": "https://github.com/Microsoft/vso-extension-samples"
   }
 },
 "icons": {
   "default": "images/fabrikam-logo.png"
 },
 "targets": [
   {
     "id": "Microsoft.VisualStudio.Services"
   }
 ],
 "branding": {
   "color": "rgb(190, 39, 3)",
   "theme": "dark"
 },
 "files": [
   {
     "path": "scripts",
     "addressable": true
   },
   {
     "path": "images",
     "addressable": true
   },
   {
   "path": "action.html",
         "addressable": true
       }
     ],
     "contributions": [
       {
         "id": "myAction",
         "type": "ms.vss-web.action",
         "description": "Run in Hello hub action",
         "targets": [
           "ms.vss-work-web.work-item-context-menu",
           "ms.vss-work-web.backlog-board-card-item-menu",
           ".work-hub-group",
           "ms.vss-web.project-hub-groups-collection",
           ".backlogs"
         ],
         "properties": {
           "text": "Run in Hello hub",
           "title": "Run in Hello hub",
           "icon": "images/icon.png",
           "groupId": "Explore",
           "uri": "action.html"
         }
       }
     ]
   }

I don't see that extension is loaded when looking at console window of the browser. So I think that there is something wrong with my use of targets.

So my biggest issue is that I can't understand how the target should be specified.

I have been looking at the toturials related to this page(https://www.visualstudio.com/en-us/integrate/extensions/reference/targets/overview) and tried them out and I can get them to work. But nothing mentioned about how to customize the UI of TFS webaccess. At least nothing that I can use for my case.

Thanks

Edit

Thanks to jessehouwing, this question has been answered on this stackoverflow post

The new style extensions (marketplace) are sandboxed and can only extend the UI in the way intended, e.g. add buttons, menu items, tabs, but they have very, very limited ways of changing the existing UI. Giving them access to the full DOM would allow them to break out of their security context and use elevated permissions by using existing features.

What you want to do is still possible with the "Legacy Extensions"..

来源：https://stackoverflow.com/questions/37323608/how-to-hide-quick-add-panel-backlogs-items-using-vsts-extension

标签

tfs

azure-devops

tfs2015