Web Sprocket(s) | Lesson 1 - First steps

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).

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.

If you are done, it is time to make your initial commit. In the sprocket folder execute these commands:

$ git add --all
$ git commit -m “Initial commit”
## if you have an online repository, you can push it or leave it as it is

The Content API is a set of abstract classes which are found in content/public folder. Implementing these classes is the way to use the API. In this project, we follow the style recommendation of the Content API (like the naming conventions of its directory structure: app, browser, renderer, etc).

Our first source file will be a C++ file containing a main function: app/main.cc. The first step is to include the Content API’s main header file.

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 sprocket.gyp):

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.