Do It Yourself - Chromium Web Application Container

First you'll need to install Microsoft Visual Studio 2010. According to the Chromium wiki this is the preferred toolchain for building Chromium on Windows. Support for Microsoft Visual Studio 2008 will be deprecated in the near future. The Chromium discussion groups have a few posts on attempting to build with the Mingw32 compiler. However it's not supported by the Chromium Project, and gclient does not create project files for this compiler. Some people also attempt to use Cygwin, and have got it working. However, staying within the preferred toolchain is definitely the path of least resistance.

Microsoft Visual Studio 2010 express can also be used for building the Chromium project. For complete details on this please see the Chromium wiki. There aren't many deviations from what was tested in this article but there are few.

*info*Download and install a copy of Microsoft Visual Studio from Microsoft's website or through the Microsoft Developer Network. Also you can download the Microsoft Visual C++ 2010 Express for free.*endinfo*

Next you'll need to install the Microsoft Windows SDK for Windows 7 and .NET Framework 4. This SDK contains compilers, header files and libraries that you'll need to compile the Chromium Project, and most any Win32 application.

*info*Download and install the Microsoft Windows SDK for Windows 7 and .NET Framework 4.*endinfo*

Next you need to install the DirectX Software Development Kit. DirectX is a build dependency of the Chromium Project and is needed to support accelerated graphics which are often used in HTML5 application.

Even though it's not the second Tuesday of the month (patch Tuesday), the you will still need a patch. Before Chromium can be compiled, it's a good idea to install Visual Studio 2010's Service Patch one.

Since the Chromium Project is available either by Git or SVN, the developer has some flexibility to choose the tools that integrate best into his or her workflow. For the purposes of this article, all we need to do is to synchronize with the repository. So either Git or SVN will do just fine.

• Installing Git
  

  Git on Windows has traditionally been difficult and not very well supported. However, the msysgit project has made this project much easier, you can also combine this tool with the TortoiseGit project which provides access to Git from the Windows Explorer context menu.

• Installing Subversion (SVN)
  

  If Subversion is your preferred version control system, then the TortoiseSVN is a well-known project that has been around for a number of years. SVN was the original version control system that the Tortoise team integrated into Windows Explorer.

• Install with Git
  Lastly, you will need to install the Chromium depot tools. If you've installed msysgit, you can open up the GitBash application, change directories to your preferred installation directory for the depot tools, and type the following.

  terminal $ cd c:/ $ mkdir chromium $ cd chromium $ git clone https://git.Chromium.org/Chromium/tools/depot_tools.git endterminal

  This will make a copy of the depot tools repository to your local computer.

  For detailed information on how to do this you can see the Install Depot Tools Page on the Chromium wiki.

  Lastly, add the depot tools directory to your Windows Path variable.

• Install Subversion
  

  If you're using TortoiseSVN an open Windows Explorer to the directory into which you wish to install the depot tools. right-click and select "SVN Checkout". In the "URL of Repository" text field enter the following URL:

  https://src.Chromium.org/viewvc/chrome/trunk/tools/depot_tools/

  This will make a copy of the depot tools directory from the Chromium subversion source repository.

  When you're finished copying the repository, you will need to add it to the directory to the Windows path variable. For example if you downloaded the depot tools to the directory c:\Chromium\depot_tools, you will need to add the directoryc:\Chromium\depot_tools\bin to the Windows PATH environmental variable.

• Put Depot Tools Directory in the PATH
  

  info*Add the depot tools directory to your the PATH environment variable*endinfo

• Installing the dependencies for depot tools
  

  The first time that you run gclient, it will install the dependencies that it needs to run including: git, python and subversion. After the dependencies are finished installing, a list of all the commands that can be used with gclient are printed. these commands are very similar to other commands that you may have used in Subversion or Git,such as cleanup, fetch, diff, revert, status, sink and update. image 13

  Now to the depot tools are installed and ready to use we can proceed to configuring them and obtaining a copy of the Chromium source code.

GYP is a Python tool that allows you to specify build configuration information in a Python dictionary. It's platform independent which is a big advantage from a multi-platform project such as Chromium. GYP can generate platforms specific project descriptions and build scripts, including Microsoft Visual Studio Solution files, Xcode project files and GNU make files.

• Configure GYP before generating the Visual Studio Solution Files
  In order to build on a Windows platform only a very small amount of configuration needs be done. Specify the version of the Windows SDK by setting the 'msbuild_toolset' variable in %USERPROFILE%\.gyp\include.gypi.

  info mkdir $Env:userprofile\.gyp cd $Env:userprofile\.gyp notepad include.gypi endinfo

  Create the file if needed and copy this into it:

  {
    'target_defaults': {
      'msbuild_toolset': 'Windows7.1SDK',
    },
  }
  

For the configurations files that we are about to setup, we'll create a couple of environment variables. These act as shorter names to specific directories or as configuration variables.

Create a Windows environmental variable called DXSDK_DIR and set it equal to the location of the Direct X SDK. Create a Windows environmental variable called GYP_MSVSVERSION and set it equal to '2010'. This will cause GYP to generator files for Microsoft Visual Studio 2010.

