返回列表 发帖

CSS手动屏蔽Theworld Chrome广告教程

本帖最后由 jfjj007 于 2011-5-18 00:50 编辑

1, 首先找到这个CSS文件。

“Theworld_Chrome\User Data\Default\User StyleSheets\Custom.css”,这个文件就是chrome的CSS设置文件,默认为空。某些设置都可以在这里进行,例如,如果想使用微软雅黑作为全局的字体,那么添加一行
—————————————————————————————————————————————————————————————
* {font-family: "WenQuanYi Micro Hei Mono", "WenQuanYi Micro Hei", "Microsoft Yahei Mono", "Microsoft Yahei", sans-serif !important;}
—————————————————————————————————————————————————————————————
即可。

2,定位元素位置。新建书签收藏,名字随意,地址为:
  1. javascript:function(){if(window.navigator.ujs_AdBlock){return}else{window.navigator.ujs_AdBlock=true};var ele='',outline='',title='',bgColor='',frameBorder='';var doc=((window.document.body instanceof HTMLFrameSetElement)?window.frames[0]:window).document;var createStyle=function(css){var s=doc.createElement('style');s.setAttribute('type','text/css');s.appendChild(doc.createTextNode(css));return doc.documentElement.appendChild(s)};var getAtt=function(ele){var r='';for(var i=0,a;a=ele.attributes;i++){var n=a.nodeName.toLowerCase();if(/^(id|class|height|width|color|bgcolor|align|href|src)$/.test(n))r+='['+n+'=\x22'+a.nodeValue+'\x22]'};return r};var getNth=function(ele){if(/^(html|body|iframe|img|a)$/i.test(ele.nodeName)||!window.postMessage)return'';var nth,n=0;var p=ele.parentNode;for(var i=0,c;c=p.childNodes;i++){if(c.nodeType==1){n++;if(c==ele)nth=n}};return(!nth||n<2)?'':':nth-child('+nth+')'};var block=function(ele){var css='';if(ele.hasAttribute('src')){css=ele.nodeName+'[src=\x22'+ele.getAttribute('src')+'\x22]'}else{var rez=[];while(ele){if(ele.nodeType==1)rez.unshift(ele.nodeName+getAtt(ele)+getNth(ele));ele=ele.parentNode};css=rez.join(' > ')};var tmp=createStyle(css+'{background-color: #FF5555 !important; outline: 1px solid #FF1111 !important; opacity: 0.7 !important;}');css=prompt('%E9%98%BB%E6%AD%A2%E8%BF%99%E4%B8%AA%E5%85%83%E7%B4%A0?',css);if(css){createStyle(css+'{display: none !important;}');location.href='data:text/adblock;charset=UTF-8,'+encodeURIComponent(css)};tmp.parentNode.removeChild(tmp)};var remove=function(){doc.removeEventListener('mouseover',over,false);doc.removeEventListener('mouseout',out,false);doc.removeEventListener('click',click,false);doc.removeEventListener('keyup',press,false);delete window.navigator.ujs_AdBlock};var over=function(ev){ele=ev.target;outline=ele.style.outline;title=ele.title;bgColor=ele.style.backgroundColor;frameBorder=ele.frameBorder;if(frameBorder)ele.frameBorder=1;ele.style.outline='1px solid #306EFF';ele.style.backgroundColor='#C6DEFF';ele.title='Tag: '+ele.tagName+(ele.id?', ID: '+ele.id:'')+(ele.className?', Class: '+ele.className:'')};var out=function(){if(ele){ele.style.outline=outline;ele.title=title;ele.style.backgroundColor=bgColor;if(frameBorder)ele.frameBorder=frameBorder}};var click=function(ev){if(ele){ev.preventDefault();out();remove();block(ele)}};var press=function(ev){if(ev.keyCode==27){out();remove()}};doc.addEventListener('mouseover',over,false);doc.addEventListener('mouseout',out,false);doc.addEventListener('click',click,false);doc.addEventListener('keyup',press,false)})()
复制代码
将该地址保存为书签后,打开一个页面,点击该书签,将会弹出对话框,让你选择要过滤的元素。某些网站的图片或flash无法点击,或是点击后就自动跳转,那么请使用chrome的右键-“审查元素”功能进行定位。当然,也可以先使用该脚本,查看该flash的元素ID,再通过审查元素中的查找进行定位,更快速。

以CnBeta为例,点击后,选择要过滤的元素,弹出对话框如图。

