Downloads Compatibility Release Notes Licensing Support Getting Started Configuration Samples mobileFX

WebKitX ActiveX for CEF3

This is a Visual Studio C++14 MFC/ATL ActiveX that wraps Chromium Embedded Framework (CEF3) for use with OLE/COM languages. Chromium Embedded Framework encapsulates WebKit Blink HTML5 Renderer and Google V8 JavaScript VM Engine. This is a production-grade stable component for commercial use that will truly add HTML5 features in your Desktop and Terminal Applications.

Table of Contents

Key Features

Downloads

Download complete installation package for Windows XP, 7, 8, 10 for x86 and x64 architectures. Package includes WebKitX ActiveX, CEF binaries, HTML5 Editor VB6 Sample (both source and binary) and Microsoft x86 C++ 2015 Redistributable Package v.14.0.24123.

Subscribe to New Version Notifications and Offers!
Product Details Released Architectures CEF3 Download Installation Package
WebKitX_CEF3_ActiveX_x86_v2.0.0.6206.exe
  • For 32-bit Application Development
  • Windows 7, 8, 10 (32-bit or 64-bit)
  • Terminal Ready: Windows 7 POS Edition
  • Blink HTML5 Rendering Engine
  • WebGL v1, v2
  • 4 GB RAM Recommended
  • Peper Flash Player v31.0.0.122 (32-bit)
  • 75 MB Redistributable
  • Commercial Use License
  • Bounty Support
20 Jan 2018 x86 & x64
32-bit OCX
Chromium Version: 71
Git Branch: 3578.1860
Released: Dec 2018
Download
MD5: 4f9273adf843941ee197166dc3448080
SHA-1: aa1c9d692903436fbe2eceb70a3f5989402771f6
WebKitX_CEF3_ActiveX_x64_v2.0.0.6206.exe
  • For 64-bit Application Development
  • Windows 7, 8, 10 (64-bit)
  • Terminal Ready: Windows 7 POS Edition
  • Blink HTML5 Rendering Engine
  • WebGL v1, v2
  • 8 GB RAM Recommended
  • Peper Flash Player v31.0.0.122 (64-bit)
  • 81 MB Redistributable
  • Commercial Use License
  • Bounty Support
20 Jan 2018 x64
64-bit OCX
Chromium Version: 71
Git Branch: 3578.1860
Released: Dec 2018
Download
MD5: c783d091768d7b60237b0696b6e77b9b
SHA-1: 979419e9f3c6286af37cc0b23a677b38c2d236e7
WebKitX_CEF3_ActiveX_WinXP_x86_v2.0.0.6206.exe
  • For 32-bit Application Development
  • Windows XP x86 SP3 (32-bit)
  • Windows Vista x86 (32-bit)
  • Terminal Ready: Windows XP POS & Embedded Editions
  • Tested with unofficial SP4 (Major Geeks)
  • Tested with XP POS Windows Updates up to 12/2018
  • WebKit HTML5 Rendering Engine
  • No WebGL Support
  • 2 GB RAM Recommended
  • Peper Flash Player v29.0.0.113 (32-bit)
  • 55 MB Redistributable
  • Commercial Use License
  • Bounty Support (Limited)
20 Jan 2018 x86
32-bit OCX
Chromium Version: 49
Git Branch: 2623.1401
Released: May 2016
Download
MD5: eb5cbafb7c503ea1e52cbc4185b03a2e
SHA-1: 60a331c942fc5b42fb427b4099bd86f241bfb2e2
WebKitX_CEF3_ActiveX_x86_v1.5.11.6209.exe
  • Discontinued 
  • Long Time Support (LTS) ends December 2019
  • For 32-bit Application Development
  • Windows 7, 8, 10 (32-bit or 64-bit)
  • Terminal Ready: Windows 7 POS Edition
  • WebKit HTML5 Rendering Engine
  • WebGL v1
  • 4 GB RAM Recommended
  • Peper Flash Player v29.0.0.113 (32-bit)
  • 73 MB Redistributable
  • Bounty Support (Existing Contracts Only)
20 Jan 2018 x86 & x64
32-bit OCX
Chromium Version: 64
Git Branch: 3282.1724
Released: Dec 2017
Download
MD5: b58ea851c79625c00c889e6516c6c04d
SHA-1: 01fddf0cf49cb315afc8111e76a2eee63e108e01

Legacy v1.x / 2018 Versions:
Dec 2018 - Download WebKitX version 1.5.11.3454
Nov 2018 - Download WebKitX version 1.5.11.3429
Oct 2018 - Download WebKitX version 1.5.11.3387

Compatibility

Even though the control is promoted and supported only for Visual Basic 6.0 SP6, it is compatible with any OLE/COM capable Integrated Development Environments and x86 programming language. The following programming languages and IDE are reported to be compatible with WebKitX:

Release Notes

20 Jan 2019

15 Jan 2019

7 Jan 2019

2 Jan 2019

Evaluation & Distribution

Installation

Download the setup package and install it in a place like C:\Program Files (x86)\WebKitX CEF3 ActiveX  for x86 Application Development or in C:\Program Files\WebKitX CEF3 ActiveX for x64 Application Development and you are ready to start using the component.

Evaluation

You are welcome to evaluate WebKitX for as long as you want and feel free to contact us with your questions, your suggestions and your bounties!  During evaluation, when opening a URL and at random intervals WebKitX displays a message box informing you that it is a commercial product and that it requires a License, but it wont prevent you from using all its features.

Commercial License Activation

If you own a commercial license of WebKitX ActiveX control, you need to add in your program your License Key.
Add this line in your code: WebKitX1.Activate "your@email", "yourkey"

Commercial Distribution

Creating a setup script to install WebKitX on a different computer should be straight-forward:

  1. For x86 your script must copy the files of the C:\Program Files (x86)\WebKitX CEF3 ActiveX\bin folder to the other computer.
    The destination folder is irrelevant and can be anywhere you choose.
  2. For x64 your script must copy the files of the C:\Program Files\WebKitX CEF3 ActiveX\bin folder to the other computer.
    The destination folder is irrelevant and can be anywhere you choose.
  3. For x86 your script must run Microsoft Visual C++ 2015 Redistributable Package (x86) for the Windows OS and Service Pack bundle of the other computer.
    For detailed information please see the WebKitX Runtime Dependencies paragraph above.
  4. For x64 your script must run Microsoft Visual C++ 2015 Redistributable Package (x64) for the Windows OS and Service Pack bundle of the other computer.
    For detailed information please see the WebKitX Runtime Dependencies paragraph above.
  5. Your script must register WebKitX ActiveX into the Windows Registry using this command: regsvr32 /s WebKitXCEF3.ocx
  6. If your product does not use Chrome DevTools, you may skip devtools_resources.pak to decrease size.
  7. If your product uses Flash Player you should add Pepper Flash Player.

WebKitX Runtime Dependencies

WebKitX requires Microsoft C++ 2015 Runtime. During installation WebKitX setup will automatically install Microsoft C++ 2015 Redistributable Package v.14.0.24123 for the following list of Windows Operating Systems:

WebKitX Licensing

Desktop Application License

In a nutshell, a single License allows you to develop an unlimited number of Desktop Applications linked with WebKitX ActiveX control and distribute them freely to an unlimited number of your customers. The license excludes specific terminal-based applications that are subject to Terminal Application License below.

Product Bundle Compatibility Commercial Use Price Buy Now
WebKitX ActiveX x86 v2.x (32-bit ActiveX) Windows 7, 8, 10 Yes £ 599
WebKitX ActiveX x64 v2.x (64-bit ActiveX) Windows 7, 8, 10 Yes £ 999
WebKitX ActiveX x86 v2.x (32-bit ActiveX for Windows XP) Windows XP, Vista Yes £ 999

Upgrade Discount from Version 1.x

Version 1.x Customers are entitled to 20% upgrade discount to Version 2.x at any time within 2019. Please contact info@mobilefx.com to request your upgrade. In version 1.x WebKitX ActiveX was shipped in two editions, the Browser and the Editor. In version 2.x the control offers both functions in a single executable with no API restrictions.

Do I need additional Licenses?

If your application is installed and executed on Windows Desktop operating systems such as Windows XP, Vista, 7, 8, 10 and Windows Server editions, then you only need the Desktop Application License; to be absolutely clear about this, if your application is installed and executed on Windows Desktop operating systems such as Windows 7, 8, 10 and Windows Server editions, then you do not need Terminal Licenses.

You will need Terminal Licenses only if your application will be installed and executed on Windows Embedded operating systems, or executed under a Terminal Server.

Terminal Application License

Complementary to Desktop Application License are Terminal Licenses

A Terminal License is required if your application is deployed on a  Windows Embedded operating system or under a Terminal Server. A Terminal License must be obtained per terminal, on top of the Browser or Editor license. There are (3) types of terminal applications distinguished in the licensing terms:

The Point of Sales Terminal License is the General Purpose Terminal License for all terminal applications not explicitly stated in the list above.

Please contact us for Terminal License Volume Quotation.


Terminal License Commercial Use TermsIndicative Annual
OPEX Price
Volume License Quotation
Video Lottery Terminal License Yes CAPEX or OPEX£ 5
Contact us
Digital Signage Player License Yes CAPEX or OPEX£ 3
Contact us
Point of Sales Terminal License Yes CAPEX or OPEX£ 1
Contact us

Terminal Application License Premium Support Services

License Agreement

Please read carefully our license agreement and do not hesitate to contact us if you have questions, or if you need to negotiate special closures. 
mobileFX Software End-User License Agreement for WebKitX ActiveX Control

Ordering via Purchase Order (PO)

Alternative to automated PayPal order processing and only for company, school or university purchases, we offer a manual order processing and payment method via Purchase Order and IBAN wire transfer. Please create a Purchase Order (PO) document indicating the Software Name, Software EditionLicenses Quantity and/or Support Vouchers Quantity you wish to purchase. You must also provide company, school or university name, address, telephone and contact details. If your company, school or university is registered in a European Union member country you must provide in your PO your VAT number, if applicable. Please forward your PO to info@mobilefx.com and upon processing you will receive payment instructions for IBAN Wire Transfer.

The typical process is:

  1. Send us a PO with the Software Edition, qty, your company, school or university details.
  2. We reply with quotation PDF and a Quotation Number.
  3. Your company makes the payment through IBAN wire transfer with the Quotation Number in description field.
  4. The Activation Keys are generated to Company Name. If you need them bound to an email, please specify this in PO.
  5. We send you the Activation Keys printed on the VAT invoice PDF.

Let us know if something different is required in the steps above.

Please do not hesitate to contact us for clarifications and assistance.

Support Services

What is Support Voucher / Bounty?

If you desperately need a new feature implemented in WebKitX or immediately need a hotfix and can't wait until next release, you can contact us at info@mobilefx.com and negotiate with us a price, for which we will stop what we do and take care of what you need! The service is called a Bounty and applies only to existing Customers; for any edition of the ActiveX but only for its latest version (we do not branch per customer).

Just send us an email with what you need and our Account Manager will pass your request to our Tech Lead for Effort Estimation along with Technical Specs of the works to be done. Effort Estimation is in man hours and it is different from Duration. For example, to add a feature it might take our experts 8 hours to implement, but because we work on Sprints we might need a duration of one week to deliver.

The catch is that you participate in the process, being the primary Beta Tester! This phase is called User Acceptance Testing (UAT) and during this period you receive code-locked prototype revisions and provide us with valuable feedback, such as UAT observations and Defects. Once UAT is completed and you are satisfied with the result, you release us from the Bounty and we provide you with an Unlock Code as a token of our appreciation.

For corporate customers and long projects we collaborate using Jira.

Service Duration or Effort Price
Support Voucher / Bounty 2 hours (minimum) £ 100

WebKitX Architecture

WebKitX CEF3 ActiveX is a light-weight MFC ATL component for use with OLE/COM Programming Languages. At runtime the ActiveX starts CEF3XClient.exe process, passing to it its Window Handle (hWnd). 

CEF3XClient Process starts CEF3 Browser and Render sub-processes and establishes a seamless back-to-back Interprocess Communication Mechanism (IPC) between the ActiveX and all CEF3 processes. Chrome Browser is parented in ActiveX hWnd but lives in its own process.

All COM-based method and property calls between the ActiveX and CEF3XClients are marshalled using CoWaitForMultipleHandles, allowing your application's UI to be responsive. For time-consuming tasks, such as URL loading, COM events provide you callbacks when the tasks are finished. 

The important aspect of this architecture design is that all WebKit HTML5 rendering and V8 JavaScript execution are taking place outside your application, offering your application stability and isolation.

Getting Started

Form_Load()

First you must activate WebKitX ActiveX by providing your License Key. If you are using early binding, a good place to do that is on Form_Load event. If you are using late binding you are advised to activate the control straight after its creation. This step applies only to license owners. During trial evaluation of WebKitX you may skip it.

WebKitX1_OnCreate(Settings, CommandLineSwitches)

Next you may control the creation of CEF3 Browser and Client Processes. OnCreate event provides you a Settings object that controls CEF3 Application and CEF3 Browser creation and initialization settings. The recommended defaults are preset in this object but you may want to provide your own settings such as Localization, Cache paths, Security settings, etc. The second parameter is CommandLineSwitches that are additional CEF3 preferences and even JavaScript flags that you want to provide to CEF3 Client Processes. 

For a list of command line switches please have a look here:  https://peter.sh/experiments/chromium-command-line-switches

Default WebKitX CEF3 Command Line Switches

WebKitX1_OnBrowserReady()

OnBrowserReady event notifies you that CEF3 processes and WebKitX control have been successfully created and the Interprocess Communication Mechanism (IPC) is established. At this point you can define secondary behavioral parameters such as focus control, formatting APIs, script downloading control, etc. but most importantly after OnBrowserReady event you can successfully start loading URLs for browsing or editing.

WebKitX1_OnLoadEnd()

OnLoadEnd event is fired when your URL is completely downloaded. At this point you can enable HTML5 Editing or Preview (Browsing) and set the HTML DOM events you want WebKitX to subclass for every HTML Element on the document. After you receive this event you can start using the Selection and Formatting APIs.

Page Loading Events for IFRAME elements

WebKitX generates OnLoadStart, OnLoadEnd and OnLoadError events when loading a page. WebKitX generates those events only for the Main Window Frame and offers IFRAME support with two new events, OnPageLoadStart and OnPageLoadEnd that provide the IFRAME id, name and URL that generates the events.

Example Loading a Single Page:

	22:49:02 OnBeforeNavigate 1, 2, , about:blank, https://www.webkitx.com/index.html
	22:49:02 WebKitX1_OnLoadStart: https://www.webkitx.com/index.html
	22:49:02 OnPageLoadStart: FrameID=2, FrameName=, URL=https://www.webkitx.com/index.html, Transition=1
	22:49:02 Saved Undo 0
	22:49:02 OnPageLoadEnd: FrameID=2, FrameName=, URL=https://www.webkitx.com/index.html, HTTP=200
	22:49:02 WebKitX1_OnLoadEnd: https://www.webkitx.com/index.html	

Example Loading a Page with several IFRAME elements:

	22:50:29 OnBeforeNavigate 1, 3, , file:///D:/mobileFX/Projects/Software/WebKitX/ActiveX/VBSample/Editor/index.html, https://www.bild.de/
	22:50:29 WebKitX1_OnLoadStart: https://www.bild.de/
	22:50:29 OnPageLoadStart: FrameID=3, FrameName=, URL=https://www.bild.de/, Transition=1
	22:50:29 https://acdn.adnxs.com/as/1h/pages/bild.js(1): AST library loaded: 0.19.0
	22:50:30 OnPageLoadStart: FrameID=4, FrameName=iframe_wetter-iframe, URL=about:blank, Transition=3
	22:50:30 Saved Undo 0
	22:50:30 OnPageLoadEnd: FrameID=4, FrameName=iframe_wetter-iframe, URL=about:blank, HTTP=0
	22:50:30 OnPageLoadStart: FrameID=5, FrameName=iframe_iframe-bundesliga-1-spieltags-live-leiste, URL=about:blank, Transition=3
	22:50:30 Saved Undo 1
	22:50:30 OnPageLoadEnd: FrameID=5, FrameName=iframe_iframe-bundesliga-1-spieltags-live-leiste, URL=about:blank, HTTP=0
	22:50:30 https://tags.tiqcdn.com/utag/axelspringer/bild/prod/utag.js(141): This page is not reloaded
	22:50:30 https://tags.tiqcdn.com/utag/axelspringer/bild/prod/utag.js(140): window.performance work's fine on this browser
	22:50:30 OnBeforeNavigate 1, -4, , , https://wetter.bild.de/web2014/wetterwidget.html?ifw=110&ifh=61&ifs=no&ct=Bild-Channel+Home
	22:50:30 OnBeforeNavigate 1, -4, , , https://sport.bild.de/iframe/live-leiste/bundesliga/?ifw=993&ifh=152&ifs=no&ct=Bild-Channel+Home
	22:50:30 https://www.bild.de/(0): [Report Only] Refused to load the image 'https:' because it violates the following Content Security Policy directive: "img-src https: blob: data: android-webview-video-poster:".	
	22:50:30 OnBeforeNavigate 1, -4, , , https://8468614.fls.doubleclick.net/activityi;src=8468614;type=bildd0;cat=bildd00;u1=%2F;u4=Home;ord=9238740796052.613?
	22:50:30 OnBeforeNavigate 1, -4, , , https://8468614.fls.doubleclick.net/activityi;src=8468614;type=bildd0;cat=bildd0;u4=Home;u1=%2F;ord=8208939351270.605?
	22:50:31 OnPageLoadStart: FrameID=4, FrameName=iframe_wetter-iframe, URL=https://wetter.bild.de/web2014/wetterwidget.html?ifw=110&ifh=61&ifs=no&ct=Bild-Channel+Home, Transition=3
	22:50:31 https://tags.tiqcdn.com/utag/axelspringer/bild/prod/utag.js(140): window.performance work's fine on this browser
	22:50:31 https://tags.tiqcdn.com/utag/axelspringer/bild/prod/utag.js(141): This page is not reloaded
	22:50:31 OnPageLoadStart: FrameID=5, FrameName=iframe_iframe-bundesliga-1-spieltags-live-leiste, URL=https://sport.bild.de/iframe/live-leiste/bundesliga/?ifw=993&ifh=152&ifs=no&ct=Bild-Channel+Home, Transition=3
	22:50:31 https://wetter.bild.de/web2014/wetterwidget.html?ifw=110&ifh=61&ifs=no&ct=Bild-Channel+Home(115): Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
	22:50:31 OnBeforeNavigate 1, -4, , , https://8468614.fls.doubleclick.net/activityi;dc_pre=CPr7jZbbot8CFcsT0wodZzYLRQ;src=8468614;type=bildd0;cat=bildd00;u1=%2F;u4=Home;ord=9238740796052.613?
	22:50:31 OnBeforeNavigate 1, -4, , , https://8468614.fls.doubleclick.net/activityi;dc_pre=CJSVjpbbot8CFc4X0wodShsG5Q;src=8468614;type=bildd0;cat=bildd0;u4=Home;u1=%2F;ord=8208939351270.605?
	22:50:31 OnPageLoadStart: FrameID=8, FrameName=, URL=https://8468614.fls.doubleclick.net/activityi;dc_pre=CPr7jZbbot8CFcsT0wodZzYLRQ;src=8468614;type=bildd0;cat=bildd00;u1=%2F;u4=Home;ord=9238740796052.613?, Transition=3
	22:50:31 OnPageLoadStart: FrameID=10, FrameName=, URL=https://8468614.fls.doubleclick.net/activityi;dc_pre=CJSVjpbbot8CFc4X0wodShsG5Q;src=8468614;type=bildd0;cat=bildd0;u4=Home;u1=%2F;ord=8208939351270.605?, Transition=3
	22:50:32 https://tags.tiqcdn.com/utag/axelspringer/bild/prod/utag.js(141): This page is not reloaded
	22:50:32 https://tags.tiqcdn.com/utag/axelspringer/bild/prod/utag.js(140): window.performance work's fine on this browser
	22:50:32 OnPageLoadEnd: FrameID=7, FrameName=, URL=https://8468614.fls.doubleclick.net/activityi;dc_pre=CJSVjpbbot8CFc4X0wodShsG5Q;src=8468614;type=bildd0;cat=bildd0;u4=Home;u1=%2F;ord=8208939351270.605?, HTTP=-3
	22:50:32 OnPageLoadEnd: FrameID=4, FrameName=iframe_wetter-iframe, URL=https://wetter.bild.de/web2014/wetterwidget.html?ifw=110&ifh=61&ifs=no&ct=Bild-Channel+Home, HTTP=200
	22:50:32 OnPageLoadStart: FrameID=10, FrameName=, URL=about:blank, Transition=3
	22:50:32 OnPageLoadEnd: FrameID=10, FrameName=, URL=about:blank, HTTP=0
	22:50:32 https://tags.tiqcdn.com/utag/axelspringer/bild/prod/utag.js(141): This page is not reloaded
	22:50:32 https://tags.tiqcdn.com/utag/axelspringer/bild/prod/utag.js(140): window.performance work's fine on this browser
	22:50:32 Saved Undo 2
	22:50:32 OnPageLoadEnd: FrameID=6, FrameName=, URL=https://8468614.fls.doubleclick.net/activityi;dc_pre=CPr7jZbbot8CFcsT0wodZzYLRQ;src=8468614;type=bildd0;cat=bildd00;u1=%2F;u4=Home;ord=9238740796052.613?, HTTP=-3
	22:50:32 Saved Undo 3
	22:50:32 OnPageLoadEnd: FrameID=5, FrameName=iframe_iframe-bundesliga-1-spieltags-live-leiste, URL=https://sport.bild.de/iframe/live-leiste/bundesliga/?ifw=993&ifh=152&ifs=no&ct=Bild-Channel+Home, HTTP=200
	22:50:32 OnPageLoadStart: FrameID=11, FrameName=, URL=about:blank, Transition=3
	22:50:32 OnBeforeNavigate 1, -4, , , https://acdn.adnxs.com/dmp/async_usersync.html
	22:50:32 OnPageLoadStart: FrameID=11, FrameName=, URL=https://acdn.adnxs.com/dmp/async_usersync.html, Transition=3
	22:50:32 Saved Undo 4
	22:50:32 OnPageLoadEnd: FrameID=11, FrameName=, URL=about:blank, HTTP=0
	22:50:32 Saved Undo 5
	22:50:32 OnPageLoadEnd: FrameID=12, FrameName=, URL=https://acdn.adnxs.com/dmp/async_usersync.html, HTTP=-3
	22:50:33 OnPageLoadStart: FrameID=14, FrameName=, URL=about:blank, Transition=3
	22:50:33 Saved Undo 6
	22:50:33 OnPageLoadEnd: FrameID=14, FrameName=, URL=about:blank, HTTP=0
	22:50:33 https://static.adsafeprotected.com/sca.17.4.95.js(32): a: 0.00732421875ms
	22:50:33 https://static.adsafeprotected.com/sca.17.4.95.js(33): 'webkitURL' is deprecated. Please use 'URL' instead.
	22:50:35 https://tags.tiqcdn.com/utag/axelspringer/bild/prod/utag.js(125): Visitor Service Callback
	22:50:35 Saved Undo 7
	22:50:35 OnPageLoadEnd: FrameID=3, FrameName=, URL=https://www.bild.de/, HTTP=200
	22:50:35 WebKitX1_OnLoadEnd: https://www.bild.de/
	

Behavior Configuration IMPORTANT NOTES

Enabling JavaScript 

Please note that in WebKitX downloading script tags is disabled by default because in editor mode JavaScript execution often messes with HTML5 styles, especially if you are using features such as Parallax Scrolling and JavaScript-aided responsive layouts. If you want to download and execute JavaScript you must explicitly enable it using  WebKitX1.DownloadScripts = True in OnBrowserReady() event handler, as illustrated in code fragment below. 

As a side note, in editor mode of WebKitX you can execute JavaScript at run-time using Eval, AddScript, AddCode and ExecuteCommand methods, even if DownloadScripts is false. The key difference is download-time and run-time JavaScript execution and WebKitX DownloadScripts parameter controls download-time JavaScript and not run-time JavaScript.

Setting HTML5 by code at Runtime

WebKitX offers your two ways to load HTML: either by WebKitX.Open() method or by WebKitX.HTML property. Please note that providing a URL is recommended for successfully downloading relative resources such as Images, Style Sheets, Scripts, etc. If however you need to use the WebKitX.HTML property you first need to set a fake-but-valid URL and BaseURL. Chromium Embedded Framework Browser requires a valid URL page before you can inject HTML and/or JavaScript by code at run-time. To do so please use the WebKitX.URL and WebKitX.BaseURL properties before you use the WebKitX.HTML property.

Disabling GPU

In WebKitX GPU Hardware Acceleration is enabled by default. However, there are cases that you might need to host your application in a Virtualized environment such as VMware, Citrix or Virtual Box where GPU emulation is not available. You may disable GPU by handling the OnCreate() event and adding --disable-gpu --disable-webgl --disable-3d-apis --disable-gpu-compositing in CommandLineSwitches and setting Settings.webgl = False.

Setting CEF3 Preferences at Runtime

WebKitX offers GetPreference() and SetPreference() methods to read / modify CEF3 preferences at run-time. Please note that setting preferences causes CEF browser to recreate and it is time-costly, so use it with caution, especially when synchronizing WebKitX HTML with a Code Editor (like HTML5 Pad does). For example to enable / disable Spell Checking, WebKitX uses an internal Boolean latch in order to avoid browser recreation and you should use WebKitX1.SpellChecking = true instead of SetPreference("browser.enable_spellchecking", "true").

For a list of preference please have a look here: https://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/pref_names.cc?view=markup

WebKitX Plugins

WebKitX plugins are disabled by default. To enable plugins you need to handle the OnCreate event and set Settings.plugins = True as illustrated below:

PDF Viewer Plugin

When plugins are disabled PDF files will download as regular files rather than render on the screen. To enable PDF Viewer you need to handle the OnCreate event and set Settings.plugins = True.

Flash Player Plugin

To enable Flash player you need to download a x86 version of pepflashplayer.dll and provide the path to it by setting the Settings.flash_player_dll_path property in OnCreate() event, as illustrated below. If you copy the DLL in the ActiveX folder then you do not need to provide the full path. If you decide to install the DLL in a different folder you should provide the path with forward slashes (unix-style paths).

Chrome DevTools Plugin

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you diagnose problems quickly, which ultimately helps you build better websites, faster.

Calling JavaScript

Calling JavaScript Functions by Name - CallByName()

The simplest way to call a JavaScript function in WebKitX is WebKitX.CallByName(Name, Variant) method. You can pass to JavaScript function arbitrary arguments using an OLE/COM Variant, and receive the function's result value, as an OLE/COM Variant too. Execution of CallByName is IPC-synchronous and this method is an elegant alternative to WebKitX.Eval() code as you can pass back-and-forth your variables without stringifying them. For more information about this mechanism have a look in OLE/COM Variants to V8 Values Conversion.

Calling JavaScript Functions for a Specific Execution Context -  JSCallback()

WebKitX JavaScript Callbacks is a mechanism to register and call JavaScript functions by name, within a specific V8 JavaScript Execution Context. The key difference from CallByName() is that CallByName can only invoke functions registered in the Global Scope of the Main Window, where as JavaScript Callbacks allow you to call functions registered in any scope and window.

Registering JavaScript Callbacks

Each frame in a browser window has its own V8 context. The context defines the scope for all variables, objects and functions defined in that frame. WebKitX allows you to register a JavaScript callback in a V8 context using window.register(name, callback, this) method. The first argument is the string name of the function, the second is the function callback and the 3rd optional parameter is the execution context. If the 3rd parameter is not defined then the global object is assumed.

Invoking JavaScript Callbacks

To invoke the JavaScript callback you simply need to call WebKitX.JSCallback(name, params, async) method passing the name of the JavaScript function you want to invoke and a Variant with the arguments. For critical real-time applications you should set async parameter to True, which executes the IPC call synchronously. The result depends on the JavaScript function and can be either a scalar value or a variant array of variants.

OLE/COM Variants to V8 Values Conversion EXPERIMENTAL

WebKitX has a powerful OLE/COM Variant to Google V8 Value bi-directional converter that works both for Scalar and Array values, including nested array values (arrays of arrays of variants). This conversion mechanism is available to any WebKitX method transmitting and/or returning an OLE/COM Variant, such as CallByName(), JSCallBack() and DispatchEvent().

WebKitX can serialize variant scalars VT_BSTR, VT_UINT, VT_INT, VT_NULL, VT_BOOL, VT_R4, VT_R8, VT_CY, VT_DATE as well as variant safearray of variants VT_ARRAY|VT_VARIANT and even typed arrays VT_ARRAY|VT_BSTR, VT_ARRAY|VT_UINT, VT_ARRAY|VT_INT, VT_ARRAY|VT_BOOL, VT_ARRAY|VT_R4, VT_ARRAY|VT_R8, VT_ARRAY|VT_CY, VT_ARRAY|VT_DATE to Google V8 value objects. Currently serialization of VT_DISPATCH is not supported and therefore you cannot pass OLE/COM Objects to JavaScript.

On the OLE/COM side, to pass multiple arguments to a JavaScript callback function you need to wrap them in a Variant Array of Variants.

On the JavaScript side, you can return V8 Scalar or V8 Array values to OLE/COM side, including nested V8 Arrays. WebKitX can serialize V8 scalar Boolean, Number, String, Null, Date values and Array of [Boolean or Number or String or Null or Date or Array] V8 values. Google V8 Arrays are always returned as Variant Arrays of Variants.

On the receiving OLE/COM side the scalars are converted to a Variant of equivalent scalar type and Arrays are converted into a Variant Array of Variants.

Working with C# and Visual Studio 2017EXPERIMENTAL

As of version 2.x WebKitX ActiveX ships with C# samples for both x32 and x64 architectures. The IDL COM API of WebKitX is using OLE/COM Variants for passing data back and forth to the ActiveX. In C# the Variant data type is not available but you may substitute it with object array like the example below:

HTML5 DOM to COM Events

Selector based API

WebKitX provides you access to  HTML5 DOM through a robust  CSS3 selector-based API (Selector example td:nth-of-type(3) > span:first-child Selectors are used as arguments in editing and styling method calls and as targets in events. The ActiveX provides the selector of the currently selected element and the begin and end nodes of the current selection: ActiveElement, SelAnchorElement, SelFocusElement.

Asynchronous DOM to COM Events

HTML5 DOM Events are generated by WebKit Blink Engine and are copied into an immutable format before they are transmitted from CEFXClient process to WebKitX ActiveX. Once WebKitX ActiveX receives an event notification through IPC, it fires a COM Event with the copied data of HTML DOM event. Thus, CEFXClient process does not block waiting for your client code to handle the event. WebKitX DOM Events are Immutable, meaning that you can only read event data but you cannot cancel events, stop them from bubbling or prevent default behavior. 

Synchronous DOM to COM Events

WebKitX as of version 1.5.11.2591 supports synchronous DOM to COM events by implementing CefMessageRouter circuit. Events generated from WebKit Blink Engine are serialized and passed from Rendering to Browser process, which transmits them to the ActiveX. The browser process waits for the ActiveX to handle the event, where you can also cancel event bubble or prevent event's default behavior.

Please note that blocking Inter-process Communication (IPC) between 3 processes is not advisable for casual event handling and you should do so only if you need to cancel specific events. Synchronous DOM to COM Events are thread-safe and care has been placed in order to support this feature seamlessly in single-threaded Applications without deadlocks. For that purpose, synchronous events are serialized using mutex synchronization on entry, meaning that synchronous events occupy the IPC channel one at a time. Please contact us for more implementation details or if you need a different handling of DOM to COM events.

Listening to DOM Events

You can use addEventListener and removeEventListener for attaching and detaching on HTML DOM events. WebKitX offers two methods:

The signature of the public methods is defined by OnEvent() event which is:

EventData are a JSON string representation of DOM Event:

{ "eventName": "click", "eventType": "[object MouseEvent]", "altKey": false, "bubbles": true, "button": 0, "buttons": 0, "cancelBubble": false, "cancelable": true, "clientX": 86, "clientY": 178, "composed": true, "ctrlKey": false, "currentTarget": "", "defaultPrevented": false, "detail": 1, "eventPhase": 1, "fromElement": "", "isTrusted": true, "layerX": 86, "layerY": 178, "metaKey": false, "movementX": 0, "movementY": 0, "offsetX": 86, "offsetY": 89, "originalTarget": "", "pageX": 86, "pageY": 178, "path": "#lga", "relatedTarget": "", "returnValue": true, "screenX": 566, "screenY": 415, "shiftKey": false, "srcElement": "#lga", "sourceCapabilities": {}, "target": "#lga", "timeStamp": 8625.205000000002, "toElement": "#lga", "type": "click", "which": 1, "x": 86, "y": 178, "region": null, }
{ "eventName": "mousemove", "eventType": "[object MouseEvent]", "altKey": false, "bubbles": true, "button": 0, "buttons": 0, "cancelBubble": false, "cancelable": true, "clientX": 136, "clientY": 1, "composed": true, "ctrlKey": false, "currentTarget": "", "defaultPrevented": false, "detail": 0, "eventPhase": 1, "fromElement": "", "isTrusted": true, "layerX": 136, "layerY": 1, "metaKey": false, "movementX": -1, "movementY": -2, "offsetX": 136, "offsetY": 1, "originalTarget": "", "pageX": 136, "pageY": 1, "path": "#viewport", "relatedTarget": "", "returnValue": true, "screenX": 616, "screenY": 238, "shiftKey": false, "srcElement": "#viewport", "sourceCapabilities": {}, "target": "#viewport", "timeStamp": 276604.28, "toElement": "#viewport", "type": "mousemove", "which": 0, "x": 136, "y": 1, "region": null, }

DOM Events Handling Example

WebKitX Events Sample demonstrates handling DOM events and reading values from Input elements. In the following code fragment are demonstrated the three (3) different methods you can use. The generic method, the AddressOf method that requires a Module, and the IDispatch method that requires an Object. The sample loads a INPUT element and a BUTTON and when you click the button it fires an event which is handled by VB6. The event handler code in VB6 uses WebKitX API to read the value of the INPUT.



Firing Custom HTML5 Events - DispatchEvent()

WebKitX DispatchEvent() method allows you to fire DOM events directly into JavaScript and handle those events by JavaScript event handlers. You can pass the target selector that will receive the event, the event name, event initialization parameters (bubbling, cancelable, composed) and an OLE/COM Variant that will be converted into a V8 JavaScript object and added in the details field of the Event object. Event execution can be both synchronous and asynchronous in terms of IPC tunneling, and it is always synchronous in terms of DOM.

WebKitX HTML5 Editor

There are some best practices when using WebKitX as an HTML5 Editor:

Disabling JavaScript download

Disabling scripts downloading is advisable when using WebKitX as an Editor because JavaScript execution often messes with HTML5 styles, especially if you are using features such as Parallax Scrolling and JavaScript-aided responsive layouts.

Detecting Edit Mode from JavaScript

There are cases where your JavaScript code might need to detect if WebKitX is in Edit mode. To do that simply read window.__WEBKITX_EDITABLE__ variable. You should wrap Google Analytics and Google Tags Manager initialization code inside a conditional block and download Google scripts (or any other script) by URL, as illustrated below:

Getting HTML Source

To retrieve HTML5 source as a String you can use WebKitX.HTML property. 

Getting XHTML Source

You can configure WebKitX to return XHTML instead of HTML by setting Settings.enable_xml_html = true in OnCreate() event handler. This setting enables DOM parsing by XMLSerializer that trans-codes your HTML into XML. The output results in better structured and faster parsed documents but XMLSerializer also encodes the source code of <script> elements; in particular  XMLSerializer HTML-Encodes any Entity Character such as ampersand (&) to &amp;, less than (<) to &lt;, grater than (>) to &gt;, etc. You should make sure that all your <script> elements are referenced and not embedded.

Using WebKitX with MDI Forms

MDI Forms in most programming languages suffer from flickering effects. When using WebKitX in an MDI child Form, you may notice rendering problems when MDI children overlap each other during resizing or moving. To treat this problem you need to add WebKitX.SetMDIWindow(hWND) in every MDI child Form that uses WebKitX control. The call installs a window sub-class hook that detects WM_WINDOWPOSCHANGING and  WM_MOVING messages and repaints the entire MDI Form. In order to avoid further flickering and redundant repaints, WebKitX uses Timer that absorbs repeated WM_WINDOWPOSCHANGING and WM_MOVING messages. For SetMDIWindow() to work, the WebKitX control must be directly placed inside an MDI Child Form and must not be contained inside another control (such as a TabStrip).

Overlapping Form Controls (re-positioning / re-z-indexing)

When you place WebKitX control inside a TabStrip control you must control its Visibility in order to avoid rendering problems. Most TabStrip controls during page selection, instead of toggling the visibility of the pages and/or their contained controls, they simply re-position the inactive controls in a non-visible area or re-position the controls along the z-axis. However, CEF3 window is an out-of-process overlay window on-top of WebKitX COleControl window and re-positioning or re-z-indexing form controls can cause rendering problems to WebKitX and other controls in your form too.

To avoid this problem as of version 1.5.11.3370 WebKitX does not resize/re-position CEF3 browser window if WebKitX control is invisible (WebKitX.Visible = False). However, there is a best practice you must follow in order to achieve the desired behavior: you need to control WebKitX visibility by code, as illustrated below. Also, we have added WebKitX.SetAutoResize(Enable) method to explicitly enable or disable CEF3 resize/re-position. Please note that to force WebKitX / CEF3 to resize/re-position after they become visible again, you must call WebKitX.Repaint() method.

The problem described does not appear only with TabStrip controls; the same defect appears if you have custom control layouting implementation in your Forms that re-positions controls or re-indexes controls z-index.

Content Filtering EXPERIMENTAL

UNSUPPORTED EXPERIMENTAL FEATURE

WebKitX Content Filtering is a mechanism that allows you to remove HTTP Response Headers, such as Content Security Policy (CSP) response header, and alter or remove Cross Origin Resource Sharing (CORS) response header. WebKitX implements in CEF3 Client I/O Thread a custom Resource Handler that intercepts normal HTTP and HTTPS requests and spawns a light-weight object that downloads the resource instead. Once the HTTP Response Headers for a particular resource are available, they are being filtered-out and passed to the IO thread for further processing. 

This mechanism works for the following HTTP methods: GET, POST, HEAD, DELETE and PUT, and works for any MIME type resource. WebKitX content filtering works both with HTTP and HTTPS requests, meaning that it works perfectly with server-side SSL encryption, but it does not work if client-side SSL authentication is enabled. Please read further below for more information about Microsoft IIS Client SSL certificate configuration.

Overwrite Cross-Origin Resource Sharing (CORS)

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.

An example of a cross-origin request: The frontend JavaScript code for a web application served from http://domain-a.com uses XMLHttpRequest to make a request for http://api.domain-c.com/data.json.

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request HTTP resources from the same origin the application was loaded from, unless the response from the other origin includes the right CORS headers.

The CORS mechanism supports secure cross-origin requests and data transfers between browsers and web servers. Modern browsers use CORS in an API container such as XMLHttpRequest or Fetch to help mitigate the risks of cross-origin HTTP requests.

This cross-origin sharing standard is used to enable cross-site HTTP requests for:

To enable CORS, you need to configure your web server to return the Access-Control-Allow-Origin HTTP header:
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: <origin>

In WebKitX you can overwrite web server's Access-Control-Allow-Origin  by handling the OnCreate() event and setting Settings.filter_response = true and Settings.access_control_allow_origin to "*" or the domain you wish to allow.

Overwrite Content Security Policy (CSP)

WebKitX due to JavaScript injection features and extensive use of eval() requires Content Security Policy (CSP) to be suppressed. If you try to load a URL with CSP enabled in WebKitX, it will result in a series of error messages related to unsafe-eval, like the one below:

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware. CSP is designed to be fully backward compatible. Browsers that don't support it still work with servers that implement it, and vice-versa: browsers that don't support CSP simply ignore it, functioning as usual, defaulting to the standard same-origin policy for web content. If the site doesn't offer the CSP header, browsers likewise use the standard same-origin policy.

To enable CSP, you need to configure your web server to return the Content-Security-Policy HTTP header (sometimes you will see mentions of the X-Content-Security-Policy header, but that's an older version and you don't need to specify it anymore).

In WebKitX you can overwrite web server's Content-Security-Policy by handling the OnCreate() event and setting Settings.filter_response = true and Settings.remove_response_headers to "x-webkit-csp,content-security-policy,x-content-security-policy". The same feature can be used to remove any other response header.

Some sites stop loading after enabling Content Filtering

WebKitX Content Filtering features and SSL Client Certificate enabled on your Web Server cannot work together. You must either disable WebKitX Content Filtering or disable SSL Client Certificate on your Web Server, as illustrated below:

Page Encoding problems with early implementation of Content Filtering

CEF 3.3202.1692 ignores Content-Type charset option when using custom CefResourceHandler, causing pages such as Google.gr or Google.de to render with unreadable characters. [bug link]. To treat this problem, WebKitX Content Filtering enforces UTF-8 BOM insertion in text/plain, text/html, application/json, application/javascript, application/ecmascript, text/css, text/xml MIME types. Please note that the bug appears only if content filtering is enabled and does not affect normal (unfiltered) browsing or editing. The plan about this bug is to switch to newer version of CEF3 on January 2019.

Loading www.google.gr with content filtering with version 1.5.11.3220:


Loading www.google.gr with content filtering with version 1.5.11.3297 (Sep 2018) and later:

General Trouble Shooting

WebKitX installation Fails

If during WebKitX installation you get an error message that WebKitXCEF3.ocx and cmax40.dll failed to register, it most certainly means that  Microsoft x86 C++ 2015 Redistributable Package failed to automatically install because the Windows OS version and/or its current Service Pack are not compatible with the included Microsoft x86 C++ 2015 Redistributable Package. You are advised to download Microsoft x86 C++ 2015 Redistributable Package for you Operating System and Service Pack bundle, and install it manually, from here: Microsoft Visual C++ 2015 Redistributable Update 3 RC.

Nothing Paints on my Form

WebKitX ActiveX provides OLE Control Host Window Handle (HWND) to Chromium Embedded Framework (CEF3), which in turn paints the HTML5 composite image to the OLE Control Host Device Context (HDC). This mechanism requires you to Disable Double Buffering Features of the Host Form or OLE Control Host. Furthermore please make sure you set the scale mode of your Host Form or OLE Control Host to Pixels.

I get unsafe-eval error messages

WebKitX due to JavaScript injection features and extensive use of Eval() requires Content Security Policy (CSP) to be suppressed. If you try to load a site with CSP enabled in WebKitX, it will result in a series of error messages related to unsafe-eval. Please refer to Content Filtering article above for information how to by-pass CSP in WebKitX.

My Web Site does not load

WebKitX Content Filtering features and SSL Client Certificate enabled on your Web Server cannot work together, by design. You must either disable WebKitX Content Filtering or disable SSL Client Certificate on your Web Server. Please note this has nothing to do with HTTPS. For more information please refer to Content Filtering chapter.

WebKitX SamplesWebKitX HTML5 Editor (VB6)

This is a simple, yet complete, sample of WebKitX CEF3 ActiveX control. The sample is shipped both as Visual Basic 6 source code project, as well as a complete binary bundle that includes CodeMax Editor ActiveX and CEF3 binaries. The sample demonstrates all WebKitX advanced features including FrontPage-like selection synchronization between HTML5 Designer and Source Editor, Table Editing, Selector API, and advanced CSS3 styling. The binary bundle can be used as a royalties-free stand-alone HTML5 Editor.





Simple Browser (VB6)

This sample demonstrates the WebKitX Browser. You can embed WebKitX in your applications with just 3 lines of code!

Other mobileFX Products


CairoCanvasX is an HTML5 Canvas 2D Rendering Context for use with OLE/COM languages that does not require HTML5 run-time. The ActiveX is linked with Cairo 2D Graphics Library version 1.10.2 from GTK+ 2.24 win32 implementation. This is a production-grade stable component for commercial use that will add hardware accelerated vector graphics in your desktop applications and 2D games. Effort has been made to preserve HTML5 canvas API in order to offer smooth web to desktop porting and vice versa.

Find out more about CairoCanvasX