Stylus 取代 Stylish 的樣式管理器,重新設計 Firefox、Chrome 閱讀體驗

Stylus 是一個用來管理使用者自訂網站樣式的套件,可以在任何網站套用自己撰寫或別人寫好的 CSS 樣式(像是不喜歡白的背景改成黑的),讓網頁變得更實用或更美觀。聽起來很像知名套件 Stylish 對不對?正是從 Stylish 1.5.2 fork 過來並持續修正的版本。現在支援 Chrome、Opera 以及 Firefox。
為什麼要從 Stylish 換成 Stylus?
原來 Stylish 以及樣式網站 userstyles.org 已經在去年十月由 Jason Barnabe 轉移所有權給 Justin Hindman,新的擁有者很快的宣佈 Stylish 將和 SimilarWeb 合作。SimilarWeb 是做什麼的呢?他們的主要業務就是基於網站流量資訊來提供產品分析。
所以很快的在 Chromium 系(Chrome、Opera、Cent......等)上的 Stylish 擴充套件(add-on)開始增加了免費的背景資訊上傳功能,驚不驚喜、開不開心?雖然還不知道上傳的細節是什麼,但如果你跟我一樣不需要這種服務,就開始來用 Stylus 吧!
Stylus 和 Stylish 在 Firefox 上是什麼情況呢?
使用者少上許多的 Firefox 使用者顯然幸運了一點,最後一個版本的 Stylish 是在 2016 年 8 月 9 號發佈的 2.0.7 版本,所有權轉移後並沒有任何的更新,故至今還沒有蒐集使用者隱私的功能。(但我想只是還沒而非不會有。)
上禮拜 Firefox 版本的 Stylus 套件終於上架成功(mozilla 動作還是很慢啊!)。比起現行的 Firefox 版本 Stylish 優勢是基於 WebExtension 開發,在 e10s、Firefox 57+ 環境都可以使用;劣勢也在於基於 WebExtension 開發,Stylus 並不像 legacy 版本的套件擁有修改 Firefox 界面的能力。
所以要不要現在就從 Stylish 改用 Stylus 可能取決於你有多少更改 Firefox 界面的使用者樣式。沒有馬上改用沒問題,割捨不下的話等到 Stylish 更新後,增加了個人隱私上傳功能再跳槽也不遲。
套件資料
- 套件名稱:Stylus
- 套件下載:Mozilla Firefox 火狐官網、Google Chrome 線上應用程式商店
- 套件官網:add0n.com/stylus
- Github:stylish-chrome
使用方法
會自己寫的應該本來就很熟了,這邊就介紹兩個最基礎的功能「套用別人寫好的樣式」和「樣式的備份」。
一、套用別人寫好的樣式
先到想要套用樣式的網站,比方說 instagram,接著按右上角紅標 1 指的 Stylus 的綠色圖標,選擇紅標 2 指的「查找更多適合此網站的樣式。」,就會自動跳到 userstyles.org、userstyles.world、uso.kkx.one 網站上搜尋出樣式。
選擇一個順眼的,點進去之後按右下角的「Install Style」就完成套用了。當然也可以基於別人寫好的修改做微調~
二、樣式的管理及備份
進入到管理界面,下圖紅標 3 框起來就是該樣式的管理,分別是到樣式網頁、刪除、更新,想修改樣式可以點紅標 4 的樣式名稱。
上圖紅標 5 則可以匯入匯出樣式,之前有使用 Chrome 版 Stylish 套件,可以導出 json 檔後直接匯入到 Stylus;Chrome 和 Firefox 的 Stylus 也可以彼此導入導出(儘管部份寫法不同,然而大部份樣式可以共用)。
比較可惜的是 Firefox 的 Stylish 套件把樣式存在 profiles 裡的 stylish.sql 檔中,暫時沒有匯入匯出的功能,火狐使用者想跳槽就勤勞一點手動吧~
必須提醒的是,除了前面提到 Firefox 版本的 Stylus 版本不能修改 UI 外,還有一個比較明顯缺點是:userstyles 網站上某些樣式會額外提供選項,但在 Stylus 的套用上會失效(曾推薦過的 Google Search Tools Back 就是),只能先在網站上自訂後加到 Stylish 再複製出來,到我寫這篇介紹時這個 bug 還沒有修復。
推薦的樣式
雖然樣式的喜好、美感是很主觀的,但我還是想推薦幾個我覺得非常好看的樣式:
- Discord Dark Maroon - 紫色易讀的 Discord 界面。
- Google Search Tools Back - 之前介紹過的把搜尋時的側邊欄找回來。備實用的自訂功能,最好在 Stylish 上自訂好,再複製貼到 Stylus 上。
- Inoreader Light tweaks - 典雅大方的 Inoreader rss 閱讀器樣式,在 surface pro 上非常有看雜誌的感覺。
- Instagram grid - 多格瀑布流的 Instagram,非常適合寬螢幕。
- Instagram - Layout For Laptop - 把 Instagram 在桌面上展開
- KillSerif 花明蘭秀月 Style v5.3 - Mayuyu 大在 ptt 分享的 Chrome 用字體渲染樣式,使用方法請點此參考她在推文中的敘述。
- Outlook.com Sleek & Tidy - 把微軟的 Outlook(Hotmail)信箱展開並且更加緊湊。
- Telegram Solarized Dark Grey - 黑橘配色的 telegram 網頁,並且有分隔線。
- Twitter tighten sidebar - 把 Twitter 的側邊欄縮小到只留 icon。
Twittify 0.7.2.1.2 Fix - 深藍色系 sportify 界面的 twitter~- zhihu平面化 1.3.160824 - 就比較好看的知乎。
嗶哩嗶哩(bilibili.com)樣式調整 - 優點就是砍掉很多根本不會點的欄位。