Building your own Windows 10 Web Browser
- Posted: Sep 02, 2015 at 6:00AM
Seems like with every Windows release, there's a set of sample apps that wrap the browser, showing you how you can add your own chrome (as in UI) to it, adding features and behaviors, creating your own web browser.
Windows 10 is no different. Then again it is, because this time around, it's Microsoft Edge that powers the new Build Your Own Web Browser app.
Over the past several months, we have made numerous improvements to the Microsoft Edge rendering engine (Microsoft EdgeHTML), focusing on interoperability with modern browsers and compliance with new and emerging standards. In addition to powering Microsoft Edge, EdgeHTML is also available for all Universal Windows Platform (UWP) apps via the WebView control. Today we would like to demonstrate how the WebView control can be used to create your own browser in Windows 10.
The crux of the functionality stems around the powerful WebView control. Offering a comprehensive set of APIs, it overcomes several of the limitations which encumber iframes, such as framebusting sites and document loading events. Additionally, the x-ms-webview, how one declares a WebView in HTML, provides new functionality that is not possible with an iframe, such as better access to local content and the ability to take screenshots. When you use the WebView control, you get the same web platform that powers Microsoft Edge.
Get the Sample Code
Getting the code can be fast and easy, and you can be up and running with your own version is just a few minutes.
If you're not me anyway.
If you grab the code and get an error like this (like I did);
Microsoft Visual Studio
The 'ApacheCordovaToolsPackage' package did not load correctly.
The problem may have been caused by a configuration change or by the installation of another extension. You can get more information by examining the file 'C:\Users\Greg\AppData\Roaming\Microsoft\VisualStudio\14.0\ActivityLog.xml'.
Restarting Visual Studio could help resolve this issue.
Continue to show this error message?
Then check out this answer to The 'ApacheCordovaToolsPackage' package did not load correctly.
I did the unselect/select procedure and it solved the problem for me and I was able to load, compile and run the project with no problems.
What's great is how the GitHub readme goes into some nice development detail on each of the major features.
The user interface consists of ten components:
- Title bar
- Back button
- Forward button
- Refresh button
- Address bar
- Share on Twitter button
- Favorites button and menu
- Settings button and menu
- WebView control
Harnessing the WebView control<div class="navbar">
<!-- ... -->
When you use the WebView control, you get the same web platform that powers Microsoft Edge.
Developing the browser
We will be using fifteen of the x-ms-webview APIs. All but two of these members handle the page navigation in some capacity. Let’s see how we can hook into these APIs to create each UI component.
Hooking up the back and forward buttons
When you invoke a back button, the browser returns to an earlier page in the browser history, if available. Similarly, when you invoke a forward button, the browser returns to a later page in the browser history, if available. In order to implement this logic, we use the goBack() and goForward() methods, respectively. These functions will automatically navigate to the correct page in the navigation stack.
After every page navigation, we will also update the current state to stop the user from navigating further when they reach either end of the navigation stack. This will disable the back or forward buttons when the canGoBack property or the canGoForward property resolves
Hooking up the address bar
At a very high level, implementing the address bar appears quite simple. When a URL is entered in the textbox, pressing Enter will call the navigate() method using the address bar input value as its parameter.
However, today’s modern browsers have increased the amount of functionality for added convenience to the user. This adds some complexity to the implementation, depending on the number of scenarios you intend on accommodating.
Displaying the favicon
Acquiring a favicon can be tricky, as there are several ways in which it can be displayed. The easiest route would be to check the root of the website for a file named "favicon.ico". Though, some sites are actually in the subdomain and may have a different favicon. For example, the favicon for “microsoft.com” is different than the favicon for “windows.microsoft.com”. In order to minimize the ambiguity, another route would be to check the markup of the page for a link tag within the document head with a “rel” attribute of “icon” or “shortcut icon”. We use the invokeScriptAsync() method to inject script into the WebView control, which will return a string if successful. Our script will search for all elements in the hosted page with a link tag, check if the ref attribute contains the word “icon”, and, if there is a match, return the value of the “href” attribute back to the app.
Adding keyboard shortcuts
Unlike the features we have already covered, implementing keyboard shortcuts requires a small amount of C++ or C# code to create a Windows Runtime (WinRT) component.
Customizing the browser
Now that we have incorporated the key WebView APIs, let’s explore how we can customize and polish our user interface.
Branding the title bar
Leveraging Windows Runtime APIs, we can use the ApplicationView.TitleBar property to modify the color palette for all components in the app title bar. In our browser, we modify the colors on app load to match the background color of the navbar. We also modify the colors when either of the menus are open to match the background color of the menu. Each color must be defined as an object of RGBA properties. For convenience, we created a helper function to generate the correct format from a hexadecimal string.
If you're on Windows 10 and think you can create a better user interface for Microsoft Edge, this project is a great starting point!