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 更新後,增加了個人隱私上傳功能再跳槽也不遲。

套件資料

使用方法

會自己寫的應該本來就很熟了,這邊就介紹兩個最基礎的功能「套用別人寫好的樣式」和「樣式的備份」。

一、套用別人寫好的樣式

先到想要套用樣式的網站,比方說 instagram,接著按右上角紅標 1 指的 Stylus 的綠色圖標,選擇紅標 2 指的「查找更多適合此網站的樣式。」,就會自動跳到 userstyles 網站上符合此網頁的樣式。

用 Stylus 取代 Stylish 樣式套用

選擇一個順眼的,點進去之後按右下角的「Install Style」就完成套用了。當然也可以基於別人寫好的修改做微調~

用 Stylus 取代 Stylish 樣式套用2

二、樣式的管理及備份

進入到管理界面,下圖紅標 3 框起來就是該樣式的管理,分別是到樣式網頁、刪除、更新,想修改樣式可以點紅標 4 的樣式名稱。

用 Stylus 取代 Stylish 樣式備份

上圖紅標 5 則可以匯入匯出樣式,之前有使用 Chrome 版 Stylish 套件,可以導出 json 檔後直接匯入到 Stylus;Chrome 和 Firefox 的 Stylus 也可以彼此導入導出(盡管部份寫法不同,然而大部份樣式可以共用)。

比較可惜的是 Firefox 的 Stylish 套件把樣式存在 profiles 裡的 stylish.sql 檔中,暫時沒有匯入匯出的功能,火狐使用者想跳槽就勤勞一點手動吧~

必須提醒的是,除了前面提到 Firefox 版本的 Stylus 版本不能修改 UI 外,還有一個比較明顯缺點是:userstyles 網站上某些樣式會額外提供選項,但在 Stylus 的套用上會失效(曾推薦過的 Google Search Tools Back 就是),只能先在網站上自訂後加到 Stylish 再複製出來,到我寫這篇介紹時這個 bug 還沒有修復。

推薦的樣式

雖然樣式的喜好、美感是很主觀的,但我還是想推薦幾個我覺得非常好看的樣式:

 

You may also like...

  • 丸子貓

    請問大大使用Twittify點開會出現黑字怎麼辦?像這個連結https://twitter.com/yui_hiwata430/status/864985739108405248 打開字跟背景都是黑色

    • 打開編輯模式,插入這行:「 .TweetTextSize.TweetTextSize–jumbo{color:#eff7f6;} 」

  • 香吉士

    請問有沒有推薦給Youtube和twitch用的?

    • 1.Youtube 我還需要改變界面、重複播放之類的功能,所以用的是 GreaseMonkey + Youtube+ https://kreen.org/670/firefox-greasemonkey-scripts

      2.我沒在看 Twitch,所以你自己試試個順眼的吧。

      是說你不是在航海,有網路?!

      • 香吉士

        謝謝k大,最近在人妖島比較無聊WWWWWW

    • Pinny

      推TwitchTV Lights Out [NEW]

      • 感謝你的分享~

  • MOOMS

    劣勢也在於基於 WebExtension 開發,Stylus 並不像 legacy 版本的套件擁有修改 Firefox 界面的能力。
    請問一下這句的意思是,以後新版 fx 用的 WebExtension 套件,都沒能力修改介面了嗎

    • 以後不知道,因為 Firefox 的 web api 還在持續開發中,目前的情況是到最新的 Nightly 版本都和 Chrome 一樣沒有辦法讓 WebExtension 修改 ui。最多只有聽說會增加 sidebar 的 api 而已。

  • kikiyan520

    小帥哥有試過xStyle嗎?推薦哪一個呢?

    • 沒有試過耶。(汗)不過 xStyle 介面看起來真的有比較好看~

Top