How to Create Your Own Browser with JavaScript Using EdgeHTML
This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
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. In this tutorial, I’d like to demonstrate how the WebView control can be used to create your own browser in Windows 10. If you’re on Mac, you can always try one of our virtual machines or duel-boot install an Insider build too.
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.
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
You can view the full set of sample code in our repo on GitHub. You can also demo the browser live by installing the app from the Windows Store, or by deploying the Visual Studio solution.
Try it out
With the WebView control, we were able to create a simple web browser using standard web technology in just an afternoon. We look forward to seeing what you build with Windows 10!
More hands-on with Web Development
This article is part of the web development series from Microsoft tech evangelists on practical JavaScript learning, open source projects, and interoperability best practices including Microsoft Edge browser and the new EdgeHTML rendering engine.
We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.modern.IE:
- Scan your site for out-of-date libraries, layout issues, and accessibility
- Use virtual machines for Mac, Linux, and Windows
- Remotely test for Microsoft Edge on your own device
- Coding Lab on GitHub: Cross-browser testing and best practices
In-depth tech learning on Microsoft Edge and the Web Platform from our engineers and evangelists:
- Microsoft Edge Web Summit 2015 (what to expect with the new browser, new supported web platform standards, and guest speakers from the JavaScript community)
- Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)
- Advancing JavaScript without Breaking the Web (from Christian Heilmann)
- The Edge Rendering Engine that makes the Web just work (from Jacob Rossi)
- Unleash 3D rendering with WebGL (from David Catuhe including the vorlon.JS and babylonJS projects)
- Hosted web apps and web platform innovations (from Kevin Hill and Kiril Seksenov including the manifold.JS project)
More free cross-platform tools & resources for the Web Platform:
