9.16.2015 Create a web browser in 3 minutes using Chromium engine! (fpCEF3)

We'll learn how to create a web browser even quicker than you can install one! All using the people's favorite chromium engine!

Well, we had a popular post on LazPlanet about creating a web browser using the GeckoPort v1. That was a great way to create a browser and I love Gecko because it is the darling of open source! But it was an old version of Gecko and the newer version does not seem to work.

So, today, we have a solution for a browser made with a more updated engine. It will harness the pure goodness of the Chromium Embedded Framework (CEF) and its implementation on Free Pascal, named fpCEF3.

Although Chrome has done things that truly-privacy-minded people don't like. But it is a fast web browser engine that is increasingly becoming popular. We all know that Opera ditched its own-coded engine "Presto" and started using "Blink", a variant of the Chromium engine, as their focused engine. Google Chrome also has a good bite in browser market share. Chrome is also running in the Chromebooks pioneered by Google. So, we can say that Chromium has done something right and we're going to learn to build a browser out of that goodness.

FpCEF3 is a great project that we should all adore. It will let us use the Chromium engine right in our Lazarus project. And it is possible to use it in Windows, Linux and Mac OS platforms. But in this article, we are using Windows. (You can adopt this tutorial for the other platforms quite easily if you know your way around.)

So without further ado, let's make this browser...


Download & Install fpCEF3

1. First of all, we need to download fpCEF3. You can download revision 23 (or version 3.1750) from here . (I have used the revision no 23 which is very important for the next step. I'll explain later.)

[
But if you are ready to experiment any later revisions, feel free to do so. (I have instructions for it later, don't worry.) For getting the latest revision, you can use Win32SVN and summon the commands in terminal:

cd /D c:\lazarus\components
svn co https://github.com/dliw/fpCEF3

(You can always change the c:\lazarus part with your Lazarus installation if you have lazarus installed elsewhere in your computer. If you've done this, then skip the next step, step 2, and continue after that.)
]

2. Extract & Copy the folder to the Components directory inside your Lazarus installation (this is usually C:\Lazarus\Componenets).



3. Now go inside the folder, then inside "Component" folder, then double click cef3.lpk. (You can also use Package->Open Package file (lpk)... from inside Lazarus to open this file.)

This will open up Lazarus with a "Package" window for CEF3 like below:



4. Click on Compile.


5. After the Compiling has completed (the messages window will show a "Success" message), click Use -> Install. Click Yes to rebuild Lazarus.


Give it some time to rebuild. Lazarus will restart. Upon restart you'll now see a new "Chromium" tab in the toolbar.



In the meanwhile let's download CEF...

Download CEF

[ Note: I was very specific about getting the 23 revision (or version 3.1750) of FPCEF3. This version is able to use CEF version 3.1750. If you have got yourself any other revision of fpCEF3, be sure to check the version number or commit messages to look for the appropriate version of CEF to be downloaded for it to work. ]

1. Download CEF (version 3.1750) from here or here .

2. Download & Install 7-zip from here. You'll need 7-zip to extract the file above.

3. Now extract the file and keep it that way. We'll only need the "Release" & "Resources" folders from this hotchpotch and jam packed file.

Create the browser in 3 minutes!

The previous steps were just preparations -- which you'll only have to do once. Now that we're done with those boring setups now we get back in our real business... the browser.

Start Lazarus.

Create a new Application project (Project->New Project->Application->OK).

Save the Project (File -> Save All) in a directory.

Now, in the project directory copy the Resources Folder from CEF package.

lazarus, freepascal, webbrowser, chromium

And then copy all the files inside the Release folder from CEF package, and paste it directly into the project directory. See the screenshot below if you need help understanding (click to enlarge).

Copy the files inside the Release folder into the project folder, fpCEF, web browser, lazarus, free pascal

Drop a new TEditButton (from Misc tab) in to the form. Set its properties like this:
Name = edtURL
Align = alTop
ButtonCaption = Go

The result is as follows:

First, we add the location bar - lazarus, freepascal, webbrowser, chromium

Now we'll have a nice Location bar/Address bar at the top.

Now Drop a new TChromium (from Chromium tab) in the form. Set its properties:

Name = Chromium
Align = alClient

It will fit the Chromium component nicely in the form's blank area.

Simple Chromium Web Browser with fpCEF, lazarus ide, free pascal


Now double click the Form1 item in the Object Inspector and enter the code:

procedure TForm1.FormCreate(Sender: TObject);
begin
  CefResourcesDirPath:='Resources';
  CefLocalesDirPath:='Resources\locales';
  CefInitDefault;
  edtURL.Text:='http://lazplanet.blogspot.com';
end;

Now that you are in the Code view, add the cef3types & cef3lib unit in the uses clause:

uses
  ..., ..., ...
  , cef3types, cef3lib;

Now add the following code on edtURL's OnButtonClick event (select the edtURL component, go to Event tab, click the [...] button beside OnButtonClick item):

procedure TForm1.edtURLButtonClick(Sender: TObject);
begin

  Chromium.Load(UTF8Decode(edtURL.Text));

end;

Now add the following code on Chromium's OnLoadEnd event (select the Chromium component, go to Event tab, click the [...] button beside OnLoadEnd item):

procedure TForm1.ChromiumLoadEnd(Sender: TObject; const Browser: ICefBrowser;
  const Frame: ICefFrame; httpStatusCode: Integer);
begin

  edtURL.Text:=UTF8Encode(Browser.MainFrame.Url);

end;

Voila! Done! Well under 3 minutes!

Now Run the project (F9 or Run -> Run). Click the "Go" button.

running the web browser , lazarus, freepascal, webbrowser, chromium

You'll see the LazPlanet website load in your newly made web browser! You can change the code on the TForm1.FormCreate procedure to set another URL as the homepage.

Now browse all you want with your new browser! Happy surfing!

Download Sample Code ZIP

You can download the above example tutorial project's source code from here.

Size: 926 KB
The package contains compiled executable EXE file.

Ref:
http://wiki.freepascal.org/fpCEF3
https://github.com/dliw/fpCEF3
http://www.magpcss.net/cef_downloads/

25 comments:

Carmelo Privitera said...

Compliment, very useful!!
You should make a tutorial on how to check email ;)

Marc said...

Is it possible to interact with the JavaScript code of the webpage? So that I can listen to JavaScript events to execute Pascal methods?

Adnan Shameem said...

@Carmelo Privitera
Oh, thanks!
Well, I have to say that I am not that familiar with email technologies. But a quick search led me to these links. They seem good...

http://forum.lazarus.freepascal.org/index.php?topic=9843.0
http://www.freepascal.org/~michael/articles/lazmail/lazmail-en.pdf

Regards

Adnan Shameem said...

@Marc
Unfortunately, I am not sure. But this seems to be the solution...

https://bitbucket.org/chromiumembedded/cef/wiki/JavaScriptIntegration#markdown-header-functions-and-window-binding

Regards

Tormod Skaret said...

Calling different java functions on page and get responses back would be great, there are explanations how to use TWEBBOWSER in Delphi doing this, but for us that prefer to use LAZARUS ... so if anybody knowledgable can make such an example it probably would be interesting for the community. I thinking specially of using this for displaying Google Maps, calling JS function as for instance setting markers and to get user information as mouse moves or mouse clicks on the map.
Any ideas?

Tormod Skaret said...
This comment has been removed by the author.
Tormod Skaret said...

Trying to compile and run the example, it stops on debugger error each time - running lazarus version 1.4.4. Running the already compiled version, everything works OK Both project and compiled application in same folder. What is wrong?

Adnan Shameem said...

@Tormod Skaret
Hello. Nice to hear from a reader.

Well. For your first question, there are ways in CEF to communicate with host program. But I've not tried them in Lazarus and not an expert on Google maps either. I think you'll have to make your own html page using the Google maps API, because if you want to trigger a callback from html to the software when setting markers, you'll have to execute a Javascript callback function. And that is possible if you have your own code running in the browser. But before trying that you should test if basic communication is possible.

But you can check out these materials to get a grip of what you have to do:
1. Good load of Information is here: https://bitbucket.org/chromiumembedded/cef/wiki/JavaScriptIntegration
2. "Inter process communication" section of: https://bitbucket.org/chromiumembedded/cef/wiki/GeneralUsage#markdown-header-inter-process-communication-ipc
3. The solution (Update part) given here may also be of use: https://stackoverflow.com/questions/21138740/how-can-i-execute-javascript-callback-function-from-c-sharp-host-application

And don't forget, there is a sneakier way of doing this by changing the status text through Javascript, then looking for the change in the OnStatusChange event (given there is an "OnStatusChange" event. I cannot see because I'm in a without Lazarus right now.) There is a comment about the method in GeckoBrowser article (part 2) dated Feb 2, 2014 .

For your second question... what does the error message say?

Tormod Skaret said...

The error is probably related to debugger, occasionally the error comes when executing, most frequent after terminating execution.The debugger error says:
"Oops, the debugger entered the error state Save your work now Hit Stop and hope the best, we're pulling the plug. Could not send command to GDB ..." additional info: The GDB command "thread-info" did not return any result.
In addition a heap dump is shown indicating error.It is to long to write down, but there are references to line 43 in of frm1.pas and line 18 of proj_simple_cef_browser.lpr in call trace. (used example as given in download).
I tried to build a debugger free release, but run into problems - not sure if I was able to shut down the debugger in a proper way.

Cliff Nieuwenhuis said...

Thank you for the excellent articles! LazPlanet is wonderful. But I'm having a problem with this project -- when I try to compile and run, an Assembler window pops up and I can get no further. Near the top of the window it says "libcef!cef_time_to_timet (614363)". I also tried with a different version of CEF (fpCEF3-3.24.54 and matching 7zip file), but both versions resulted in the assembler window and the cef_time_to_timet message. Any ideas? I'm using a Windows 7 64bit computer but my Lazarus is 32bit so I downloaded the 32bit versions of CEF.

Cliff Nieuwenhuis said...

I've answered my own question. I found a typo in my code.

Adnan Shameem said...

@Tormod Skaret
Oh, I remember this message. It also seem to happen this to me too. But I think it is harmless for release binary. For Lazarus, GDB integration is still quite young. So this kind of messages will probably disappear in the future. Despite this message, the browser release binary seems to work fine without any crashes.

But you can always file a bug if it annoys you. :-)

@Cliff Nieuwenhuis
Great to hear you solved it!

Iouri said...

Thank you, Adnan Shameem!
I had great need in this. And now for you my this problem
resolved.
Almost.

Which version of Lazarus you used for this project?
I used version
lazarus-1.2.4-FPC-2.6.4-win32.exe

And I have two problems:
1 problem:
TEditButton has no way of establishing ButtonCaption.

2 Problem:
I find no way to change the Height and Width of Cromium1 control.
It seems it is error of Lazarus.


After I got latest version of Lazarus:
lazarus-1.4.4-FPC-2.6.4-win32.exe
1. problem does not exist.

But many errors appear when I try to install Component (after compiling) .
For example:
datetimepickerpropedit.pas (72.42) Error: Identifier not found "TComponentEditor"

Please help me.
I need any version with posibility of change Width and Height of Cromium1 control.

Thank you, Yuri

Adnan Shameem said...

@Yuri
Great to hear that you found this article useful.
If I remember correctly, I used Lazarus 1.2.6 Windows 32 bit.
And I did not face any problems similar to you.
I will try it again in the 1.4.4 version and let you know.

Regards
Adnan

Iouri said...

Thanks by answer, Adnan!

This post really is good, now I am learning Lazarus seriously.

I speak now only about the version 1.4.4 of Lazarus.
In the folder
lazarus\components\fpCEF3-master\Examples\LCLSimple

