Web Sprocket(s) | Lesson 1 - First steps
Welcome to our first lesson on how to build a web browser!
We presume that you have already read the Introduction and have a Chromium repository set up as well. If you need more help setting up Chromium, here is what we did (when this guide was created the Chromium version was 47.0.2526.73).
Before we jump into the details, let’s clarify some important things.
First of all, we do everything from scratch (creating a git repository, committing patches, etc.) and our changes are attached as a git diff. So you don’t need to type everything by yourself.
You can also check the git repository where you can find and reuse our instructions. In the repository, every branch is a lesson, so you can just checkout one and continue from that point.
Let's start with a local repository to track your progress:
Now we have an empty repository. It is recommended to add some basic files to the repository such as gitignore, license, readme, etc. If you store the diff files in your repository, we suggest to ignore them in the .gitignore file.
The diff file here contains the modifications above.
The following command shows the generic form of applying a diff file:
If you are done, it is time to make your initial commit. In the sprocket folder execute these commands:
The Content API is a set of abstract classes which are found in
Our first source file will be a C++ file containing a main function:
Then create the entry point of the application:
The Content API’s main function is the ContentMain, whose initialization arguments are passed as a structure.
We are ready to build our first browser!
Chromium’s build system is based on gyp and ninja tools. The build files are generated with gyp (Generate Your Project) and ninja is responsible for invoking the generated commands. The gyp file contains a python dictionary with specific build options. You can read more about gyp and ninja by clicking on these two links.
The gyp file defines build targets and their dependencies, environmental variables and source files. In order to connect our newly created main file to the rest of Chromium’s build system we have to create a new gyp file (let’s call it
Keep in mind that every new source file which you want to build should be added to your gyp file! The diffs for each lesson always contain the gyp related lines as well.
At this point, you should be able to compile and run our example. The first build may take a longer time, but this time will be reduced by incremental builds later.
When you run the binary, nothing will be displayed on the screen. This is expected since we didn’t create any views in the application. In the next lessons we will show you how to create a view with Content API.
Now we have reached the end of our first lesson, and we hope you enjoyed it. Next time we start working on the application’s window.
Stay tuned for the upcoming lesson!
The Lesson 1 repository can be found here.