Instructions to mod Chromium

Chromium_hacks.md

Chromium hacks

Resource Map

Tools

pak-tools

In OSX, the target .pak file is /Applications/Chromium.app/Contents/Versions/[VERSION]/Chromium Framework.framework/Resources/resources.pak.

Make sure to save a backup of this file!

With pak-tools installed:

cd "[pak-tools root folder]"
python unpack.py "/Applications/Chromium.app/Contents/Versions/[VERSION]/Chromium Framework.framework/Resources/resources.pak"

The files are now exposed in the new resources directory. However, they are named by number and not by the filename you see in the browser. To lookup the names, search for the containg .grd file like this. Note the element name that holds the filename. It will either be include or structure.

      <structure name="IDR_WEBUI_CSS_CHROME"
                 file="css/chrome_shared.css" type="chrome_html"
                 flattenhtml="true" />
      <structure name="IDR_WEBUI_CSS_CONTROLLED_INDICATOR"
                 file="css/controlled_indicator.css" type="chrome_html" />
      <structure name="IDR_WEBUI_CSS_DIALOGS"
                 file="css/dialogs.css" type="chrome_html" />

Then you can get a range of possible filenames by searching for the listing of that .grd file here. The file you are looking for will be in a range starting at the number specified by "includes": if the element name from earlier was include, or "structures": if it was structure. Also, watch out because they may have a different file extension. If they do, don't worry, as the packer ignores any file extensions anyway.

Here are some I have already found:

Chrome Filename	Resource Filename
chrome://resources/css/chrome_shared.css	2210.css
chrome://resources/css/trash.css	2216.css
chrome://resources/css/widgets.css	2219.css
chrome://settings-frame/	23201.html

When finished, just run

cd "[pak-tools root folder]"
python pack.py "/Applications/Chromium.app/Contents/Versions/[VERSION]/Chromium Framework.framework/Resources/resources"

Examples

In chrome_shared.css, try appending

/* Begin custom settings theme */
body {
  background-color: #232323;
  color: #888 !important;
}
h1 {
  color: #82A9D6;
}
h3 {
  color: #FFF;
}
:-webkit-any(.checkbox, .radio) label:hover {
  color: #2CBCFF;
}
html#uber ul button {
  background-color: transparent;
  color: #2CBCFF;
}
body .page header{
  background-image: -webkit-linear-gradient(#232323, #232323 40%, rgba(35, 35, 35, 0.92));
}

This will theme the settings pages a nice dark theme of my own creation.

This information is provided without warranty and the author is not liable for anything!!