Chrome 美化终极教程：从图标到标签页

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

这一次我们的目标是：

从图标到历史记录的页面，甚至是浏览器的侧边滚动条，都会是我们这次美化改造的对象；

提升浏览体验。比如通过更换网页背景，更好地适应夜间阅读的需要等等，我们会从美化的角度，改造出有更好阅读体验的浏览界面；

美化兼具实用，这次美化浏览器的旅程会在美观的基础上，如何发挥实用和效率，这会是我们的终极目标。

桌面图标

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

如何更换 Chrome Windows 版的应用图标？默认的桌面图标被放在了文件夹路径是 C:UsersAdministratorAppDataLocalGoogleChromeApplication。回到系统桌面，右键 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 在新标签页中提供了来自自家艺术文化里的画作，提供每天 / 每个新标签页的更换频次，艺术熏陶从新标签页做起。

扩展阅读：

8 个「新标签页」Chrome 扩展，把 New Tab 页面玩出花样 | Matrix 精选

用好这 12 款 Chrome 扩展，让你的「新标签页」变得好看又实用

书签管理器

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 用户名 GoogleChromeUser DataDefaultUser StyleSheetsCustom.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:; } /* —滚动框背景样式– */ ::-webkit-scrollbar-track-piece{ background-color:; -webkit-border-radius:; }

不过，我在 Windows 10 1709 + Chrome v62（64 位）环境下没有找到 User StyleSheets 文件夹，即使是自行新建文件夹，将 custom.css 文件放在对应位置，重启浏览器之后还是没有看到滚动条修改的效果。所以有了下面安装扩展来改变滚动条样式和更实用功能的内容。

安装扩展

Minimal Scrollbar 可将默认滚动条变成小巧的、实用的滚动条，支持设置滚动条、滚动内槽的透明度，鼠标悬停时增大滚动条大小，以及无操作时自动隐藏滚动条。

Scrollbar of Contents 最大的特色功能是在滚动条旁边创建可点击的标题标记。 方便用户同一页面的不同部分之间跳转，并帮助快速找到要查找的内容。浏览长内容的网页时 Scrollbar of Contents 特别有用。

用户也可以使用键盘快捷键来最小化、隐藏或显示标记。每次遇到少数派长文时，Scrollbar of Contents 可以帮助快速跳转到每一个不同的主题和留言区。

扩展管理

遇到 Chrome 扩展狂人，浏览器的地址栏旁边会堆满扩展图标，占据位置和影响美观。不喜欢手动将各种扩展图标拖放到自定义的集中菜单里（或者使用右键中从 Chrome 菜单中隐藏），有时候还会遇到区分哪些扩展是否正在使用。

以上这些疑问，Extensity 扩展提供了一站式的解决方案，保持简洁的浏览器工具栏，支持列表式显示哪些扩展是正在启用的，哪些已经被禁用了。

夜间模式

保护视力从浏览器做起。灯光环境较暗时，网页背景颜色有时候经常亮瞎我们的眼睛，这时候有必要对网页背景色进行美化，将颜色改成适合眼睛的保护色或者更加适合夜间阅读的模式。

Dark Reader 、Hacker Vision、眼睛护航 这三款扩展均可实现「保护视力」的作用，将明亮的网页背景变为高对比度，明暗处理，黑暗主题，以及在晚上易于阅读的精美网页。我们只需利用好键盘快捷键，可在常规、护眼或者夜间模式下快速切换。

网站界面改造

网站界面改造需要祭出样式管理神器 Stylish ，既可以改进网站界面的显示效果，又可以实现过滤广告的功能，真正做到美化界面和实用功能兼备的目的。

用户利用 Stylish 可为网站安装不一样的主题和皮肤，也可以自行创建自己的主题和皮肤，类似为 Reddit 添加黑色风格，使用简约的 Facebook，或者更改 Google、Twitter 或您最爱的任意网站的外观，自定义背景、配色方案、字体甚至动画，以上这些都可以轻松实现。

下面是几款很美观、使用的样式，只需按照好 Stylish 扩展后，点击喜欢的样式链接，前往介绍页面安装即可。

Baidu Lite 百度轻：现代化的百度页面

Google Material：换上 Material Design 风格

我的极简少数派：竟然连我 π 主站页面也敢改

Global dark style：为所有网页背景换上夜间模式，还美化了鼠标图标样式

Flat_Zhihu：请将拍扁的知乎页面还给我

BlackTube：为油管带来酷炫的红黑配色界面

Bilibili 哔哩哔哩 Nekopara：带来更萌的 B 站体验

weibo_v6：去广告之后，还你干净的微博

以上仅仅是几款不错的 CSS 应用实例，如果你还想改造不一样的网页，可通过 userstyles 获得更多好玩的界面美化实例。

扩展阅读：不喜欢某个网站的样子？用 Stylish 给它一键「换肤」

Chrome 除了自身内功深厚，还可通过各种类型的扩展实现不一样的功能，这篇美化 Chrome 的教程使用了很多不同的扩展，提升浏览器基础的功能页面体验（收藏夹、历史记录），也带来更加实用的功能（过滤广告、调整界面设计），最终目的是希望帮助大家打造出更具个性化的浏览器，更好地提升浏览体验，好好享受这一次 Chrome 的美化旅程。

原网页已经由 ZAKER 转码以便在移动设备上查看查看原文