Page source update on run time - Chromium

Question

On chromium you can get the page source using GetSourceProc like in this delphi code I found on the internet:

procedure TForm1.Chromium1LoadEnd(Sender: TObject; const browser: ICefBrowser; const frame: ICefFrame;
  httpStatusCode: Integer);
begin
  Chromium1.Browser.MainFrame.GetSourceProc(StringVisitor);  
end;

procedure TForm1.FormCreate(Sender: TObject);
begin
  chromium1.load('http://www.google.com');
end;

procedure TForm1.StringVisitor(const str: ustring);
begin
  mySource := str;
end;

The code works fine and I can get the source from mySource variable perfectly, however when I change the data on the page and then re-call the code to get the source I get the old data, like example I have a HTML input:

<input name="edtFName" type="text" value="ZORRO" id="FName" title="First Name">

So the HTML input has the text "ZORRO" and when I change the text to "ZARA" and get the source on delphi I still get the text "ZORRO" in the input.

My question: is there a way to update the current source or get the real source from chromium on delphi?

ps. I opened the HTML page on the real chrome browser, and changed the text inside the input after that I saved the page as a new file, then I opened the new file and checked the source in it and found the old text and not the real new text, is this really the right behaviour, what if I had a big html form and a lot of data filled in it and wanted to save the page, then every thing is lost, it looks like a bug for me, because it doesn't save the current page.

Answer 1

If Chrome/Chromium gives the original input value when you get the source, then the CEF wrapper you are using can do nothing to prevent it.

I think the easiest way to save the HTML and the new values is to do it separately.

You already know how to save the HTML and all you need is a function to get all the new form values and another function to set those form values when you load the HTML file.

The function read the new form values would execute JavaScript code that searches for the form elements to get the value like this :

var mynewvalue = document.getElementById('MyInputId').value;

Then you would call a function in a JavaScript extension to send mynewvalue to Delphi.

You need to register a custom JavaScript extension before getting the values that would send them to Delphi using a process message. All the code necessary to do that is already in a CEF4Delphi demo called JSRTTIExtension and the JS extension is in uTestExtension.pas. That extension has a sendresulttobrowser function that you need for this purpose.

The function to set the saved values when you load an HTML file would only need a few JavaScript lines that search the form elements and set the values like this :

document.getElementById('MyInputId').value = mysavedvalue;

Use TChromium.ExecuteJavaScript to execute all your JavaScript code and you can use it inside the TChromium.OnLoadEnd event.