is an example of using Chromium.
The project is simple.lpr

This example compiles fine, but after F5 appears error.

My main problem (in version 1.4.4 ) is:
From where get files libcef.dll?

As answer In https://github.com/dliw/fpCEF3 it's written:


Windows
Download CEF3 from here or here and copy all files from either Debug or Release to the folder your .exe is / will be in.


Well.
After download and decompress appears file libcef.dll.pdb.
How can be obtain libcef.dll from libcef.dll.pdb?
Adnan, do you know this?

Thanks!

Adnan Shameem said...

@Yuri
Thanks for the answer.
No, I did not know about this issue.
I did not face this problem either. Maybe it is related to the version 1.4.4.
I am looking forward to try this tutorial on 1.4.4 myself. Currently I have exams going on.
I will try this the next week and let you know.
A big thanks for trying it out and pointing out this issue.

Regards
Adnan

Iouri said...

Thank you, Adnan.

I am waiting for this tutorial for the version 1.4.4.

Regards.
Yuri

Łukasz Wittbrodt said...

If I use this method will I need to install chrome browser on target computer ? or is it independent?

Adnan Shameem said...

@Łukasz Wittbrodt
No, it is standalone. It will not need Chrome browser to be on target machine.
fpCEF has all the things needed for your browser.

Łukasz Wittbrodt said...

@Adnan Shameem
Good to know.
Thanks :)

Łukasz Wittbrodt said...

When I try to load url in OnFormCreate event, nothing happen - is it normal ?

trhodes said...

I've had some of the same issues with trying to use Chromium in Lazarus. It works great if you only have one form (Form1 initialized on startup). However, if you try to create Chromium on a second form called from the first form, things go crazy. I've tried different ways of trying to make this happen, but I get everything from multiple forms spontaneously being created (form1 being initialized again) to Chromium not displaying/showing to memory errors. It's been rough and I think I'm at the point of having to abandon Chromium because I cannot get it to display on Form2 when Form1 creates/shows Form2.

trhodes said...

btw, to illustrate my issue, here is some code. I can get it to "work" if I do some hacking, but this is not production worthy code. This is just a test application I am playing with to test Chromium.

Form1:
private
{ private declarations }

fChromium: TChromium;

procedure TForm1.FormCreate(Sender: TObject);
begin
fChromium := TChromium.Create(Self);
fChromium.Parent := Self;
end;

procedure TForm1.btnOpenClick(Sender: TObject);
begin
Form2.StartForm();
end;

-------------------------------------------------------------------

In From2:
private
{ private declarations }

fChromium: TChromium;

procedure TForm2.StartForm();
begin
try
Form2 := TForm2.Create(Application);
Form2.ShowModal;

except
FreeAndNil(Form2);
end;
end;

procedure TForm2.btnPlayClick(Sender: TObject);
begin
fChromium := TChromium.Create(Self);
fChromium.Parent := Self;
fChromium.AnchorAsAlign(alClient, 0);
fChromium.Load('https://www.youtube.com/embed/FUuMhg9NtxY');
fChromium.Show;
end;

Ann said...

Hi,

i have follow ur tutorial. but i got the error : Project SRSProject raised exception class external : SIGSEGV at address 7FFFFB3F9A69. I have installed Lazarus version 1.6.4 (Windows 10, 64 bit) and FPCEF3-3.2924.

Please help me.

Thank you.

Jan Stokłosa said...

i've the same error.

000007FED8C88243 48837a0800 cmpq $0x0,0x8(%rdx)

 
Copyright 2013 LazPlanet
Carbon 12 Blogger template by Blogger Bits. Supported by Bloggermint