Problems deploying SecureInput MS Edge Extension native messaging sample - windows-10-universal

Question

I am trying out SecureInput extension sample that demonstrates NativeMessaging capabilities in MS Edge browser extensions and I running into problems deploying the extension after building using VS community edition 2017. I don’t have Universal Windows Platform Apps development experience, so I apologize if there is a pretty obvious answer I am not aware of. But following readme.md in the sample doesn’t work, so posting this question here...
https://github.com/MicrosoftEdge/MicrosoftEdge-Extensions-Demos/tree/master/SecureInput
Steps followed…
Turned on developer mode in “Use Developer Features”
Turned on Enable extension developer features in Edge browser’s about:flags.
Downloaded the sample as a zip file to the local machine.
Copied SecureInput.html to my local webserver
Loaded SecureInput.sln in VS
community edition 2017 Out of two options.. InProc or OutOfProc, I
wanted to try InProc. So needed to select Project in
NativeMessagingHostInProcess in Build Configuration manager. Other
settings used... Debug - configuration; Any CPU – Active solution
platform; NativeMessagingHostInProcess – x64 project platform as I
was using 64 bit Windows and edge running as a 64 bit process as
well; Left rest as default.
With Debug Configuration and Any CPU Solution platform built the entire solution.
Deployment Summary
Built Entire SecureInput solution.
Installed AppX package by running
Add-AppxPackage -register [PathtoSecureInputSolutionFolder] NativeMessagingHostInProcess\bin\x64\Debug\AppxManifest.xml
No errors during building or while running Add-AppXPackage from elevated Power shell prompt.
Expected: At this point EdgeBrowser->MoreOptions->Extensions should list extension installed by AppX package (Deployment Summary/Step 2). =>> Doesn’t happen.
Few other details
I am using 64 bit Win 10 creators build (1703 – OS build 16063.128)
I am suspecting Add-AppxPackage failed to add the extension silently. Verbose flag doesn’t give me any clues either.
Get-AppXPackage shows newly added AppX package.
Name : ae24a957-5239-43b2-a36c-b96805a58ade
Publisher : CN=msft
Architecture : X64
ResourceId :
Version : 1.0.0.0
PackageFullName : ae24a957-5239-43b2-a36c-b96805a58ade_1.0.0.0_x64__2yx4q2bk84nj4
InstallLocation : [PathtoSecureInputSolutionFolder] \NativeMessagingHostInProcess\bin\x64\Debug
IsFramework : False
PackageFamilyName : ae24a957-5239-43b2-a36c-b96805a58ade_2yx4q2bk84nj4 PublisherId : 2yx4q2bk84nj4
IsResourcePackage : False
IsBundle : False
IsDevelopmentMode : True
IsPartiallyStaged : False
I would like to know if anyone got this sample working. If Microsoft Edge folks are monitoring stackoverflow, I really appreciate if someone can jump in to help your early adopters like me. :-)

Answer 1

With offline help from Chee Chen, we were able to figure out why SecureInput was not working. My sincere thanks to him for going out of his way to help. In my specific case, here are the things that went wrong.
URL manifest.json gives permissions to is case sensitive. I had a typo when I first entered the URL in edge browser very first time.. I typed in as SecureInput.html. Try cleaning the cache if you see that using lower case secureinput.html doesn't help.
When instructions didn't work right first time, I used Add-AppxPackage way of deploying the Extension. While doing that, I picked AppxManifest file in NativeMessagingHostInProcess\bin\x64\Debug\AppxManifest.xml instead of NativeMessagingHostInProcess\bin\x64\Debug\AppX\AppxManifest.xml. Something to watch out for and if you make the same mistake, make sure you uninstall the appx package completely and start all over again.
So here are my supplemental instructions for others trying the sample :-)
Make sure you selected right Platform as per your target test machine. Edge runs as 64 bit process so your extension needs to be targeted at that platform.
Make sure right AppServiceName is selected in PasswordInputProtection->Program.cs and Extension->background.js
I think PasswordInputProtection.csproj has a hardcoded Program files (x86) in its path, which will break if you try the sample on 32 bit machine. Edit the project file in notepad and fix it before you try.
Ensure NativeMessagingHost project's Output paths are correctly configured... It needs to be "bin\[Platform]\[Configuration]\AppX\" and not "bin\[Platform]\[Configuration]\"
Avoid typos if you can, because I see very little feedback or verbose logs on why things are not working.

Answer 2

Have you tried following the deployment steps in the documentation? The actual steps and ordering is important:
Build and deploy the NativeMessagingHostinProcess UWP app.
This will generate:
Necessary binaries and files needed for the UWP app.
The AppX folder.
The AppXManifest.xml based on the content of package.manifest. (The content of package.manifest in this sample has been edited to include the necessary entries for Edge extensions).
Build the PasswordInputProtection Desktop Bridge.
This will:
Build the binaries for this project
Trigger a post-build event that will copy the output of the exe to the AppX folder and copy the Extension folder to the AppX folder.
Now that the files are all ready to go, you will need to register the AppX.
There are two ways to accomplish this:
Run Add-AppxPackage from PowerShell: Add-AppxPackage -register [Path to AppX folder]\AppxManifest.xml
OR
Deploy the NativeMessagingHostInProcess project. Visual Studio will run the same PowerShell script to register the AppX from the folder.