10.29.2013 Create a Web Browser in Lazarus with Gecko (Part 1)

What web browsers do for us? They let us browse the internet, serve some wicked features that we love and let us customize them as we wish. Well, now it's time to make your own and customize it even further!


So, are you ready?

Introduction


Web browsers are software for browsing Internet Websites. And websites of today contain complex HTML codes, elaborate styling and very comprehensive javascripts. If we are to build a web browser ourselves then it would take forever! Even the web browsers we use, such as Firefox, Chrome, Internet Explorer, Safari are fruit of millions of lines of codes and thousands of hours of labor. So building a web browser from scratch is not an option. The second option is to build our browser based on other browser engines. Lazarus can use the following engines:

1. Turbopower internet pro control
2. QT Webkit
3. THtmlPort
4. GeckoPort
5. LazActiveX
6. LazWebKit

Turbopower ipro is installed in Lazarus by default. But it has limited functionality. No javascript, no flash etc. Not a real browser in today's web 2.0 era.

If you want to embed an IE frame in your software then LazActiveX is a good option. But I have never used it, so I know almost nothing about it. Also, it is not cross platform, as it depends on Internet Explorer to render pages.

I really like Firefox because of its addons and native looking interface. Firefox uses the Gecko engine which it uses to render the pages. Render means displaying the webpage. Gecko engine reads the website codes (HTML, CSS, Javascript etc.) and displays the webpage on screen and lets the user interact with it, e.g. scroll it, click on links, select things.

If we use Gecko engine for our browser then we can use the "featury" goodness of Firefox in our software. We can have javascript, CSS and Flash in our project! Gecko is indeed a good engine for standard browsing.

And don't get intimidated. It's very easy. You can get your browser working without writing a single command in the command prompt.

So, let's continue our browser project with Gecko.


Tutorial


Well, the question is how to use Gecko in Lazarus? Let's see... Gecko is not installed by default in Lazarus. So we need to install it. And also, Gecko should appear as a component in the toolbar. For that we will need to compile Lazarus with it installed (but it's not that hard because we can do it from inside Lazarus, with a few clicks.)


Step 1: Get GeckoPort for Lazarus and Install


Well, there is a GeckoPort version 2. But nobody could ever use it! It has errors in it or it is broken. So we will go after version 1. There is not that much of a difference as far as I know.

If you visit the GeckoPort1 wiki page, you will find no direct download link. There is an SVN link. But don't worry. I got it for you.

A. Getting GeckoPort source code:


If SVN is so complicated for you then download the source code from the link below:

https://db.tt/dugAn4No

Unzip it and you will get a geckoport_v1 folder. Now skip to step B.

The SVN way...
If you like to use SVN to get the source code yourself then you'll have to download it using an SVN client. You can use any client you want. But my personal favorite is the simplest: Subversion for Windows (a.k.a. win32svn). Install it, then you can use svn as you use in linux machines.

First, run the command prompt and cd to a directory, for example:

cd /D d:

Then run the command below:

svn co https://lazarus-ccr.svn.sourceforge.net/svnroot/lazarus-ccr/components/geckoport/version1 geckoport_v1



Now the Source Code for GeckoPort1 will be downloaded in the "geckoport_v1" directory. Again, you can avoid this commands by downloading the source code from the link mentioned above.

B. Installing GeckoPort components to Lazarus


No matter which way you chose, you should have a geckoport_v1 directory.

Now copy that geckoport_v1 directory to c:\lazarus\components directory. You can keep it in any directory, but I like the Lazarus installation to be contained within itself.



Now if you go to C:\lazarus\components\geckoport_v1\Components\ you will see GeckoComponents.lpk. Double click it. Lazarus will open up automatically and with a package window titled "Package GeckoComponents".



Click the "Compile" button on that window. See the messages window. It will eventually finish compiling and will show a message.



Now get back to the package window. Click More->Install. You will get a message that if you want to rebuild Lazarus. Click Yes.


