Welcome guest, is this your first visit? Create Account now to join.
Page 1 of 2 12 LastLast
Results 1 to 10 of 12

This is a discussion on Creating a Simple .crx theme within the Themes Development section, part of the Chrome Themes category: As some of you might know, Chrome started to have an official theme system in the last Dev build, but ...


  1. #1
    Stamga's Avatar
    Stamga is offline Super Moderator/Designer
    Join Date
    Mar 2009
    Location
    Qc, Canada
    Posts
    601

    Lightbulb Creating a Simple .crx theme

    As some of you might know, Chrome started to have an official theme system in the last Dev build, but it is very limited. Read more here. (You can download a sample .crx theme here)

    So I will show how to modify the .crx file to make your own customized theme:
    Note: You will need a .zip decompresser and compressor like WinRar

    1 - Right-click this link > Save link as... to save the .crx file to your drive.
    2 - Rename the theme.crx to theme.zip
    3 - Extract the files to a folder
    4 - Go into the images folder
    5 - Replace the theme_frame_camo.png with your custom header (top window background) image*
    6 - Replace the theme_toolbar_camo.png with your custom button bar image**
    7 - Delete or Replace the theme_ntp_background.png with your custom New Tab page background image
    8 - Delete or Replace the theme_ntp_background_norepeat.png with your custom New Tab page background image no-repeat***
    9 - Go back into the main folder
    10 - Open manifest.json with notepad
    11 - Replace "camo theme" with your theme's name
    12 - Mess with the color codes to change different parts' colors (ie: "frame": [ 71, 105, 91 ],)
    13 - Mess with the tint color codes to change the buttons' colors
    14 - Set the version number to your theme's current version
    15 - Save the file (Overwrite)
    16 - Follow the instructions here to pack the .crx file or use Waha's Extension Manager
    That's it!

    *Note: This will also replace the header in Windows Vista & 7
    **Note: The bottom of this image file is used as your bookmarks bar image
    *** I have no idea what's the difference between the two so try it out


    I hope I didn't make it too complicated for regular users, I did my best

    EDIT: To remove custom theme, go to (Wrench menu) > Options, under the Personal Stuff tab, click the Reset to default theme button
    Last edited by Stamga; 06-23-2009 at 11:35 PM.

  2. #2
    Waha's Avatar
    Waha is offline Senior Member
    Join Date
    Apr 2009
    Location
    Oregon
    Posts
    788

    Default

    Awesome! God I've been looking through the source off and on the past two days to try to figure everything about their theme iplementation out, I had just figured out the manifest format yesterday, and was really just looking for info on how the files were mapped to be for what part of the theme. Like if it was by filename or something, and what those filenames would be.
    Glad to see I don't have to sift through that anymore. ^^

    EDIT: I'll release everything I've found out and a new version of ExtensionManager with support for it later today. :]
    Last edited by Waha; 06-21-2009 at 12:11 AM.
    ~ Projects ~
    Specialized: Carapass Auction Watcher, Kongregate Chat
    Libraries: bliplib
    Tools: manifest syntax highlighting & snippits
    ~ Happy to make extensions for pay too ;D ~
    Portfolio: Search and Share

  3. #3
    Kyrax is offline Senior Member
    Join Date
    Apr 2009
    Location
    Qc, Canada
    Posts
    495

    Default

    Nice tutorial !
    Didn't expect themes to be packed in .crx as well.

  4. #4
    Stamga's Avatar
    Stamga is offline Super Moderator/Designer
    Join Date
    Mar 2009
    Location
    Qc, Canada
    Posts
    601

    Default

    @Waha: Cool. I'm glad it was useful

    @Kyrax: Me neither, until the admin sent me a PM asking me if I knew about them, then I read that blog and messed around the .crx to find out what did what.. But they don't have as much functionality as the default.dlls
    Last edited by Stamga; 06-21-2009 at 01:48 AM.


  5. #5
    Waha's Avatar
    Waha is offline Senior Member
    Join Date
    Apr 2009
    Location
    Oregon
    Posts
    788

    Default

    Quote Originally Posted by Stamga View Post
    @Waha: Cool. I'm glad it was useful

    @Kyrax: Me neither, until the admin sent me a PM asking me if I knew about them, then I read that blog and messed around the .crx to find out what did what.. But they don't have as much functionality as the default.dlls
    They actually do seem to, though I haven't really tested it yet. Almost there.
    ~ Projects ~
    Specialized: Carapass Auction Watcher, Kongregate Chat
    Libraries: bliplib
    Tools: manifest syntax highlighting & snippits
    ~ Happy to make extensions for pay too ;D ~
    Portfolio: Search and Share

  6. #6
    Waha's Avatar
    Waha is offline Senior Member
    Join Date
    Apr 2009
    Location
    Oregon
    Posts
    788

    Default

    Uhg. x.x Okay I'm done with everything, figured out all the theme stuff, modified my object browser extension to browse theme components, updated ExtensionManager to be able to make themes. However I'm too tired to update all the posts necessary and stuff right now so I'll release everything in the morning.
    However it turns out that either the themes are indeed not as powerful as the dlls, or I copied a resource incorrectly. I will go over it before posting in the morning.
    ~ Projects ~
    Specialized: Carapass Auction Watcher, Kongregate Chat
    Libraries: bliplib
    Tools: manifest syntax highlighting & snippits
    ~ Happy to make extensions for pay too ;D ~
    Portfolio: Search and Share

  7. #7
    Stamga's Avatar
    Stamga is offline Super Moderator/Designer
    Join Date
    Mar 2009
    Location
    Qc, Canada
    Posts
    601

    Default

    Cool I can't wait to see their features!


  8. #8
    Waha's Avatar
    Waha is offline Senior Member
    Join Date
    Apr 2009
    Location
    Oregon
    Posts
    788

    Default

    Since I packed one of Stagma's themes, he's requested to post it himself, so look forward to that post as it's the only way I'm releasing all the image names. (No way in hell I'm typing all those!)
    But here's my notes on the manifest for themes:
    Code:
    "theme": { //Optional
    	"images": {
             "theme_frame": "http://www.chromeplugins.org/google/images/theme_frame_camo.png",
    	}
    	"colors": {
             "frame": [0-255, 0-255, 0-255], //r,g,b
             "frame_inactive": [0-255, 0-255, 0-255, 0-255?] //r,g,b,a
    	}
    	"tints": {
             "buttons": [0.00-1.00, 0.00-1.00, 0.00-1.00] //r,g,b
    	}
    	"properties": {
    		"ntp_background_alignment": "top" || "bottom" || "left" || "right"
    	}
    }
    //Themes only allowed with:
    //  Extension::kDescriptionKey,= L"description";
    //  Extension::kIconPathKey,= L"icon";
    //  Extension::kNameKey,= L"name";
    //  Extension::kPublicKeyKey,= L"key";
    //  Extension::kSignatureKey,= L"signature"; //? unused? might be crx thing
    //  Extension::kThemeKey,= L"theme";
    //  Extension::kVersionKey= L"version";
    //Strings used by themes to identify colors for different parts of our UI.
    //  static const char* kColorFrame = "frame";
    //  static const char* kColorFrameInactive = "frame_inactive";
    //  static const char* kColorFrameIncognito = "frame_incognito";
    //  static const char* kColorFrameIncognitoInactive = "frame_incognito_inactive";
    //  static const char* kColorToolbar = "toolbar";
    //  static const char* kColorTabText = "tab_text";
    //  static const char* kColorBackgroundTabText = "background_tab_text";
    //  static const char* kColorBookmarkText = "bookmark_text";
    //  static const char* kColorNTPBackground = "ntp_background";
    //  static const char* kColorNTPText = "ntp_text";
    //  static const char* kColorNTPLink = "ntp_link";
    //  static const char* kColorNTPSection = "ntp_section";
    //  static const char* kColorNTPSectionText = "ntp_section_text";
    //  static const char* kColorNTPSectionLink = "ntp_section_link";
    //  static const char* kColorControlBackground = "control_background";
    //  static const char* kColorButtonBackground = "button_background";
    //Strings used by themes to identify tints to apply to different parts of
    //our UI. The frame tints apply to the frame color and produce the
    //COLOR_FRAME* colors.
    //  static const char* kTintButtons = "buttons";
    //  static const char* kTintFrame = "frame";
    //  static const char* kTintFrameInactive = "frame_inactive";
    //  static const char* kTintFrameIncognito = "frame_incognito";
    //  static const char* kTintFrameIncognitoInactive ="frame_incognito_inactive";
    //  static const char* kTintBackgroundTab = "background_tab";
    So if what you're looking at is a little confusing, allow me to explain my notation a little.
    Everything after a // is a comment, meaning it's not meant to be actually put into the manifest file.
    As you can see, there's four possible - what are called - Dictionaries for theme. (A Dictionary in chrome manifest lingo is something in a {} set.) These are "images", "colors", "tints", and "properties". The first three were portrayed in the example crx released by Google, properties however was not. Now I don't really know what the currently one property actually does, I think it has to do with the theme piece displayed on the new tab page, but I haven't looked into it. The || here mean "or", which shows that the only possible values for this are those four that are listed.

    Anyway, back to colors for a second, one thing that wasn't exampled about these was the alpha property. I couldn't really find info on the max values of the colours and stuff so this is kinda guess work, but considering the example values exceeded 100 my guess for the max is 255, however, alpha's might still be 100. Heck it might even be 0.00-1.00.
    And of course, rgb stand for red, green, blue.
    The tints' value limits were also a guess, but generally when decimals are used it's between 0 and 1, emulating a percentage (similar to 0-100).

    Now below all that are the comments which are definitions I ripped from the source code, you can ignore all the Extensions::kWhatever,= L and related and just look at what's in the quotes. The first list, "Themes only allowed with" is a list of standard manifest properties that can be used in a theme's manifest. NO OTHER properties can be used, not even "format_version" oddly enough.

    The next list are the possible properties to be used in the "colors" Dictionary.
    And the last list is the same idea, but for the "tints" Dictionary.
    ~ Projects ~
    Specialized: Carapass Auction Watcher, Kongregate Chat
    Libraries: bliplib
    Tools: manifest syntax highlighting & snippits
    ~ Happy to make extensions for pay too ;D ~
    Portfolio: Search and Share

  9. #9
    ducktape is offline Senior Member
    Join Date
    Apr 2009
    Location
    Oregon
    Posts
    213

    Default

    Quote Originally Posted by Stamga View Post
    16 - Pack the whole thing up using WinRar
    17 - Rename your .zip file to a .crx file
    I don't get those two steps. So can someone please help me because when I do them and I try to install the theme here's what I get:
    Attached Thumbnails Attached Thumbnails untitled.jpg  

  10. #10
    Waha's Avatar
    Waha is offline Senior Member
    Join Date
    Apr 2009
    Location
    Oregon
    Posts
    788

    Default

    Quote Originally Posted by Clouds View Post
    I don't get those two steps. So can someone please help me because when I do them and I try to install the theme here's what I get:
    Don't follow those steps, the crx format has an added header before the zip header, use the normal extensions packing method to pack it, after modifying the name and stuff in the manifest file.
    That method is described here.
    ~ Projects ~
    Specialized: Carapass Auction Watcher, Kongregate Chat
    Libraries: bliplib
    Tools: manifest syntax highlighting & snippits
    ~ Happy to make extensions for pay too ;D ~
    Portfolio: Search and Share

Page 1 of 2 12 LastLast

Similar Threads

  1. Creating a Google Search history page
    By dae in forum Chrome Tips & Tricks
    Replies: 1
    Last Post: 05-29-2009, 08:50 PM
  2. creating plug ins?
    By zzzxtreme in forum Chrome Plugins
    Replies: 1
    Last Post: 04-29-2009, 06:50 AM
  3. Simple javascript not working - OK on Firefox, IE etc,
    By Skibrowse in forum Bugs and Vulnerabilities
    Replies: 0
    Last Post: 04-17-2009, 10:52 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •