Chrome 美化终极教程：从图标到标签页，我们整理了所有能定制的地方

少数派

苹果产品等 3 个话题下的优秀答主

上一次跟大家分享了美化 Chrome 新建标签页的扩展合辑，有幸获得读者们的反馈，这次关于 Chrome 分享依然是围绕着美化主题，希望借着这个机会，让我们来一次彻底美化 Chrome 的旅程。

这一次我们的目标是：

从图标到历史记录的页面，甚至是浏览器的侧边滚动条，都会是我们这次美化改造的对象；
提升浏览体验。比如通过更换网页背景，更好地适应夜间阅读的需要等等，我们会从美化的角度，改造出有更好阅读体验的浏览界面；
美化兼具实用，这次美化浏览器的旅程会在美观的基础上，如何发挥实用和效率，这会是我们的终极目标。

桌面图标

Chrome 浏览器图标经历了从 3D 效果过渡到被拍扁的变化:

如何更换 Chrome Windows 版的应用图标？默认的桌面图标被放在了文件夹路径是 C:\Users\Administrator\AppData\Local\Google\Chrome\Application 。回到系统桌面，右键 Chrome 应用图标，依次选择「属性 - 快捷方式 - 更改图标」，选择已经准备好的 ico 图标文件。

在这里推荐两个不错的图标网站 iconfinder 、 icons8 ，还有两个支持 PNG 转为 ICO 文件在线网站 icovert 、 convertico 。下面是我曾经更换的 Chrome 图标样式：

主题

Chrome Store 网上商店提供了大量的主题背景皮肤，Google 自家出品了 39 款主题背景（传送门），其中最受欢迎的是 Late Night ，黑色的主题色相当适合夜间模式使用。目前我正在使用的是另外一款由 vadio 出品的主题 Designer Theme ，黑色 + 灰色阴影效果兼顾了夜间使用浏览器和阅读体验。

新建标签页

Chrome 浏览器的新标签页 chrome://newtab 成为了美化和效率的必争之地，上次跟大家分享了让「新标签页」变得好看又实用的文章，不少读者留言反馈还有漏网之鱼，所以趁这次教程的机会，补充推荐之前没有提到的优秀插件:

简 Tab

简 Tab 是由 SimpRead 作者 Kenshin 所开发的另一款 Chrome 插件，插件去除了多余的功能，默认界面是高品质的壁纸，侧边工具栏则采用了淡入淡出的交互方式。简 Tab 支持每日更换来自 Bing.com 的背景壁纸，用户可以在 bing、wallhaven、unsplash、flickr、500px 等多个背景源自由切换。简 Tab 提供了简单 / 高级 / 隐藏三种模式显示常用网站，以及收藏夹、历史记录的功能入口。

Lanes

Lanes 作为一款 todo 类型的新标签页扩展，本身支持 Chrome、 Android 平台，初始安装扩展后需要注册账号完成登录同步的步骤。Lanes 采用了简洁的界面设计和细长的显示字体，其明显的特点之一就是番茄钟功能。用户可以自定义时间的长度以及休息的时长，也可以同时显示待办事项。

Color Tab

Color Tab 可在新建标签页里显示一个内置了四种颜色的配色方案，辅以显示这些颜色对应的 HEX，偶尔帮助为配色发愁的设计师们找到灵感。

Dribbble New Tab

Dribbble 是一个面向创作者、艺术家、设计师等人群的创意类作品网站，有开发者开发了一款新标签页扩展 Dribbble New Tab ，帮助创作者们在新标签页里随时阅读精彩的 Dribbble 社区内容。

Tabbie

Tabbie 最大的设计亮点在于采用了 Google Material Design 的原则，提供定制化的信息显示小窗口，默认支持以下服务 / 站点：Dribbble、Behance、HackerNews、GitHub、Reddit、 Lobste.rs 、ProductHunt、Gmail、PushBullet，以及 Chrome 应用程序，书签和热门网站。

Toby

Toby 曾经获得 Product Hunt 评选奖项 Chrome Extension of 2016，提供的功能更像是另一款打开标签页管理利器 OneTab，Toby 支持建立多个自定义的分类，帮助用户快速存储或者打开某一组标签分页。不过 Toby 在新建分组名称和搜索上对于中文的支持并不完善。

My Cats New Tab

