手癢想改 Chrome 介面嗎? 從佈景到按鈕的終極美化教學都在這

Chrome 美化終極教學:從圖示到分頁標籤,我們整理了所有能定製的地方

【我們為什麼挑選這篇文章】相信很多人都在使用 Google Chrome 瀏覽器做為主要的工作軟體之一,但看著這個簡潔的介面,久了會不會覺得略顯單調?

本文作者集中了市面上常見的幾種改變風格做法,附上詳細教學,讓你隨時說變就變,創造更好的工作效率與好心情!(責任編輯:林厚勳)

本文經新媒體 少數派 授權轉載,作者 Eric_hong ,轉載請聯繫出處。

上一次跟大家分享了美化 Chrome 新建分頁標籤的擴充合輯,有幸獲得讀者們的反饋,這次關於 Chrome 分享依然是圍繞著美化主題,希望藉著這個機會,讓我們來一次徹底美化 Chrome 的旅程。

這一次我們的目標是:

  • 從圖示到歷史記錄的頁面,甚至是瀏覽器的側邊滾動條,都會是我們這次美化改造的對象;
  • 提升瀏覽體驗。比如通過更換網頁背景,更加適應夜間閱讀的需要等等,我們會從美化的角度,改造出有更好閱讀體驗的瀏覽界面;
  • 美化兼具實用,這次美化瀏覽器的旅程會在美觀的基礎上,如何發揮實用和效率,這會是我們的終極目標。

桌面圖示

Chrome 瀏覽器圖示經歷了從 3D 效果過渡到被拍扁的變化:

如何更換 Chrome Windows 版的應用圖示?默認的桌面圖示被放在了文件夾路徑是 C:\Users\Administrator\AppData\Local\Google\Chrome\Application。回到系統桌面,右鍵 Chrome 應用圖示,依次選擇「內容 – 捷徑 – 變更圖示」,選擇已經準備好的 ico 圖示文件。

在這裡推薦兩個不錯的圖示網站 iconfindericons8,還有兩個支援 PNG 轉為 ICO 文件在線網站 icovertconvertico。下面是我曾經更換的 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 ReaderHacker 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 的美化旅程。

─ ─

(本文經 少數派作者 Eric_hong 授權轉載,並同意 TechOrange 編寫導讀與修訂標題,原文標題為 〈 Chrome 美化終極教程:從圖標到標籤頁,我們整理了所有能定製的地方 〉。)

更多瀏覽器的相關文章

Chrome 在亞洲要被打趴啦,阿里巴巴的 UC 瀏覽器靠「小」搶下雙印市場領導地位
最強隱私瀏覽器 Tor 驚爆大漏洞,匿名使用者 IP 恐將全曝光,趕快更新吧!
火狐鐵粉的春天來啦!新版 Firefox Quantum 效能暴衝 2 倍,速度跟 Chrome 完全有得比
正中 Chrome 死穴!論電力,Edge 瀏覽器硬是比 Chrome 多撐 3 小時


【2018 年 TechOrange 招募新血,引領台灣正向改變】
如果你平常關注人工智慧、fintech、區塊鏈、創新創業、數位行銷、技術開源、資安、物聯網、經營管理、科技小物等,加入《TO》跟我們一起關注社會、產業創新!

TechOrange 社群編輯、實習生持續徵才中
意者請提供履歷自傳以及文字作品,寄至 jobs@fusionmedium.com
來信主旨:【應徵】TechOrange _填上應徵職稱_:您的大名

點關鍵字看更多相關文章: