How to embed Delphi VCL form into HTML page using NPAPI?

Question

There are known ways of writing ActiveX plugins with Delphi, but the ActiveX itself poses a lot of limitations in browsers other than IE. So I was thinking - how to compile a plugin in NPAPI format, natively compatible with Chrome/Firefox?

Intent of the plugin is to allow to embed a VCL form into the HTML page and be able to bi-directionaly communicate with this form using JavaScript. E.g. clicking a button on a form would call JavaScript function on the page, and JavaScript functions on the page could send events to a VCL form. How this can be achieved?

Answer 1

There's a list of existing NPAPI wrappers for Delphi at Mozilla bugtracker: https://www.mozdev.org/bugs/show_bug.cgi?id=8708

The latest entry (NPAPI plugin framework with scripting support + demo by Yury Sidorov) offers exactly what is needed.

With that VCL Form project can be compiled into a DLL compatible with NPAPI. Manifest.json also needs to be added. Afterwards the plugin can be installed into Chrome like usual.

Following HTML code embeds the VCL form that is stored in the plugin:

<EMBED id="embed1" TYPE="application/x-delphi-demo-plugin" ALIGN=CENTER WIDTH=400 HEIGHT=300>

<script>
var embed1 = document.getElementById('embed1');
</script>

<input type=button value="Show Value" onclick='alert("Value=" + embed1.value);'>

And that is how Form can change the HTML page around it:

with Plugin.GetBrowserWindowObject do
  GetObject('document')['bgColor'] := clRed;

P.S. The only fix that should be applied for modern Delphi versions - change string and PChar to AnsiString and PAnsiChar throughout the NPPlugin.pas. Or else communication with embedded form is broken.