中财网重庆南山 好玩:教你玩：如何创建自己的Chrome主题
来源：百度文库 编辑：中财网 时间：2024/05/09 14:18:54
来源How to Create a Chrome Theme from Your Favorite Wallpaper
网上有很多精美的Chrome主题，可以用来打扮你的Chrome浏览器，看了这么多，是不是有点冲动，想搞一个属于自己的主题呢；把自己家人的照片、把自己喜欢的颜色设置进去，肯定很有成就感，好吧，开始动手吧；
制作Chrome主题无需任何编程知识，不需要html语法，不需要javascript程序等等，它仅仅是一个扩展，很符合Google的风格；Chrome主题包括两部分内容：几张图片和一个manifest文件；
然后把这些东东打包成crx格式的文件（crx格式其实和zip格式一样也是一个压缩文件包而已，只是这个格式是Google Chrome使用的）；让我们看看以前贴耳网发布的Chrome奥迪A6主题中的图片：
未处理前：
处理后：
你会发现背景图有做一些修改；做修改的目的是为了让图标能够更清楚的显示；
好了，现在你得准备一下东东：
一张图，你准备作为背景用的；
一个图形编辑器，可以用来编辑图形的（比如：Paint.Net、PS、FW等）
一个文本编辑器，比如Windows自带的记事本，或者贴耳网介绍的NotePad++，或者EditPlus等等；
一些想法，包括你准备怎么设计你自己的主题
准备好这些，就开始动工了；
第一步：创建一个主题的目录
创建一个主题的单独的目录，比如叫：我的主题；以后在这个目录下创建一个图形文件夹，比如叫：images；
第二步：创建图形
一个Chrome主题要4个图形元素和1个可选的图形来完成，这些图形必须为PNG格式的，如果不是这个格式，你需要进行格式转换（比如你可以在这个在线转换网站进行格式转换，或者使用图形处理工具进行格式转换）；
主题框架（Theme frame）：这个图片作为你的Chrome的主题的整个框架图片，并包括最大化、最小化和关闭等按钮图；如果你决定不使用这个，那么Chrome将使用默认的主题和操作系统默认的标题栏来显示；这张图上下高度最小30px，左右宽度没有限制；
主题工具栏（Theme toolbar）：这张图片作为前进、后退、刷新等按钮的背景、以及扩展工具栏的背景；它和当前标签与工具栏放一起的；这张图上下高度为120px，左右宽度没有限制；
主题选项卡背景（Theme Tab Background）：这张图是在打开多选项卡的时候，非活动选项卡的背景图；这张图上下高度为65px，左右宽度没有限制；
新标签页背景（New Tab Page Background）：当打开一个新的标签页的时候显示的图；推荐最小的图形大小是800X600，但是最好是要适合你屏幕的分辨率；
主题署名（Theme Attribution）：这个是显示在主题右下角的，是可选的项目；代表这个主题是谁创建滴；比如我可以把贴耳网的Logo和名字加进去；别人下载主题并安装之后，就会在右下角看到贴耳网的文字和标志了；
当你准备好这些图，并且拷贝到你的图形目录下之后，就可以按照底下的步骤一步一步做吧；
图像制作的一些提示信息：
使用相同或者相近的颜色来制作主题图片；
你可以使用任何图形处理工具来处理你的图形，主要是调整大小已适应你屏幕的需要；
如果你想使用渐变来制作图形，你可以使用这个网上工具来实现；
一般经验来说，黑色的框架需要搭配相对来说更亮的选项框背景；当然，你可以根据你的喜好来自定义；
第三步：创建manifest文件
每一个Chrome主题、可安装的WEB应用以及Chrome扩展，都需要一个JSON的manifest文件，文件名叫manifest.json，这个文件包含了给浏览器的所有信息（JSON仅仅是一种数据格式）；它包含4个元素：图形（images）、颜色（colors）、色彩（tints）和属性（properties）；这里大头提供一个实例，可以很好的应用的实例，也可以从Google下载实例，下载地址在这里；
{
"version": "1.0",
"name": "My Theme",
"theme": {
"images" : {
"theme_frame" : "images/frame.png",
"theme_toolbar" : "images/toolbar.png",
"theme_ntp_background" : "images/background.png",
"theme_tab_background" : "images/tab.png",
"theme_ntp_attribution" : "images/theme_ntp_attribution.png"
},
"colors" : {
"ntp_link": [255,255,255],
"ntp_text": [255,255,255],
"ntp_section_link": [255,255,255],
"ntp_section_text": [10 , 17 , 27],
"ntp_background": [10 , 17 , 27],
"frame": [10 , 17 , 27],
"toolbar": [10 , 17 , 27],
"tab_text": [255,255,255],
"tab_background_text": [10 , 17 , 27],
"bookmark_text": [255,255,255]
},
"tints" : {
"buttons" : [0.33, 0.5, 0.47]
},
"properties" : {
"ntp_background_alignment" : "bottom",
"ntp_background_repeat": "no-repeat"
}
}
}
好了，文件内容就如上述，现在解释一下：
images：我们在第二步创建的5张图形，就在这里进行定义；按照第二步说明的意思放入对应的项目即可，注意文件名和目录都要正确；
colors：每一个元素都定义了主题中不同部分的颜色；对应的关系如下：状态条的颜色和工具栏的颜色一样；
状态条上文字的颜色和标签上的文字颜色一样；
工具条的按钮文字颜色和标签文字颜色一样；
tints ：这个色彩元素定义了主题内所有按钮的（前进、后退、刷新等）图标色调；这个值是从0到1或-1的浮动值；我们只使用了一个元素“button”，这个是最常用的；
properties：在主题中，你可以使用这个来调整主要背景图像的显示方式；你可以将图像对齐到顶部、底部或者浏览器的中心，还可以选择沿着X轴或者Y轴重复显示，或者不重复显示等；
现在你的manifest文件也准备好了，保存到你的主题目录下；如下图所示，你还可以从Google下载一个蓝色的主题包，以后在这个主题包上进行修改，这样就简单多了；
第四步：打包并预览你的主题
经过上面三步，文件和图形都准备好了，现在可以进行打包和预览了；打开Google Chrome，进入扩展程序；或者你直接在地址栏里面输入“chrome://extensions/”，也可以打开扩展程序；
点击右边的开发人员模式，以后点击上面出现的按钮“载入正在开发的扩展程序...”；以后将你刚才制作的主题目录加载进来；
如果一切顺利的话，你制作的主题就会在Chrome上加载啦；看看效果吧，是不是所有都很完美；
故障：如果出现提示说加载失败，你得检查一下你的manifest文件格式是否正确，并且文件名是否叫manifest.json；你可以使用JSON验证器来验证格式；错误的提示也会明确提示是哪一行出错，你会很容易发现并修改错误的；
好了，如果你感觉主题很满意，你就可以点击“打包扩展程序...”按钮，打包你的主题啦，打包好的文件会放到你的主题目录下；
如果你制作了几个Chrome主题之后，就会发现制作这个其实非常简单；Chrome可以允许你做很多的自定义的设置，上述manifest文件的内容只介绍了很小一部分的内容，如果你想知道更多有关manifest的内容，你可以参阅Chromium theme creation guide。
上面的步骤看起来很复杂，其实很简单的，你只要按照步骤，使用那些模板，直接一步一步操作，就可以制作一个属于自己的Chrome主题了。
网上有很多精美的Chrome主题，可以用来打扮你的Chrome浏览器，看了这么多，是不是有点冲动，想搞一个属于自己的主题呢；把自己家人的照片、把自己喜欢的颜色设置进去，肯定很有成就感，好吧，开始动手吧；
制作Chrome主题无需任何编程知识，不需要html语法，不需要javascript程序等等，它仅仅是一个扩展，很符合Google的风格；Chrome主题包括两部分内容：几张图片和一个manifest文件；
然后把这些东东打包成crx格式的文件（crx格式其实和zip格式一样也是一个压缩文件包而已，只是这个格式是Google Chrome使用的）；让我们看看以前贴耳网发布的Chrome奥迪A6主题中的图片：
未处理前：
处理后：
你会发现背景图有做一些修改；做修改的目的是为了让图标能够更清楚的显示；
好了，现在你得准备一下东东：
一张图，你准备作为背景用的；
一个图形编辑器，可以用来编辑图形的（比如：Paint.Net、PS、FW等）
一个文本编辑器，比如Windows自带的记事本，或者贴耳网介绍的NotePad++，或者EditPlus等等；
一些想法，包括你准备怎么设计你自己的主题
准备好这些，就开始动工了；
第一步：创建一个主题的目录
创建一个主题的单独的目录，比如叫：我的主题；以后在这个目录下创建一个图形文件夹，比如叫：images；
第二步：创建图形
一个Chrome主题要4个图形元素和1个可选的图形来完成，这些图形必须为PNG格式的，如果不是这个格式，你需要进行格式转换（比如你可以在这个在线转换网站进行格式转换，或者使用图形处理工具进行格式转换）；
主题框架（Theme frame）：这个图片作为你的Chrome的主题的整个框架图片，并包括最大化、最小化和关闭等按钮图；如果你决定不使用这个，那么Chrome将使用默认的主题和操作系统默认的标题栏来显示；这张图上下高度最小30px，左右宽度没有限制；
主题工具栏（Theme toolbar）：这张图片作为前进、后退、刷新等按钮的背景、以及扩展工具栏的背景；它和当前标签与工具栏放一起的；这张图上下高度为120px，左右宽度没有限制；
主题选项卡背景（Theme Tab Background）：这张图是在打开多选项卡的时候，非活动选项卡的背景图；这张图上下高度为65px，左右宽度没有限制；
新标签页背景（New Tab Page Background）：当打开一个新的标签页的时候显示的图；推荐最小的图形大小是800X600，但是最好是要适合你屏幕的分辨率；
主题署名（Theme Attribution）：这个是显示在主题右下角的，是可选的项目；代表这个主题是谁创建滴；比如我可以把贴耳网的Logo和名字加进去；别人下载主题并安装之后，就会在右下角看到贴耳网的文字和标志了；
当你准备好这些图，并且拷贝到你的图形目录下之后，就可以按照底下的步骤一步一步做吧；
图像制作的一些提示信息：
使用相同或者相近的颜色来制作主题图片；
你可以使用任何图形处理工具来处理你的图形，主要是调整大小已适应你屏幕的需要；
如果你想使用渐变来制作图形，你可以使用这个网上工具来实现；
一般经验来说，黑色的框架需要搭配相对来说更亮的选项框背景；当然，你可以根据你的喜好来自定义；
第三步：创建manifest文件
每一个Chrome主题、可安装的WEB应用以及Chrome扩展，都需要一个JSON的manifest文件，文件名叫manifest.json，这个文件包含了给浏览器的所有信息（JSON仅仅是一种数据格式）；它包含4个元素：图形（images）、颜色（colors）、色彩（tints）和属性（properties）；这里大头提供一个实例，可以很好的应用的实例，也可以从Google下载实例，下载地址在这里；
{
"version": "1.0",
"name": "My Theme",
"theme": {
"images" : {
"theme_frame" : "images/frame.png",
"theme_toolbar" : "images/toolbar.png",
"theme_ntp_background" : "images/background.png",
"theme_tab_background" : "images/tab.png",
"theme_ntp_attribution" : "images/theme_ntp_attribution.png"
},
"colors" : {
"ntp_link": [255,255,255],
"ntp_text": [255,255,255],
"ntp_section_link": [255,255,255],
"ntp_section_text": [10 , 17 , 27],
"ntp_background": [10 , 17 , 27],
"frame": [10 , 17 , 27],
"toolbar": [10 , 17 , 27],
"tab_text": [255,255,255],
"tab_background_text": [10 , 17 , 27],
"bookmark_text": [255,255,255]
},
"tints" : {
"buttons" : [0.33, 0.5, 0.47]
},
"properties" : {
"ntp_background_alignment" : "bottom",
"ntp_background_repeat": "no-repeat"
}
}
}
好了，文件内容就如上述，现在解释一下：
images：我们在第二步创建的5张图形，就在这里进行定义；按照第二步说明的意思放入对应的项目即可，注意文件名和目录都要正确；
colors：每一个元素都定义了主题中不同部分的颜色；对应的关系如下：状态条的颜色和工具栏的颜色一样；
状态条上文字的颜色和标签上的文字颜色一样；
工具条的按钮文字颜色和标签文字颜色一样；
tints ：这个色彩元素定义了主题内所有按钮的（前进、后退、刷新等）图标色调；这个值是从0到1或-1的浮动值；我们只使用了一个元素“button”，这个是最常用的；
properties：在主题中，你可以使用这个来调整主要背景图像的显示方式；你可以将图像对齐到顶部、底部或者浏览器的中心，还可以选择沿着X轴或者Y轴重复显示，或者不重复显示等；
现在你的manifest文件也准备好了，保存到你的主题目录下；如下图所示，你还可以从Google下载一个蓝色的主题包，以后在这个主题包上进行修改，这样就简单多了；
第四步：打包并预览你的主题
经过上面三步，文件和图形都准备好了，现在可以进行打包和预览了；打开Google Chrome，进入扩展程序；或者你直接在地址栏里面输入“chrome://extensions/”，也可以打开扩展程序；
点击右边的开发人员模式，以后点击上面出现的按钮“载入正在开发的扩展程序...”；以后将你刚才制作的主题目录加载进来；
如果一切顺利的话，你制作的主题就会在Chrome上加载啦；看看效果吧，是不是所有都很完美；
故障：如果出现提示说加载失败，你得检查一下你的manifest文件格式是否正确，并且文件名是否叫manifest.json；你可以使用JSON验证器来验证格式；错误的提示也会明确提示是哪一行出错，你会很容易发现并修改错误的；
好了，如果你感觉主题很满意，你就可以点击“打包扩展程序...”按钮，打包你的主题啦，打包好的文件会放到你的主题目录下；
如果你制作了几个Chrome主题之后，就会发现制作这个其实非常简单；Chrome可以允许你做很多的自定义的设置，上述manifest文件的内容只介绍了很小一部分的内容，如果你想知道更多有关manifest的内容，你可以参阅Chromium theme creation guide。
上面的步骤看起来很复杂，其实很简单的，你只要按照步骤，使用那些模板，直接一步一步操作，就可以制作一个属于自己的Chrome主题了。