首发于 少数派
Chrome 美化终极教程:从图标到标签页,我们整理了所有能定制的地方

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

上一次跟大家分享了美化 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:;   
/*—滚动框背景样式–*/