Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

一直都对Chrome情有独钟,第一次接触她只因她的icon就喜欢上她了,后来便一发不可自拔,现在几乎成为程序员最喜欢用的浏览器,至于优点很明显:强大的Developer Tools,响应快速,支持各种插件。当然也有些劣势,比如稍微占点内存,但是在如今这个硬件这么便宜的时代,这点几乎可以忽略,今天我就来给大家推荐下我自己常用的一些Chrome插件,你在别处可看不到,可以这么说,熟练使用这些插件,会对你的开发效率大大提高,逼格瞬间上升一个档次。

以下教程在Chrome Store直接搜索即可添加(要会科学上网哦,不会也没关系,点击这→Shadowsocks客户端使用方法

桌面图标

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

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

在这里推荐两个不错的图标网站 iconfindericons8,还有两个支持 PNG 转为 ICO 文件在线网站 icovertconvertico。下面是我曾经更换的 Chrome 图标样式:

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

主题

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

新建标签页

Chrome 浏览器的新标签页 chrome://newtab 成为了美化和效率的必争之地

下面就来推荐一些优秀插件:

简 Tab

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

Lanes

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

Color Tab

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

Dribbble New Tab

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

Tabbie

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

Toby

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

My Cats New Tab

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

Homely

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

Anyway.Tab

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

Rocket Dashboard

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

Google Arts & Culture

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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


书签管理器

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

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

历史记录

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

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

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

安装扩展

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

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

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

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

扩展管理

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

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

夜间模式

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

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

网站界面改造

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

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

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

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

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

Google Material换上 Material Design 风格

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

Chrome 终极美化教程:从头到尾的彻底改造 专属你的游览器-猫腻儿

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

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

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