VMware vSphere Taskbar Shortcuts Unleashed - profile switcher isolated and uncluttered Chrome Browser UIs act like native Windows apps!

Posted by Paul Braren on Mar 27 2017 (updated on Jul 28 2017) in

It's no secret that VMware is moving away from the Windows/C#-based vSphere Client and the Adobe Flash-based vSphere Web Client over to an HTML5/JavaScript combo that is far faster, and much more universal. These web UIs arrived in the form of the VMware Host Client (source) that's baked right in to ESXi 6.0U2 or later, and the new vSphere Client (source) that is baked right into VCSA 6.5 or later. It's about time, and no secret that I hope this transition period is over with as quickly as possible, see also my clumsily-titled:

In VMware vSphere 6.5, missing functions in speedy HTML5 Web UI leaves us saddled with vSphere Web Client (Flash), C# Client still connects to hosts, but not to vSphere
Nov 16 2016

All-vSphere-Windows-10-Taskbar-shortcuts-MAR-27-2017-by-TinkerTry — Click twice for a nice close look at all those UIs, best viewed fullscreen at 1920x1080. Notice how they appear like Windows Applications, each with their own Taskbar shortcut.

But there's an issue with using a browser for all VMware vSphere admin. The possibility of extensions messing things up, and the vertical real estate. Let me illustrate with an animation that demonstrates the benefits of reduced clutter, and what up to 73 extra pixels vertically really means.

It looks like you have JavaScript disabled. Click here to view the video above.

Benefits

The benefits of having such launch icons handy are many, especially for home lab enthusiasts with one server, looking for a way to tidy up and get organized:

single click access, anytime, rapidly locating the UI you want, without having to hunt through tabs
avoid accidentally opening multiple browser tabs to the same UI, avoiding a waste of system resources
hover-help helps you distinguish your various shortcuts
better use of visual real estate, with:
- no bookmarks bar
- no Chrome tab taking up more precious vertical real estate
- no URL bar (those URLs are rather uninformative and long in vSphere admin UIs anyway)
- no distracting extension icons
- no little shortcut arrow thingies on the taskbar icons, they look like installed Windows applications

Backstory

Chrome's been doing some spring cleaning lately:

The old Add a website as an app aka Create Application Shortcut feature is gone, and the chrome://flags trick to get it back doesn't work
Add to taskbar is also gone.

Are they really gone?

Turns out you can get a little creative with the newer Add to desktop option. The next tweak was to get around Chrome's removal of the Application Shortcut feature with some simple editing of the shortcut properties. This combination gets Chrome to cooperate, and I suspect you'll love the results. I know I do! Well worth just a few minutes of your time.

These shortcuts will make this period of transition for VMware's many UIs a bit easier to cope with. Eventually, you should be able to do everything through HTML5 UIs, but we're not there yet.

Should you not like to use your taskbar, and are more of a folder person, no problem. Should you like Shortcut keys assignments for these launcher icons, that's easy to do to, just go to the properties of the shortcut, and use the Shortcut key field. These instructions can be altered for your needs.

Prerequisites

These instructions were tested with:

Windows 10 Pro 64 bit Version 1607 OS Build 14393.953
Windows 10 Pro 64 bit Creators Update Version 1703 OS Build 15063.0, Build 15063.rs2_release.170317-1834
Chrome Version 57.0.2987.98 (64 bit), but note that it still uses the Program Files (x86) directory, these instructions should work with 32 bit Chrome as well
VMware vSphere VCSA 6.5.0b (any 6.0 version or later should behave similarly)
ESXi 6.5.0a (any 5.5 version or later should behave similarly)

My less snappy original title was rather informative, but also rather long:
How to create a Chrome Application Shortcut in your Windows taskbar for vSphere Web Client and vSphere HTML5 Web Client, appifying your browser's UI!

Here's a more snappy title, more link-baity:
Use Chrome like a boss, for VMware admin, shortcuts that transmogrify your Web UIs into apps!'

Once you get the hang of it, you may fall so in love with these icons that you go forward with creating a few more for frequently used browser UIs like NASs, routers, etc. Don't forget to drop a quick comments below to let us know how this worked out for you.

Enjoy your newfound productivity!

Instructions overview

If you have any issues with these written intructions, please watch the detailed video below before leaving questions/comments.

