如何使用Tampermonkey屏蔽知乎/百度广告？
Tampermonkey(油猴) 是Chrome浏览器插件，使用它可以用来屏蔽知乎的广告，Tampermonkey 怎么实现的呢? 很简单！当我们在刷知乎或者微博的信息流 的时候，浏览器会把这些页面呈现给我们，这些页面也是由类似积木拼接起来的，只不过用户看不到浏览器在下面做的工作。下面以访问知乎为例
我们可以很容易的看到，广告元素和正常元素还是不一样的，广告元素的class多了一个 TopstoryItem--advertCard，我们把这个不一样
的广告元素剔除就可以了，我们打开浏览器的的开发者模式(Mac键盘同时按下 comand + option + i, windows 按 F12)，进入console输入下面的代码试一下，
就可以神奇的发现广告元素不见了。
let list = document.getElementsByClassName('TopstoryItem--advertCard')
Array.prototype.forEach.call(list, (item) => {
item.style.display = 'none'
})
tampermonkey 就是帮我们做了这些事情，下面是tampermonkey的安装步骤。
1. 在Chrome的应用市场安装tampermonkey
应用市场 大陆用户可能需要科学上网，
2. 在Chrome扩展程序里面打开tampermonkey
3. 在tampermonkey添加脚本
4. 编写脚本
屏蔽知乎广告：把下面这些代码复制进去，然后保存，你还可以把不想看的关键字加进去，比如你不想看关于 吴亦凡 推荐
// ==UserScript==
// @name clean zhihu ad
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!！
// @author You
// @match https://www.zhihu.com
// @grant none
// ==/UserScript==
var sameNames = [];
// 这里是屏蔽列表, 不想看的关键字写在这里就行了.
var gotohell = ["广告", "吴亦凡"];
window.onload=function()
{
var main = document.getElementsByClassName("Topstory-recommend")[0];
main.addEventListener("DOMNodeInserted", function() {
hideItems();
});
function hideItems() {
var items = document.getElementsByClassName("TopstoryItem");
for (var i = 0; i < items.length; ++i)
{
if (items[i].classList.contains("TopstoryItem--advertCard")) {
items[i].style.display = "none";
console.log('wv');
};
if (items[i].classList.contains("alreadyfucked")) continue;
//console.log("doing" + i);
var title = items[i].getElementsByClassName("ContentItem-title");
var a;
if (title.length) a = title[0].getElementsByTagName("a");
else continue;
var text = a[0].innerHTML;
for (var j = 0; j < gotohell.length; ++j) {
if (text.match(gotohell[j])) {
console.log(gotohell[j]);
items[i].style.display = "none";
}
}
//for (var jj = 0; jj < sameNames.length; ++jj) {
// if (text==sameNames[jj]) {
// console.log(sameNames[jj]);
// items[i].style.display = "none";
// }
//}
//sameNames.push(text);
items[i].classList.add("alreadyfucked");
}
}
}
屏蔽百度广告：把下面这些代码复制进去，屏蔽广告
// ==UserScript==
// @name 百度广告(首尾推广及右侧广告)清理
// @name:en Kill Baidu AD
// @name:zh-TW 百度廣告(首尾推廣及右側廣告)清理
// @namespace hoothin
// @version 1.22
// @description 彻底清理百度搜索(www.baidu.com)结果首尾的推广广告、二次顽固广告、右侧广告，并防止反复
// @description:en Just Kill Baidu AD
// @description:zh-TW 徹底清理百度搜索(www.baidu.com)結果首尾的推廣廣告、二次頑固廣告、右側廣告，並防止反復
// @author hoothin
// @include http*://www.baidu.com/*
// @include http*://m.baidu.com/*
// @grant GM_xmlhttpRequest
// @run-at document-start
// @license MIT License
// @compatible chrome 测试通过
// @compatible firefox 测试通过
// @compatible opera 未测试
// @compatible safari 未测试
// @contributionURL https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=rixixi@sina.com&item_name=Greasy+Fork+donation
// @contributionAmount 1
// ==/UserScript==
(function() {
'use strict';
var killBaijiaType=2;
var MO = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
if(MO){
var observer = new MO(function(records){
records.map(function(record) {
if(record.addedNodes.length){
[].forEach.call(record.addedNodes,function(addedNode) {
clearOneAD(addedNode);
});
}
});
});
var option = {
'childList': true,
'subtree': true
};
observer.observe(document, option);
}
function checkBaijia(item){
var itemHref=item.querySelector("a").href;
item.style.display="none";
if(itemHref.indexOf("baidu.com")==-1)return;
var gmxhr=GM_xmlhttpRequest({
url: itemHref,
headers: {
"Accept": "text/html"
},
method: "head",
onreadystatechange:function(response) {
if(response.readyState==4){
if(response.finalUrl.indexOf("baijiahao.baidu.com")!=-1){
item.remove();
}else{
item.style.display="";
}
gmxhr.abort();
}
}
});
}
function clearAD(){
if(!document.querySelectorAll)return;
var mAds=document.querySelectorAll(".ec_wise_ad,.ec_youxuan_card,.page-banner"),i;
for(i=0;i<mAds.length;i++){
var mAd=mAds[i];
mAd.remove();
}
var list=document.querySelectorAll("#content_left>div,#content_left>table");
for(i=0;i<list.length;i++){
let item = list[i];
let s = item.getAttribute("style");
if (s && /display:(table|block)\s!important/.test(s)) {
item.remove();
}else{
var span=item.querySelector("div>span");
if(span && span.innerHTML=="广告"){
item.remove();
}
[].forEach.call(item.querySelectorAll("span,a"),function(span){
if(span && (span.innerHTML=="广告" || span.getAttribute("data-tuiguang"))){
item.remove();
}
});
if(killBaijiaType==2){
[].forEach.call(item.querySelectorAll("a>div>span+img"),function(img){
if(img && /^https?:\/\/pic\.rmb\.bdstatic\.com/.test(img.src)){
//checkBaijia(item);
item.remove();
}
});
}
}
}
var eb = document.querySelectorAll("#content_right>table>tbody>tr>td>div");
for(i=0;i<eb.length;i++){
let d = eb[i];
if (d.id!="con-ar") {
d.remove();
}
}
var nr = document.querySelector("#content_right>div>div>div");
if(nr){
var nra=nr.querySelectorAll("a");
for(i=0;i<nra.length;i++){
let d = nra[i];
if (d.innerHTML=="广告") {
nr.remove();
break;
}
}
}
}
function clearOneAD(ele){
if(ele.nodeType!=1)return;
if(ele.classList.contains("ec-tuiguang") || ele.classList.contains("ec_wise_ad") || ele.classList.contains("ec_youxuan_card") || ele.classList.contains("page-banner")){
ele.remove();
return;
}
if(ele.parentNode && ele.parentNode.id=="content_left" && (ele.nodeName=="DIV" || ele.nodeName=="TABLE")){
let s = ele.getAttribute("style");
if (s && /display:(table|block)\s!important/.test(s)) {
ele.remove();
}else{
var span=ele.querySelector("div>span");
if(span && span.innerHTML=="广告"){
ele.remove();
}
[].forEach.call(ele.querySelectorAll("span,a"),function(span){
if(span && (span.innerHTML=="广告" || span.getAttribute("data-tuiguang"))){
ele.remove();
}
});
if(killBaijiaType==2){
[].forEach.call(ele.querySelectorAll("a>div>span+img"),function(img){
if(img && /^https?:\/\/pic\.rmb\.bdstatic\.com/.test(img.src)){
//checkBaijia(ele);
ele.remove();
}
});
}
}
}else if(ele.parentNode && ele.parentNode.id=="content_right"){
if(ele.nodeName=="TABLE"){
var eb = ele.querySelectorAll("tbody>tr>td>div");
for(var i=0;i<eb.length;i++){
let d = eb[i];
if (d.id!="con-ar") {
d.remove();
}
}
}
if(ele.nodeName=="DIV"){
var nr = ele.querySelector("div>div");
if(nr){
var nra=nr.querySelectorAll("a");
for(i=0;i<nra.length;i++){
let d = nra[i];
if (d.innerHTML=="广告") {
nr.remove();
break;
}
}
}
}
}else{
let eles=ele.querySelectorAll("#content_left>div,#content_left>table");
[].forEach.call(eles, e=>{clearOneAD(e)});
}
}
setTimeout(()=>{clearAD();},2000);
})();
5.测试是否生效
-
知乎结果 访问知乎
-
百度结果
6. 总结
Tampermonkey可以说是学习Web必备的工具，只要你用过一次，就会爱上它。我也是一次偶然的机会才了解到它，有个医生同学找我帮忙，工作 需要查找 Sci-Hub 网站上面的文献，论文下载的时候需要用到这个神奇的工具。tampermonkey的功能还有很多，上面只是知乎和百度的屏蔽广告的例子， 还有微博的屏蔽广告的code我没有贴出来，你如果想要可以私信我，你也可以去tampermokey脚本市场下载，文章多有不足之处，欢迎指正和留言。