Now Lazarus will be automatically rebuilt with the Gecko components and restart itself. (As I said before, its only a matter of some clicks. No command line stuff.)

C. Checking installation


In Lazarus, check out the toolbar. If Gecko components have been installed correctly then a new tab named "Gecko" should appear with 2 components inside it.


If they are visible to you then you have successfully installed Gecko Components. Congrats!!


Step 2: Get XULRunner


In order for GeckoPort project to work, you will have to give it some files which are used by Gecko to render the pages correctly. When you make an executable that uses Gecko components, there should be a XULRunner installation that it could find itself. The easier way to let find XULRunner is to extract the XULRunner to the same directory of the executable. Let's see it more in details...

Visit the website below and download XULRunner 1.9.2.x (not any later versions, it won't work):

https://developer.mozilla.org/en-US/docs/XULRunner/Old_Releases
Or, FTP archive for all previous versions: http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/ 
Or, homepage here: https://developer.mozilla.org/en/XULRunner

I am using XULRunner version 1.9.2.19.

If you extract XULRunner then you will get a directory named "xulrunner". You will have to keep it in the directory that has the executable of your little browser. Please do keep in mind that the XULRunner archive has everything on a xulrunner folder. Don't extract it to another xulrunner folder. Make sure that the files are under one single xulrunner directory. To ensure this, if you use any decompression utility (such as 7-zip, WinZip, WinRAR etc.) choose "Extract Here" option. Then cut and paste to appropriate directory.

The wiki says:
Currently the code looks for a xulrunner in the following order:

-    The ParamStr(1). This means the first parameter in command line. This is temporary for testing purposes only and it will be removed soon.
-    The application is located in the same folder as the xulrunner.
-    The xulrunner is located in a folder under application executable. Folder must be named "xulrunner".
-    Scan registry looking for a GRE "Gecko Runtime Environment".
-    Scan registry looking for a Firefox installation.

You could try the above options as well. But I like copying XULRunner to the same directory as the executable. It seems like rather a portable solution compared to other options.

If you are trying from any platform other than Windows to install XULRunner, then consult the GeckoPort wiki page. It has very useful information at the bottom regarding installing in Linux or MacOS.


Step 3: Testing the sample project


Go to C:\lazarus\components\geckoport_v1\SampleApps. Now you will see 2 projects. Try opening the GBrowser.lpi example and hitting Shift+F9 to build (not F9 or Run->Run). The executable should be generated. Now if you double click the executables then you will see an error message in the place of the Gecko Frame "Failed to initialize TGeckoBrowser".



This is because we haven't given it XULRunner. So extract and copy "xulrunner" directory in the C:\lazarus\components\geckoport_v1\SampleApps directory. Now run the executable again. And if everything is okey, you should see the webpage of Lazarus!!







Step 4: Making your own browser


See the part 2 of this tutorial for starting your own project for your web browser.

23 comments:

Willy Rose said...

Bonjour,

Avez-vous réellement testé l'installation de ce composant ? Le code génère une erreur lors de la compilation. Il ne peut donc pas être installé en l'état.

Cordialement

Adnan Shameem said...

Willy Rose

Sorry, I cannot understand your language. Could you post the comment in English?

Regards

Bobby Trinh said...

Hi, I'm Bobby,

I've got everything working and tested the xulrunner. How ever I can't seem to get the sample GBrowser.exe to work?... I'm getting this error. Project Browser.exe raised exception class 'Exception' with message: Missing Gecko runtime library: C\lazarus\components\geckoport_v1\SampleApps\xulrunner\nspr4.dll....
Can anyone help me...


My Email is: bobtrinh@shaw.ca

Skype: bobbytrinh-77-

Adnan Shameem said...

Bobby,

Which version of XULRunner did you download? GeckoPort v1 requires xulrunner-1.9.2. It doesn't support any other later version. From the message you provided, it seems that the DLL file's version does not match with the requirements of GeckoPort. Download XULRunner 1.9.2 from here and then try the GBrowser example with that.

Let me know if it worked.

Bobby Trinh said...

I got it solved:

This step is not required, but you can do it: edit nsInit.pas (from GeckoPort): find a function ReadDependentCB and replace last line (Raise Exception.Create...) with this one:

Raise Exception.Create('Missing Gecko runtime library: '+aDependentLib + ' Error code:' + IntToStr(GetLastError()));

Now build you application and try to run it. You will see that nspr4.dll not "Missing" but has invalid format (193: ERROR_BAD_EXE_FORMAT). This occurs because you trying to use 32bit xulrunner from x64 application. So, best solution for you is very simple: remove your 64bit lazarus and install 32bit version (because xulrunner have no 64bit version).

Adnan Shameem said...

Bobby,

Congrats!

I didn't try 64 bit Lazarus, so I did not face the problem. You were lucky to figure it out by yourself.

Bobby Trinh said...

Yeah I got some help from my friend, Evgeniy Pavlov, from Russian. He's for hire if you need some programming done or help, he's very good.

He's on Elance.



TwitDown said...

Well can you update that tutorial and try use the new version of Gecko ?Because this version don't open things in HTML5

TwitDown said...

i Tryed to use it with the tab system but it didnt worked(every tab show the same website)
Can you help with this and with the HTML 5 problem?

Adnan Shameem said...

@TwitDown
"Well, there is a GeckoPort version 2. But nobody could ever use it!"

- That's true. I never saw anyone get successful with version 2. There is a topic with lots of post about someone trying it (which I linked in the above text in the article). I tried it several times and failed miserably. Did you succeed with version 2?

eaa8c3d2-aeba-11e3-9544-000bcdcb8a73 said...

Thanks for your tutorial.
I have a question.
How can I manipulate the DOM with this component?

zbyna said...

@Adnan Shameem

I have tried Chromium Project for Free Pascal https://github.com/dliw/fpCEF3 and
it seems very promising sofar.
Yes it is based on multithreading means something new for me. But it is up-to-date, instalation is simple and it works :-)