download and install Chrome, consider making it your default browser
click on the create a user icon near the top-right of the Chrome window, click 'Manage People' then 'ADD PERSON' naming it vSphere and choosing a color you like, which creates separate extension-free environment just for your vSphere sysadmin UIs
maximize the Chrome window, turn on the bookmarks bar with Ctrl+Shift+B, then close Chrome to save window size
Disable the pop-up blocking for the 'VMware Host Client' and the 'Welcome to vCenter' UIs
launch Chrome again, then launch tabs with each of the following 5 UIs using FQDN (Fully Qualified Domain Names), substituting your FQDN for the ".lab.local" demonstrated, authenticating into each of these UIs:
a. Welcome to vCenter
https://vcsa.lab.local
where vcsa.lab.local is replaced by the FQDN of your VCSA appliance (or vCenter)
b. VMware Host client
https://xd-1541-5028d.lab.local
where xd-1541-5028d.lab.local is replaced by the name of your ESXi host(s), repeat for each host you have in your lab
c. VAMI
https://vcsa.lab.local:5480
e. vSphere Web Client (Flash, full functionality)
https://vcsa.lab.local/vsphere-client
f. vSphere Client (HTML5 UI, partial functionality)
https://vcsa.lab.local/ui
you should get a save password prompt, to optionally save your username/password (warning - very dangerous to do this, easy for anybody to extract this key info to use for nefarious purposes, especially easy if your filesystem isn't encrypted)
in Chrome, in both the VMware Host Client and the Welcome to vCenter UIs, turn off pop-up blocking by left-clicking on the word "Secure" to the left of the https:// in the address bar area
right-click VBS from bit.ly/fix65cert
which is a shortened URL from Florian's Grehl's article at:
virten.net/2017/02/script-to-add-vsphere-6-5-vmca-root-certificate-to-trusted-certs-store/
making sure to enter in your FQDN for your VCSA
optionally download and install the latest VMware vSphere Client (C#) for direct ESXi host legacy administration (it won't let you log in to vCenter anymore, this is not shown in the video)
optionally download VMRC (VMware Remote Console) from vmware.com/go/download-vmrc, install, then test various console connection types to a VM to ensure functionality (I skipped this important step in the video)
create shortcut icon in bookmarks bar for each of the 5 web UIs
create application shortcuts on desktop
a. click 3 dot Chrome Settings icon
b. click 'More tools >'
c. click 'Add to desktop'
d. turn on 'Open as window' checkbox
pin to taskbar
right-click on each desktop icon you just created, choose 'Pin to taskbar'
optionally delete desktop shortcuts
your taskbar shortcuts will continue to work just fine

Step-by-step instructions Video

In this video below, I used the very latest code, ESXi 6.5.0a and VCSA 6.5.0b.

In this video, I explain how I create the ultimate VMware sysadmin environment out of a fresh copy of Windows 10, showing the creation of all 5 of these special icons.

The new video above is intended to replace the video I published back Nov 18 2016, and all the articles about his listed below.

Apr 23 2017 Update

If you're a Mac OS or OS X user, and you're wishing your Chrome could be convinced to do similar magic tricks, Fluid may meet your needs:

Fluid
Turn Your Favorite Web Apps into Real Mac Apps.

I don't currently have an easy way to test Max OS, but if you have luck with Fluid, let us know with a comment below.

Jul 04 2017 Update

Now that you've got your handy shortcuts created, you're going to want to read this article next, especially for those times when the URL bar isn't hidden:

How to import your VCSA certificate so ALL VMware vSphere browser security warnings go away in Windows 10

Jul 28 2017 Update

You may run into an issue where a Chrome Shortcut or bookmark that you created previously doesn't work after an upgrade to a newer VCSA, displaying only a blank white window. Or you may just have trouble logging in and seeing anything in https://vcsa.lab.local/ui. I noticed this right after upgrading to 6.5 U1 (Update 1) the easy way, and the fix to this issue was easy too.

The fix

in Chrome Browser, open the following tab by copying the below line into your clipboard, then opening a new tab and pasting into your URL field:
chrome://settings/content/cookies
scroll down to All cookies and site data
under the Search cookies field, type vcsa, replacing vcsa with the name or IP of your VCSA appliance)
it's easiest to simply click on REMOVE ALL SHOWN, but you can also try to open each section and delete just the cookies for URLs that include vcsa/ui