Useful Tips

How to create your own browser for Windows 10 in HTML and JavaScript

Pin
Send
Share
Send
Send


I really wanted to write my browser, with my chips, etc. So, I tried to use the standard WForms component, but it uses the IE kernel, which is also obsolete.
I tried using CefSharp, which works with Chromium, but eats more RAM than I would like.

So, I would like to know how to write my core, if you know books devoted to these topics, some examples, articles or lessons - I will be extremely grateful to you.

* If this is not possible to implement in C #, then I will be glad all the same books, lessons, examples and articles in C ++.

Thank you all in advance for your answers.

Create a browser

As mentioned above, the browser is based on the WebView control for HTML, and JavaScript is mainly used to create and revitalize the user interface. The project was created in Visual Studio 2015 and is a universal Windows-based JavaScript application.

In addition to JavaScript, we also used some HTML and CSS, as well as some lines of C ++ code to support keyboard shortcuts, but this is not required in the simple case.

We also take advantage of the new features of the new ECMAScript 2015 (ES2015), supported by Chakra, a JavaScript engine running on Microsoft Edge and a WebView control. ES2015 allowed us to reduce the amount of generated and template code, thereby greatly simplifying the implementation of the idea. We used the following ES2015 features when creating the application: 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 includes the following ten components:

  • Headline
  • Back button
  • Forward button
  • Refresh button
  • Favicon
  • Address bar
  • Twitter Button
  • Button and favorites menu
  • Button and settings menu
  • WebView Control

Additional functionality

We also implemented several additional features to make working with the browser even more enjoyable:

  • Keyboard shortcuts: pressing F11 switches to full-screen mode, ESC exits full-screen mode, Ctrl + L selects the address bar,
  • CSS transitions for menu animations
  • Cache management
  • Manage your favorites
  • Analysis of input addresses - for example, “bing.com” translates to http (s): //bing.com, and “seahawks” searches for Bing
  • Automatically change the highlighting of the address bar with focus
  • Responsive Design

Using WebView

Introduced for JavaScript applications in Windows 8.1, the WebView control, sometimes also referred to by the tag name x-ms-webview, allows you to host web content inside your Windows application. It is available for both HTML and XAML. To get started, just place the corresponding element in the page code.

Button control back and forth

When you press the back button, the browser returns the previous page from the browser history, if available. Similarly, when you press the forward button, the browser returns the next page from the history, if it is also available. To implement this logic, we use the goBack () and goForward () methods, respectively. These functions will automatically navigate to the correct page from the navigation stack.

After going to a certain page, we also update the current state of the buttons to prevent the “possibility” of navigation when we reach one of the ends of the navigation stack. In other words, we turn off the navigation buttons forward or backward, checking the properties of canGoBack or canGoForward for equality false.

Manage update and stop buttons

The update and stop buttons are slightly different from the rest of the navigation bar components in that they use the same place in the UI. When the page loads, clicking on the button will stop loading, hide the “progress ring” and display the refresh icon. Conversely, when the page is loaded, clicking on the button will start updating the page and (in another part of the code) will display the stop icon. We use the refresh () or stop () methods depending on the current conditions.

Address Bar Management

In general, the implementation of the address bar can be very simple. When the URL is entered into the text field, pressing Enter will call the navigate () method, using the contents of the input element of the address bar as a parameter.

However, modern browsers have gone much further and introduce additional functionality for the convenience of users. This adds some complexity to the implementation - and it all depends on the scripts that you want to support.


Here is an example of a script that we tried to implement. Suppose the address “microsoft.com" is entered in the address bar. The address is not complete. If you pass this value to the navigate () method, it will fail. Our browser should know that the URL is not complete, and be able to determine which protocol to substitute correctly: http or https. Moreover, it is possible that the value entered was not intended by the address. For example, we could enter the value “seahawks” in the address bar, hoping that, like in many browsers, the bar also works as a search field. The browser must understand that the value is not an address, and try to “find” it in the search engine.

Mapping favicon

Requesting favicon is a non-trivial task, as there are several ways the icon can be set. The easiest way is to check the root of the website for the presence of the favicon.ico file. However, some sites may be on a subdomain and therefore have an excellent icon. For example, the icon on “microsoft.com” is different from the icon on “windows.microsoft.com”. To avoid ambiguity, you can use another method - check the page layout for a link-text inside the document with a rel-attribute equal to “icon” or “shortcut icon”.

We use the invokeScriptAsync () method to insert a script inside the WebView control that will return a string if successful. Our script looks inside the page for all elements with a link-tech, checks if the rel-attribute contains the word “icon”, and if it matches, returns the value of the “href” attribute back to the application.


As mentioned above, we use in our code features from the new ES2015 specification. You may have noticed the use of arrow notation in many of the examples above, as well as a number of other features. An embeddable script is a great example of code improvement achieved through ES2015 support.

Keyboard shortcuts support

Unlike the capabilities that we have implemented above, supporting keyboard shortcuts will require us to have a small piece of C ++ or C # code wrapped in the form of a Windows Runtime (WinRT) component.

To determine the pressing of hot keys for performing certain actions, for example, to select the address bar when pressing the Ctrl + L combination or switch to full-screen mode by F11, we need to insert another script in WebView. To do this, we use the invokeScriptAsync () method, which we already mentioned above. However, we need to somehow report back to the application layer when certain keys are pressed.

Using the addWebAllowedObject () method, we can set the method for the injected code through which it will be possible to pass keystrokes to the JavaScript application layer. It is also important to understand that in Windows 10, the WebView control runs in a separate thread. We need to create a dispatcher that will send events to the UI stream so that the application layer can handle them.

Header Branding

Using the Windows Runtime API, we can change the ApplicationView.TitleBar property to customize the color palette of all application header components. In our browser, when loading the application, we change the colors so that they match the navigation bar. We also update the colors when opening the menu to match the background of the menu. Each color must be defined as an object with RGBA properties. For convenience, we created a helper function that generates the desired format from a hexadecimal string record.

Other features

An indication of progress, as well as a menu of settings and favorites, use CSS transitions for animation. From the settings menu, temporary web data can be cleared using the clearTemporaryWebDataAsync () method. And in the favorites menu, the displayed list is stored in a JSON file in the root folder of the roaming application data warehouse.

Pin
Send
Share
Send
Send