Chrome外掛—CSDN部落格頁面優化神器

interest2發表於2018-11-03
Chrome優化

引言

CSDN部落格的閱讀體驗至少有三點讓人不爽：

1. 頁面底部有登入註冊的長條佔地方（除非點叉號關掉或費10秒時間去登入）。

2. 正文只顯示一部分，需點選“閱讀更多”按鈕才能顯示全文。

3. 左側廣告輪播圖礙眼（除非點叉號遮蔽）。

作為CSDN部落格的重度訪問使用者，實在受不了次次的triple click，於是做了個超級簡單的Chrome外掛——“CSDN頁面優化”，連結如下（需科學上網）https://chrome.google.com/webstore/detail/csdn%E9%A1%B5%E9%9D%A2%E4%BC%98%E5%8C%96/pbhajdlkdeofhoicgdkanbbkdnglajkd/related?hl=en
不能科學上網的同學可以去下面的連結下載，具體安裝步驟可參考github專案裡的README檔案
https://github.com/interest2/CSDN
安裝完後部落格頁面就乾乾淨淨、清清爽爽，美滋滋~

技術探討

1. 核心程式碼很簡單，就是找到目標元素點選或隱藏即可。

//閱讀更多的點選
document.querySelector('#btn-readmore').click()
//登入叉號的點選
document.querySelector('body > div.pulllog-box > div > div > button.btn-close').click()

//廣告的隱藏
var ads1=document.querySelector('#mainBox > aside > div.csdn-tracking-statistics.mb8.box-shadow');
var ads2=document.querySelector('#asideFooter > div:nth-child(1)');

ads1.style.display="none";
ads2.style.display="none";

注意，引號裡的CSS選擇器的寫法無需自己絞盡腦汁分析，可以這麼“抄”來：在目標元素處右鍵→“檢查元素”→（控制檯程式碼高亮處）右鍵→“copy”→“copy selector”。

2. 偶爾，有的元素不存在導致報錯，後續程式碼不執行。因此需事先對元素存在與否進行判斷，以“閱讀更多”按鈕為例：

if(exist('#btn-readmore')){
    exist('#btn-readmore').click()
}

// 判斷元素是否存在
function exist(css) {
    if(document.querySelector(css)){
        return document.querySelector(css)
    }
    else{
        return false
    }
}

更新

新增功能：當瀏覽器以小視窗呈現時，部落格內容橫向顯示不全，需手動調整底部滾動條的位置，比較麻煩。此時外掛顯神威：當你點選頁面任意處，滾動條會自動挪到合適位置，使部落格內容一覽無餘。這個功能的靈感是來自網頁裡常見的“返回頂部”功能的啟發。核心程式碼：

document.documentElement.scrollLeft=390; //390px為部落格正文左邊緣到視窗左邊緣的距離

 

相關文章