其中地址为:
—————————————————————————————————————————————————————————————
HTML > BODY > DIV[id="wrapper"]:nth-child(1) > DIV[id="main"]:nth-child(2) > DIV[id="content"]:nth-child(1) > DIV[id="active"]:nth-child(5) > DIV[id="ADcon0"]:nth-child(1) > DIV[class="newslist"]:nth-child(1) > DL:nth-child(2) > DD[class="detail"] > SPAN:nth-child(1)
—————————————————————————————————————————————————————————————
(1)基本隐藏规则:
该地址中,HTML,BODY,DIV,SPAN都是页面CSS元素,DIV是最常用的页面元素布局块,通过该书签,定位到要过滤的页面元素,该操作也可以通过“右键——审查元素“方法得到。可以看到,要过滤的元素按照节点位置,逐层定位,每个元素后使用id和class来区分,其中”.“表示class属性,”#“表示id属性。通过层级定位与属性区分,基本可以定位到需要的元素。基本隐藏规则中不需要nth-child(n)子元素选择器,因为某些网站中广告元素在多个区块出现,不使用子选择器可以将相同属性的广告块全部过滤掉。
(2)高级隐藏规则:
某些元素没有id或class区分,例如同一个div下,分别有三个div,其中有一个div是广告块,其他两块是正文块,且都没有id和class属性。那么按照基本过则的话只能或三个全部显示,或三个全部隐藏。这里需要使用子元素选择器“:nth-child(n) “。在子元素后,添加“:nth-child(n) “表示该元素位于所有子元素中的第n个,如DIV[id="active"]>DIV:nth-child(3)表示id为active的母div块的第三个子div块,加入这个属性后就可以定位任何页面元素,也就可以对付所有静态广告了。
某些网页会加入一些广告块,采用随机ID或随机CLASS,对付这类广告可以使用div[id^=”ads”]或div[id$=”ads”],前者”^”表示以ads开头的所有div元素,后者”$”表示所有以ads结尾的div元素。
3,修改CSS文件,完成广告屏蔽。
在Custom.css文件中,添加下面代码:
—————————————————————————————————————————————————————————————
/*cnbeta*/
HTML > BODY > DIV[id="wrapper"] > DIV[id="main"]> DIV[id="content"]:nth-child(1) > DIV[id="active"]> DIV[id="ADcon0"]:nth-child(1) > DIV[class="newslist"] > DL > DD[class="detail"] > EM {display: none !important;}
—————————————————————————————————————————————————————————————
中间黑色字体为上两步中提取出来的页面元素,或是修改过后的页面元素CSS位置。绿色字体为注释说明(只限英文),红色字体为屏蔽关键字。如果CSS文件没有加入其它设置的话,可以在所有元素的尾端添加一个{display: none !important;},如果加入了其他设置,如浏览器字体设置等,则需要在每条规则后加入该关键词。保存完成后,页面会即刻响应,无需刷新。
由于使用vstart,所以我将打开Custom.css单独设置一个快捷键,并使用Editplus打开,添加将“屏蔽关键词“和”注释关键词“添加为宏代码,双击即可添加。

CSS格式语法参考http://www.ruanyifeng.com/blog/2009/03/css_selectors.html
附件: 您需要登录才可以下载或查看附件。没有帐号?加入 我们

提示: 作者被禁止或删除 内容自动屏蔽
http://valid.canardpc.com/cache/banner/2854499.png
新浪/腾讯/饭否@小蛐蛐   twitter @jiayiming
如有过滤规则需要更新,请尽量原帖反馈提醒。

TOP

本帖最后由 jfjj007 于 2011-5-19 23:13 编辑

Test

TOP

本帖最后由 jfjj007 于 2011-5-19 23:14 编辑

