更改LINE Chrome 擴充元件的字型、背景：學會看CSS

前言

今天突然在筆電載LINE，結果怎麼樣都超小，我就跑去載擴充元件，終於變大了，但美中不足的是字型真的不好看，背景也是白的，心血來潮開始研究怎麼改他。

修改前的字型

修改後的字型

好看多了！PingFangTC字體來源

更改方法

請在LINE的擴充元件按F12，上方會有 chrome-extension://[ID名稱]/index.html

在這邊改字體有變更，點進去CSS能確定要改哪行，確定好要改的地方後，移動至擴充功能的ID 資料夾。

擴充功能的ID 資料夾通常位於 C:\Users\使用者名稱\AppData\Local\Google\Chrome\User Data\Default\Extensions

然後找到剛剛的[ID名稱]的資料夾，可以先複製出來，在複製的資料夾內\3.7.0_0\static\css內找到CSS並且更改完畢之後，在瀏覽器輸入chrome://extensions/，右上角將開發人員開啟，左上角就會有載入未封裝項目。

點選載入未封裝項目後，選取[ID名稱]的下一層資料夾(這邊是3.7.0_0)，選取完畢並且點選選擇資料夾，看到LINE圖案右下角出現圖示，就可以將整個Chrome關閉讓LINE擴充元件能夠關閉重啟，開起來就成功啦！🎉

加碼黑暗模式

說是黑暗模式，但也是硬找每一個元素去改色，這邊就依照個人的喜好了，我想說不要太傷眼睛就好，隨意改改了，可以參考一下！

.shortcutItem-module__value__8Ii6j {
    color: #758295;
    line-height: 1.5;
    width: 230px
}

.pageLayout-module__wrap__h-oSt{
    background-color: #454545;
    
}

.gnb-module__gnb__01tnB {
    background-color: #292929;
}

.chatlist-module__search_box__enOMX{
    background-color: #454545;  
}

.searchInput-module__label__40CWI {
    background-color: #575757;  
}

.folderTab-module__tab_item__7dbuI[aria-selected=true] {
    color: #ffffff;
}

.chatlistItem-module__title_box__aDNJD {
    color: #dddddd;
}

.chatroomEditor-module__textarea__yKTlH {
    background-color: #454545;
    color: #ffffff;
}

.metaInfo-module__read_count__8-U6j, .metaInfo-module__send_time__-3Q6- {
    color: #989898;
}

.chatroomHeader-module__name__t-K11{
    color: #dddddd;
}