Building your own Windows 10 Web Browser

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.

Creating your own browser with HTML and JavaScript

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.

Using standard web technology including JavaScript, HTML, and CSS we created a sample UWP application which hosts the WebView and provides basic functionality such as navigation and favorites. These same techniques can be used in any UWP application to seamlessly integrate web content.

Animation showing favorites menu in custom browser application

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.

I installed VS 2015 on release day and there were some JavaScript/Cordova issues, now since fixed.

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?
---------------------------
Yes   No  
---------------------------

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.

image

What's great is how the GitHub readme goes into some nice development detail on each of the major features.

MicrosoftEdge/JSBrowser

This project is a tutorial demonstrating the capabilities of the web platform on Windows 10. The browser is a sample app built around the HTML WebView control, using primarily JavaScript to light up the user interface. Built using Visual Studio 2015, this is a JavaScript Universal Windows Platform (UWP) app.

In addition to JavaScript, HTML and CSS are the other core programming languages used. Some C++ code is also included to enable supplemental features, but is not required to create a simple browser.

Additionally, we’re taking advantage of the new ECMAScript 2015 (ES2015) support in Chakra, the JavaScript engine behind Microsoft Edge and the WebView control. ES2015 allows us to remove much of the scaffolding and boilerplate code, simplifying our implementation significantly. The following ES2015 features were used in the creation of this app: Array.from(), Array.prototype.find(), arrow functions, method properties, const, for-of, let, Map, Object.assign(), Promises, property shorthands, Proxies, spread operator, String.prototype.includes(), String.prototype.startsWith(), Symbols, template strings, and Unicode code point escapes.

User interface

The user interface consists of ten components:

  • Title bar
  • Back button
  • Forward button
  • Refresh button
  • Favicon
  • Address bar
  • Share on Twitter button
  • Favorites button and menu
  • Settings button and menu
  • WebView control

...

Harnessing the WebView control

<div class="navbar">
<!-- ... -->
</div>
<x-ms-webview id="WebView"></x-ms-webview>

Introduced for JavaScript apps in Windows 8.1, the WebView control—sometimes referred to by its tag name, x-ms-webview—allows you to host web content in your Windows app. Available in both HTML and XAML, the x-ms-webview comes with a powerful set of APIs, which overcomes several of the limitations that encumber an iframe, such as framebusting sites and document loading events. Additionally, the x-ms-webview 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.

WebView flowchart

...

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 false, respectively.

...

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.

Keyboard shortcuts flowchart

...

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.

...

[Click through to read the entire thing, get the code, etc]

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!



Tags:

Follow the discussion

  • Oops, something didn't work.

    Getting subscription
    Subscribe to this conversation
    Unsubscribing
    Subscribing

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.