Chrome 百度搜索熱點過濾插件 - 開源軟件

學習時,爲了蒐集最全的中文資料,有時候不得不使用Baidu搜索引擎。在你仍是個小菜雞的時候你可能會花費大量時間在百度上!javascript

可是,時間久了你會發現,你總會被網絡上一些奇奇怪怪或者有趣的事情吸引過去而逐漸忘記本身曾經打開百度是要幹什麼?時間就這樣被一些可有可無的有趣的事情給浪費了。html

對於廣告吧,還能使用廣告清除插件來進行清除。可是一些非廣告信息實在是廣告清除插件不能判斷了!無用的事情浪費了我大量時間!!!這讓我十分生氣!!尤爲是百度的搜索熱點,我真不想再看到它:前端

這些所謂的熱搜,不少時候是帶有娛樂性質的!每每會浪費咱們太多太多時間!咱們重要的事情是幹什麼?是學習!! 在強烈憤怒之下,爲了讓我專心「科研」!不得不親自動手,寫一個瀏覽器插件了!!!java

開工

瀏覽器版本:chrome 版本 71.0.3578.80(正式版本) (64 位)git

程序是在這個chrome版本下進行構建的,其餘平臺我沒有測試,若是有熱心的網友對其餘版本進行測試,能夠在評論區註明您的版本,很是感謝您!github

當動手的時候才發現,我還不會寫插件.....只能邊學習邊作了;網絡上有不少很好的教程,你們能夠跟着學習一下,前提是要對前端技術有必定的瞭解。chrome

參考教程以下:http://blog.haoji.me/chrome-plugin-develop.html#da-bao-yu-fa-bu 這篇博客內容很豐富,很是好!瀏覽器

學會寫插件後,其實困難就不大了。網絡

熱點搜索去除的思路比較簡單,下面對程序核心思想進行簡單進行說明。下面就是插件的運行的狀態,已經成功安裝到chrome之中!app

 

主要思想:使用Javascript 進行操做DOM,選中對應的dom子樹,設置爲不可顯示,便可解決。超級簡單

當你寫插件的時候,還應該明白:chrome插件的js 和 網頁自己的js 分別運行在兩個不一樣的環境之中。可是他們公用同一個DOM。可使用代碼注入的方式,使得這兩個js環境能夠互相調用了。其餘部分都很簡單了,我就直接上代碼了!若是你有不明白的地方能夠到個人github主頁,下載源代碼進行分析:https://github.com/yaowenxu 我很菜,不要嘲笑我:),雖然菜,但我想要star :D

圖中killer.js 就是核心代碼了!代碼內容以下:

/* 做者:yaowenxu 時間:2018年12月21日16:59:41 主頁:https://github.com/yaowenxu 功能:插件注入JavaScript 腳本 */
// 日誌模塊 // 注意,必須設置了run_at=document_start 此段代碼纔會生效
stat = false; // 判斷是否從新進行加載
document.addEventListener('DOMContentLoaded', function() { // 注入自定義JS
 injectCustomJs(); console.log("歡迎您使用——百度搜索熱點過濾器"); console.log("若是您感受效果不錯,請您前往:https://github.com/yaowenxu 給個star 吧"); var date = new Date(); var year = date.getFullYear(); var month = date.getMonth()+1; var day = date.getDate(); var time = date.toLocaleTimeString() console.log("當前時間:"+ year +"-" + month +"-" + day +" " +time); // 讀取本地存儲
    var status = null; chrome.storage.sync.get(["choice"], function(items) { console.log("當前配置狀態:"+items.choice); status = items.choice; stat = false; if (status != "no"){ removeAD(); stat = true; } }); $("#con-ar").bind('DOMSubtreeModified', function(e) { // 無內容
 }); }); // 當節點dom 中內容發生變化的時候,從新進行刪除!!!否則百度熱搜仍是會出現!
document.addEventListener('DOMSubtreeModified', function() { if(stat){ var dom = $(".FYB_RD"); dom.hide(); // 繼續進行刪除
 } }); // 主模塊,執行DOM 過濾操做
function removeAD(){ var dom = $(".FYB_RD"); console.log("獲取到排行榜內容:"); console.log(dom); dom.hide(); //dom.remove();
} // 向頁面注入JS
function injectCustomJs(jsPath) { jsPath = jsPath || 'js/inject.js'; var temp = document.createElement('script'); temp.setAttribute('type', 'text/javascript'); // 得到的地址相似:chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
    temp.src = chrome.extension.getURL(jsPath); temp.onload = function() { // 放在頁面很差看,執行完後移除掉
        //this.parentNode.removeChild(this);
 console.log(chrome.extension.getURL(jsPath)); }; document.head.appendChild(temp); }

有了這段核心代碼,相信能讀懂js的人都懂了吧。我就很少說了。簡單記錄一下就好了。

執行效果:你會發現應該出現搜索熱點的地方果真不見了!

在程序書寫的過程當中,因爲百度的異步刷新的機制,我再document上加載dom的變化事件的監聽函數(以下代碼所示),完美得解決了問題。最後但願您使用愉快!

document.addEventListener('DOMSubtreeModified', function() { if(stat){ var dom = $(".FYB_RD"); dom.hide(); // 繼續進行刪除
 } });

安裝方式:

訪問:https://github.com/yaowenxu/Hot-Search-Killer 下載源碼;

 

以下所示:

 

解壓後:

而後使用chrome開發模式便可安裝了:

chrome 訪問:

打開開發者模式,選擇加載已解壓的擴展程序就行啦。選擇剛剛下載的github文件所在的位置,便可以添加。添加上就能加載使用插件了~

 

 

你會發現出現了:

在右上角。

 

最後,程序完美運行,祝您使用愉快!!!

去玩耍了,有啥問題,還請您留言~謝謝你們的支持~~

補充:2018年12月22日16:32:18 

有同窗說,爲啥不用油猴呀,油猴多好用呀;帶着好奇,我又在油猴插件上實現了一遍,歡迎star, 歡迎試用

使用Tampermonkey(油猴) 插件,從新實現了,百度搜索熱點過濾功能


保持更新,轉載請註明出處。若是軟件或博客有幫到您,還請您給個小的star 。謝謝您了~ https://github.com/yaowenxu/Hot-Search-Killer

相關文章
相關標籤/搜索