Click here to Skip to main content
15,886,110 members
Articles / Web Development / HTML
Article

How to create your own browser with JavaScript using EdgeHTML

Rate me:
Please Sign up or sign in to vote.
4.63/5 (6 votes)
5 Nov 2015CPOL3 min read 13.7K   6   3
Josh Rennert, Program Manager on the Microsoft Edge team, demonstrates how the WebView control can be used to create your own browser in Windows 10.

This article is a sponsored article. Articles such as these are intended to provide you with information on products and services that we consider useful and of value to developers

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.

Image 1

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.

Image 2

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 and engineers 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:

In-depth tech learning on Microsoft Edge and the Web Platform:

More free cross-platform tools & resources for the Web Platform:

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
Josh Rennert is a Program Manager on the Microsoft Edge team.

Comments and Discussions

 
QuestionBut for how long will this be supported? Pin
Member 80071558-Nov-15 1:14
Member 80071558-Nov-15 1:14 
Question[My vote of 1] Great post but.... Pin
Your Display Name Here6-Nov-15 11:02
Your Display Name Here6-Nov-15 11:02 
QuestionGreat goal, but...you forget many developers Pin
Mario Vernari5-Nov-15 4:04
Mario Vernari5-Nov-15 4:04 
I wish have had this component (the WebView) some years ago, when we need a pretty decent WPF component able to display HTML pages, but also WITHOUT the limitations of the native WebBrowser (just a IE wrapper built on COM).
The (only) answer for us was Chromium: more specifically, CefSharp.
https://github.com/cefsharp/CefSharp[^]
At the moment, we have tens of thousands of C#/WPF LOC, several well tested UI custom components, and many more about that.
Now, a question to you: why there's almost no support for WPF? Why don't you provide some bridge/interop/whatever solution to leverage the old code (is it really old?) with those new parts?

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.