How to develop a Google chrome theme?

Question

I have some design ideas for Google Chrome. I want to convert it into a theme.

I searched a lot, but did not find a satisfactory explanation on how to go about doing that. Do you know what needs to be done? Some link, perhaps?

Solution 1

Download any available theme for Chrome, like this one for instance.

Rename it so it has a .zip extension. Open it with your favorite archiving tool.

The theme is described in a file called manifest.json. It gives links to images used in the theme. They're in the "i" directory in the Greyscale one. The images are in PNG format.

Here is the format of the manifest.json file for Greyscale:

{
"version":"1.0",
"name":"Greyscale",
"theme":
{"images":
    {
    "theme_frame":"i/agxjaHJvbWV0aGVtZXNyDAsSBEZpbGUY6ZwBDA",
    "theme_toolbar":"i/agxjaHJvbWV0aGVtZXNyDAsSBEZpbGUY6pwBDA",
    "theme_button_background":"i/agxjaHJvbWV0aGVtZXNyDAsSBEZpbGUYtawBDA"
    },
"colors":
    {
    "frame":[32,32,32],
    "toolbar":[210,210,246],
    "tab_text":[0,0,0],
    "tab_background_text":[0,0,0],
    "bookmark_text":[0,0,0],
    "ntp_background":[235,235,235],
    "ntp_text":[0,0,0],
    "ntp_link":[0,0,120],
    "ntp_section":[210,210,210,1],
    "ntp_section_text":[0,0,0],
    "ntp_section_link":[0,0,120]
    },
"properties":
    {
    "ntp_background_alignment":"bottom",
    "ntp_background_repeat":"no-repeat"},
    "tints":
        {
        "buttons":[0.6,0,0.5]
        }
    }
}

Use this as a template for your own themes.

You'll find more information here too.

Solution 2

There is an official guide to creating themes on Chromium’s Google Code site.

Comments

[ChrisF]

More of a programming question this. I vote to migrate it to Stack Overflow.

[user882903]

how do I open the links in the i directory?? I need to know what size should the .png files be...

[Snark]

rename them with a .png extension and open them with a picture editor

[user882903]

okay, btw, why so complex names? Is there any problem in naming my .png file as, say, top.png?

[Snark]

no, see sample manifest in the last link of my answer

[Synetech]

Using an existing theme as a template is not good enough because many themes only modify parts of the browser. What if you want to change something that the theme author did not? How do you find out what names/properties/etc. to use?

[Greg]

link is dead, how do we get at this old content?

[gregh]

Here is a cache of the page from Aug 22, 2015, from the Internet Archive.