Adnan Shameem said...

@eaa8c3d2-aeba-11e3-9544-000bcdcb8a73 !

You can check out this comment post by zbyna.

@zbyna

That looks great! Thanks for such an interesting find. I'll have a look into that. And maybe a tutorial is due as well. ;-)

lad said...

hi..i try to install geckos components but when i try to install said me this: make: *** No rule to make target `idepkg'. Stop.


how can i resolve this?

Adnan Shameem said...

@lad

Are you trying with the SVN version? May be the revision you checked out had some bug in the code that is not letting you compile.

Try svn up. May be developers have corrected the problem in the latest revision (given that they pushed the new revision).

Another safe way is to use the zip file that is provided in the article.

Regards
Adnan

lad said...
This comment has been removed by the author.
lad said...

nw the project was compiled...but i can't see the tab Gecko and the visual components in the palette tool

lad said...

mmmm i dont understand... before i have "installed" right th component but i did not see in the tool palette... so i have uninstall it...

now i'm trying to reinstall it and now it said me more one time that message:
make: *** No rule to make target `idepkg'. Stop.


i don't understand :|... but i tried with zip file and also with version on svn..... i dont know cause.


but..in case is it all ok..this is posible to compile for Osx or not?... thanks a lot

lad said...

mmmm i dont understand... before i have "installed" right th component but i did not see in the tool palette... so i have uninstall it...

now i'm trying to reinstall it and now it said me more one time that message:
make: *** No rule to make target `idepkg'. Stop.


i don't understand :|... but i tried with zip file and also with version on svn..... i dont know cause.


but..in case is it all ok..this is posible to compile for Osx or not?... thanks a lot

Pasquale Luciano said...

i add ctrl + for zoom page in the browser , how should I do ?

mogyee said...

when opening a new page i only get a msgbox with an OK button. can you pls help to figure how to handle popups. thanks

mogyee said...

I have figured it ;) just have to use another GeckoBrowser and it will display the popup windows

mogyee said...

Anyone know how to execute Javascript with Gecko?

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