My Cats New Tab 会是猫奴专用的新建标签扩展，每次打开新标签页，都会被非常可爱的小猫咪壁纸萌化了。除了可爱的壁纸外，My Cats New Tab 还提供了日期时间、天气信息，支持快速访问最常访问的网站、书签收藏夹。

Homely

Homely 提供的定制化功能有着浓浓的极客范，默认界面使用多个块窗口构建，包含简单的按钮快捷方式或带有丰富链接的下拉菜单。编辑页面可以通过内置的编辑器直观地完成，或者用 JSON 手动编码。

Anyway.Tab

如果你是国内设计类 PodCast 节目 AnywayFM 的忠实听众，那么这款官方推出的新建标签页扩展 Anyway.Tab 绝对不应该错过。Anyway.Tab 把 Anyway.FM 节目中的参考链接推荐（和一些玩笑）显示在新标签页上，同时推送新节目的提醒。

Rocket Dashboard

Rocket Dashboard 页面集成了各项 Google 服务：搜索、新闻、云端硬盘、Gmail、日历、Youtube，以及 Chrome 浏览器内置的基础功能：热门网站、日期和时间、最近的标签、下载、书签、系统，以上这些显示信息均需要用户手动授权才能正常运作。

Google Arts & Culture

Google Arts & Culture 在新标签页中提供了来自自家艺术文化里的画作，提供每天/每个新标签页的更换频次，艺术熏陶从新标签页做起。

扩展阅读：

书签管理器

Chrome 默认的书签管理页面 chrome://bookmarks 是左右双栏布局，左边栏以文件夹的树形结构展现不同的收藏夹，右侧则负责显示收藏书签的标题名称、超链接，其他功能还有整理（书签排序方式、导入导出）、搜索。

默认的收藏夹页面显得单调过时，推荐一款 Google 出品的书签管理扩展 Bookmark Manager ，在布局显示、交互上有着更好的体验：

Bookmark Manager 提供了智能设计的搜索与全新的现代版界面，网格视图（也有列表视图）查看书签收藏夹有了更加丰富的色块，并且以面包屑的路径形式显示书签所在的位置。另外安装好 Bookmark Manager 扩展后，还提供了一键式保存，如有可能合适的文件夹，扩展也会建议您将书签保存到其中。

历史记录

Chrome 默认的历史记录 chrome://history 的页面，已经提供了相当现代化的界面，运用了 Material Design 的设计原则，左边栏显示本机的 Chrome 历史记录/其他设备打开的标签页/清除浏览数据，右边则按照日期顺序的形式先后显示具体的历史记录数据，顶部留给了搜索框（支持即时显示）。

而希望有更加丰富控制选项的用户，推荐使用 Better History 扩展：

Better History 比 Chrome 默认的历史记录页面提供了更多的功能，包括删除（一天内的记录、同域名下的记录）、分组（按分钟分组、小时分组、域名分组、自定义分组）、组织（按天组织浏览记录）、搜索（按日期/网址/标题、高亮搜索关键字、右键菜单选择域名/特定字段搜索）、设计风格（Chrome 界面风格、工具栏按钮进入历史记录、记忆关闭时的状态、支持后退操作）。

滚动条

Chrome 的页面滚动条样式跟随用户电脑系统的主题，虽然这一部分最容易被忽略，但强大的 Chrome 扩展体系提供了更多美化和生产力兼备的玩法。

不安装任何扩展

我们可以在不安装任何扩展的情况下，对 Chrome 滚动条样式进行修改。首先需找到 Chrome 的 custom.css 文件，路径位置：

Windows： 安装盘:\Users\用户名\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
macOS： /Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
Ubuntu： ~/.config/chromium/Default/User\ StyleSheets/Custom.css

只需要加上 css 控制样式即可实现修改滚动条样式的目的，可参考下面的控制代码：

/*—滚动条默认显示样式–*/  
::-webkit-scrollbar-thumb{   
    background-color:;   
    height:;   
    outline-offset:;   
    outline:;   
    -webkit-border-radius:;   
    border:;   
/*—鼠标点击滚动条显示样式–*/  
::-webkit-scrollbar-thumb:hover{   
    background-color:;   
    height:;   
    -webkit-border-radius:;   
/*—滚动条大小–*/  
::-webkit-scrollbar{   
    width:;   
    height:;   
/*—滚动框背景样式–*/