Demonstrating the WebView API
Go to file
Korbs 0b1d0474e9
2022-05-09 21:47:24 -04:00
src Add files via upload 2022-05-09 21:43:46 -04:00
LICENSE Add files via upload 2022-05-09 21:43:46 -04:00 Update 2022-05-09 21:47:24 -04:00
index.html Add files via upload 2022-05-09 21:43:46 -04:00
main.js Add files via upload 2022-05-09 21:43:46 -04:00
package-lock.json Add files via upload 2022-05-09 21:43:46 -04:00
package.json Add files via upload 2022-05-09 21:43:46 -04:00


This repo, demonstrating the API of Electron's WebView, is currently under development and may be missing certain functions.


According to Electron's documentation:

Electron's webview tag is based on [Chromium's webview][chrome-webview], which is undergoing dramatic architectural changes. This impacts the stability of webviews, including rendering, navigation, and event routing. We currently recommend to not use the webview tag and to consider alternatives, like iframe, Electron's BrowserView, or an architecture that avoids embedded content altogether.

Electron Webview API Demo


I recommend checking out the official docs.

What This Demos Shows

*Not added yet, but planned

**Not added yet, but planned(maybe, maybe not)

  • Navigation
    • Back
    • Forward
    • Home
    • Reload
  • Zoom
    • Zoom In*
    • Zoom Out*
    • Reset Zoom*
    • Enter Fullscreen*
  • Injection
    • CSS*
    • JavaScript* (Preload)
  • Loading Indicators*
  • Crash Screen**
  • Find*
  • Context Menu*
  • Developer Tools
  • Address Bar*
  • Useragent*

and more...

Future Plans

I want to do more advanced functions with Electron's WebView like:

Side By Side

Inspired by the Tab Tiling feature from Vivaldi, which is where you can view two tabs at once in one window. Should be mostly easy to pull off, but I'm going to need some time to figure some other stuff out.

You can view more about the Tab Tiling feature from Vivaldi.

Adaptive Background Color

Change background of the application(That being Electron itself), to the faded color of the website's theme color.

<meta name='theme-color' content='#ff0000'>

May be possible, since there is an event for this

Additional Information

Font Awesome

The icons shown at the top of the application are from Font Awesome. The app uses a Pro Kit from my Font Awesome account.

It's a good practice to actually have the icons downloaded and stored locally with your application, this way the icons can still load if the user goes offline.

Font Awesome can be downloaded. Download for Web, not Desktop