Add the include and library paths to the Microsoft.Cpp.Win32.user.props files. It's located in '%LOCALAPPDATA%\Microsoft\MSBuild\v4.0\' directory. On my computer, I'm logged in as the user "intelssg" and the value of %LOCALAPPDATA% is equal to 'c:\Users\intelssg\AppData\Local\'

Under "Include files" add $(DXSDK_DIR)\include. Under "Library files" add $(DXSDK_DIR)lib\x86.

Be sure you are adding both entries to the front of the lists.

The contents of the file on my Ultrabook looks like this:

<?xml version="1.0" encoding="utf-8"?> <Project DefaultTargets="Build" ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003"> <PropertyGroup> <IncludePath>$(DXSDK_DIR)\include;$(IncludePath);$(WDK_DIR)\inc\atl71;$(WDK_DIR)\inc\mfc42</IncludePath> <LibraryPath>$(DXSDK_DIR)\lib\x86;$(LibraryPath);$(WDK_DIR)\lib\ATL\i386</LibraryPath> </PropertyGroup> </Project>

*info*cd %CHROMIUM_HOME% $ gclient config http://git.chromium.org/chromium/src.git –git-deps endinfo Configure the gclient by typing 'gclient config'

Open your .gclient file and insert the following text

solutions = [
  { "name"        : "src",
    "url"         : "http://src.chromium.org/svn/trunk/src",
    "deps_file"   : "DEPS",
    "managed"     : True,
    "custom_deps" : {
      "src/third_party/WebKit/LayoutTests": None,
      "src/chrome_frame/tools/test/reference_build/chrome": None,
      "src/chrome/tools/test/reference_build/chrome_mac": None,
      "src/chrome/tools/test/reference_build/chrome_win": None,
      "src/chrome/tools/test/reference_build/chrome_linux": None,
    },
    "safesync_url": "",
  },
] 

For more information about the initial check out using Git see UsingNewGit

<div class="terminal">gclient runhooks</div>

You can get the source code to the Chromium project from its repository. Here you will want to read over the Chromium wiki page entitled how to get the code. http://www.Chromium.org/developers/how-tos/get-the-code The Google guide to using Git is an excellent source for learning how to wield Git. It can be found at http://code.google.com/p/Chromium/wiki/UsingNewGit. Create a directory to hold your source code. This example assumes c:\Chromiumtrunk, but other names are fine. Important: Make sure the full directory path has no spaces. In a shell window, execute the following commands: cd c:\Chromiumtrunk gclient config https://src.Chromium.org/chrome/trunk/src svn ls https://src.Chromium.org/chrome and permanently accept the SSL certificate. To download the initial code, update your checkout as described below.

For faster updates gclient can be given a jobs flag liek this.

For a faster update, use the -j / –jobs flag to update multiple repositories in parallel, for example: gclient sync –jobs 12

• Get a specific version of the Chromium source code.
  

  For a production application you will probably want to checkout a specific release of Chromium rather than the bleed edge of the repository.

  For example, if you wanted the source for build 5.0.330.0, the following command would be appropriate:

  gclient config https://src.Chromium.org/chrome/releases/5.0.330.0

The Chromium Content module is located src\content directory of the Chromium project, and it contains all the functionality to render a page using a multi-process sandboxed browser. This includes the features of the web platform, HTML5, JavaScript, CSS and GPU acceleration.

The Chromium Content module exists to isolate developers from in the inner workings for page rendering, and to build the Content API that is the preferred way that developers can access content functionality. The Content module should rely completely on the Content API and be separate from other parts of the system and other API calls.

The Content Shell is a minimal application that embeds the content module to render web pages. This also means that developer looking to embedded Chromium can begin with the Content module as use the Content Shell application as a guide for their own embedding projects.

For more information about the Chromium Content Module or the Content API, you can visit http://www.Chromium.org/developers/content-module and http://www.Chromium.org/developers/content-module/content-api

Your first task will be to create a directory that hosts the starting point of your HTML5 application.

In the directory, %CHROMIUM_ROOT%\src\content\shell open "shell_{browsermainparts}.cc" and go to line 32 in the GetStartupURL() functions. Change the startup URL from "http://www.google.com/" to "///__app/index.html", or whatever you like. This will allow you to create a directory named "__app" (or what you like) in the same directory as the content_shell.exe that contains an entry point for your HTML5 application.

Next, we'll comment out the browser chrome (menus, buttons, toolbars, etc …) so that the content_shell.exe is nothing but a blank canvas for you HTML5 application.

In the same directory, %CHROMIUM_ROOT%\src\content\shell open "shell_win.cc" and go to line 30.

Change: const int kURLBarHeight = 24; const int kURLBarHeight = 0;

Then jump down to line 110 which is:

HWND hwnd;

Begin a multi-line comment.

/* HWND hwnd;

Jump down to line 146, just before the ShowWindow function call.

ShowWindow(window_, SW_SHOW);

and end the comment and set the menu to null

*/
SetMenu(window_, NULL);
ShowWindow(window_, SW_SHOW);

Congratulations, you may now compile.