附上自己测试的代码
  1. * {font-family: "WenQuanYi Micro Hei Mono", "WenQuanYi Micro Hei", "Microsoft Yahei Mono", "Microsoft Yahei", sans-serif !important;}
  2. /*tongyong*/
  3. div[id^="ad_"],[id^="ads_"],[class^="wp a_"],[class="a_pr"],[id=my_search_se_wrap],
  4. /*51.la*/
  5. IMG[src="http://icon.ajiang.net/icon_0.gif"],[src="http://count28.51yes.com/count1.gif"],
  6. /* cnbeta */
  7. #AdForward,div[id^="google_ads_"],[class="gtitle"],[class^="tbox"],[id="h_right"],
  8. IMG[src="http://img.cnbeta.com/qy950.gif"],
  9. [src="http://img.cnbeta.com/oray576.gif"],
  10. [src="http://img.cnbeta.com/youdao576.gif"],
  11. [src="http://www.59.cn/test/newgg/25080-1.gif"],
  12. div#userInfo,#fm_r,#votes:nth-child(6),#votes:nth-child(11),#votes:nth-child(14),#votes:nth-child(15),
  13. DIV[id="feedback"]:nth-child(2) > CENTER:nth-child(2),
  14. DIV[id="feedback"]:nth-child(2) > CENTER:nth-child(7),
  15. DIV[class="newslist"]:nth-child(1) > DL:nth-child(2) > DD[class="detail"] > EM:nth-child(2),
  16. DIV[class="newslist"]:nth-child(2) > DL:nth-child(2) > DD[class="detail"] > EM:nth-child(2),
  17. DIV[class="newslist"]:nth-child(3) > DL:nth-child(2) > DD[class="detail"] > EM:nth-child(2),
  18. DIV[class="newslist"]:nth-child(4) > DL:nth-child(2) > DD[class="detail"] > EM:nth-child(2),
  19. DIV[class="newslist"]:nth-child(5) > DL:nth-child(2) > DD[class="detail"] > EM:nth-child(2),
  20. DIV[class="newslist"]:nth-child(6) > DL:nth-child(2) > DD[class="detail"] > EM:nth-child(2),
  21. DIV[class="newslist"]:nth-child(7) > DL:nth-child(2) > DD[class="detail"] > EM:nth-child(2),
  22. DIV[class="newslist"]:nth-child(8) > DL:nth-child(2) > DD[class="detail"] > EM:nth-child(2),
  23. DIV[class="newslist"]:nth-child(9) > DL:nth-child(2) > DD[class="detail"] > EM:nth-child(2),
  24. DIV[class="newslist"]:nth-child(10) > DL:nth-child(2) > DD[class="detail"] > EM:nth-child(2),
  25. DIV[class="newslist"]:nth-child(11) > DL:nth-child(2) > DD[class="detail"] > EM:nth-child(2),
  26. DIV[class="newslist"]:nth-child(12) > DL:nth-child(2) > DD[class="detail"] > EM:nth-child(2),
  27. DIV[id="foot"]:nth-child(4),
  28. /*Gmail*/
  29. div[class="mq nH oy8Mbf"],[class="nH OH0apf"],[class="l2 ov nH oy8Mbf"],[class="T8uMgc nH oy8Mbf"],[style^="width: 2"],
  30. /*Youku*/
  31. div[id^="ab_"],[class="caption"],[class="s_footer"],[style="margin-bottom:8px;"],
  32. /*Baidu*/
  33. p#lh,p#cp,p#lk,p.to,table.EC_mr15,a.favurl,
  34. table[class="ec_pp_f"],
  35. div[id="mCon"],[id="ec_im_container"],[class="r ec_bdtg"],[id="frs_banner_ad"],[class="tb_poptip_wrapper"],
  36. [style="width:85%"],[id^="bdfs"],[class="egg"],
  37. HTML > BODY > DIV[id="new-header"]:nth-child(9) > DIV[id="main"]:nth-child(6) > DIV[id="right"]:nth-child(5) > TABLE:nth-child(17),
  38. HTML > BODY > DIV[id="new-header"]:nth-child(9) > DIV[id="main"]:nth-child(6) > DIV:nth-child(1),
  39. HTML > BODY > DIV[id="footer"]:nth-child(7),
  40. HTML > BODY > DIV[id="out"]:nth-child(1) > DIV[id="in"] > DIV[id="wrapper"] > DIV[id="foot"]:nth-child(30)
  41. {display: none !important;}
复制代码

TOP

javascript:function()
是不是少个标点?
fghxy 发表于 2011-5-17 07:00 http://bbs.ioage.com/cn/images/common/back.gif


恩  已修正  3Q

TOP

chrome 记得没开放内部接口..只是下载后隐藏
这不是开发重点...

TOP

如果只是隐藏广告而不能阻止下载,我个人认为没必要浪费系统资源来做这种傻事。广告并非洪水猛兽,很多广告图片已不仅仅是广而告之的功能了,其镶嵌在页面中往往起到了点缀页面的效果,若强行过滤掉会使页面失去美观。
我和2楼蛐蛐的观点基本相同,只是用url拦截的模式弄几个通用的规则应付一下弹窗、漂浮、广告联盟足矣。

TOP

javascript:function()
是不是少个标点?

TOP

提示: 作者被禁止或删除 内容自动屏蔽
http://valid.canardpc.com/cache/banner/2854499.png
新浪/腾讯/饭否@小蛐蛐   twitter @jiayiming
如有过滤规则需要更新,请尽量原帖反馈提醒。

TOP

返回列表