How to get id values at the click of the button (html) in Tchromium Cef4delphi?

Question

I have an html form and this opens inside a Delphi form with the TChromium.

How can I get the values of the fields the user entered?

<div class="col-2 md-4 mb-3 offset-md-0 col-md-4">
    <label for="validationCustom8">Nº:</label>
    <input type="text" name="edNome" class="form-control"  placeholder="numero" required>
</div>
  <div class="col-2 md-4 mb-3 offset-md-0 col-md-4">
    <label for="validationCustom9">Tag:</label>
    <input type="text" name="edDet" class="form-control"   placeholder="Tag">
    </div>

      <div class="col-2 md-4 mb-3 offset-md-0 col-md-4">
          <label for="validationCustom7"> Nome:</label>
          <input type="text" name="edEmail" class="form-control" placeholder="nome" >             
    </div>

   <button class="btn btn-primary" id="botao" type="submit" >Salvar</button>

Answer 1

Create a js function that can be triggered by a click on a button or any other medium.

In Delphi you need to register an extension in the Browser. Ex.

type
  TCustomRenderProcessHandler = class(TCefRenderProcessHandlerOwn)
  protected
    procedure OnWebKitInitialized; override;
  end;

  TExtensao = class
    class procedure click(const data: string);
  end;

For class TExtensao note that we have a procedure called click, this will be the contact with the js function, we are creating nothing more or less than a System between Delphi and Browser.

Procedure click:

class procedure TExtensao.click(const data: string);
var
  vMensagem : ICefProcessMessage;
begin
  // Registra o Evento Click para a Extensão que criamos anteriormente
  vMensagem := TCefProcessMessageRef.New('click');
  vMensagem.ArgumentList.SetString(0, data);
  TCefv8ContextRef.Current.Browser.SendProcessMessage(PID_BROWSER, vMensagem);
end;

Now, we need to inform the system that on startup it captures the events of the Browser, then in the boot section add:

initialization 
...     
  // Inicializa virtualmente os Procedimentos externos do Navegador que no caso vai registrar o TExtension}
  CefRenderProcessHandler  := TCustomRenderProcessHandler.Create;
  CefBrowserProcessHandler := TCefBrowserProcessHandlerOwn.Create;

The component TChromium has an event called ProcessMessageReceived, here every time the Istener click is triggered in the Navigator informs TCustomRenderProcessHandler that we registered earlier that a new message has arrived.

You can filter events through the parameter message. something like:

if message.Name = 'click' then
  message.ArgumentList.GetString(0)

As his name says message.ArgumentList is a list of arguments sent by the Navigator, and at position 0 contains the result of the js function that was created to pick the values of the desired fields.

Edit.

Missing implementation of the app Registration:

{ TCustomRenderProcessHandler }
procedure TCustomRenderProcessHandler.OnWebKitInitialized;
begin
  // Registra uma Extensão chamada "app" para o evento "click"
  TCefRTTIExtension.Register('app', TExtensao);
end;