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