教你编写百度搜索广告过滤的chrome插件

 

1 前言

目前百度搜索列表首页里,广告5条正常内容是10条,而且广告都是前1到5条的位置,与正常内容的显示样式无异。对于我们这样有能力的开发者,其实可以简单的实现一个chrome插件,在百度搜索页面里执行一些我们自己的javascript,删除掉这些广告条目。

2 插件简介

Chrome插件逻辑主体为两部分组成,一是在目标文档(比如www.baidu.com页面)运行的js和css,叫content_scripts;一部分是在chrome外壳上加载与显示的内容(比如图标和设置界面)叫browser_action,这些都需要在一个manifest.json的文件里描述。

2.1 插件结构

manifest.json scripts   --jquery-1.7.1.min.js   --include.js images   --icon16.png   --icon32.png

其中,scripts下的js是content_scripts需要的,images下的图片是叫browser_action需要的。

3 百度搜索的广告特征

3.1 文档结构特征

<div id="content_left">     <div>         <div>广告1</div>         <div>广告2</div>         <div>广告3</div>         <div>广告4</div>     </div>      <div>搜索记录1</div>     <div>搜索记录2</div>      <div>         <div>广告5</div>     </div> </div>
  • 广告可以分首尾两个地方显示,也可能只有在首部显示
  • 多个广告可能被一个div包住,此div与搜索记录平行,但有时候广告与搜索记录直接平行

3.2 样式特征

  • 广告条目的class名称是动态的,每次刷新都得到不一样的class名
  • 广告条目使用了内联样式,用于保证广告的显示属性不受样式表的影响

3.3 自保护特征

在文档加载完成的两秒之内,广告条目的dom受到保护,试图修改广告的内联样式或直接删除广告的dom,都会触发生成新的不一样广告,插入搜索记录前面。

4 广告过滤思路

由于百度搜索在反反广告上做了很多措施,基于css级别的隐藏广告思路是不太可行了,我们可以基于jQuery,监测document的元素插入事件,在里面搜索广告条件,进而删除。虽然百度有自保护特征,但终究插入新广告也是触发到测document的元素插入事件。

4.1 include.js代码

; (function () {     $(document).bind("DOMNodeInserted", function (e) {         $("#content_left div[data-click] span:contains('广告')")             .parents("#content_left div[data-click]")             .remove();     }); })();

$("#content_left div[data-click] span:contains('广告')")可以将广告标识选择出来,向上选择到#content_left div[data-click],就是广告条目,然后把它删除。删除之后,百度会自动插入新的广告,新广告也符合这个选择器,所以会二次运行我们的去广告代码逻辑。

4.2 插件和源代码

源代码已经放到github上,把里面有一个已打包好的BaiduAdBlock.crx,将其拖曳到chrome内核的浏览器上,勾选“允许访问敏感页面”就完成安装。

github链接
https://github.com/xljiulang/BaiduAdBlockhttps://www.cnblogs.com/kewei/p/9634582.html

50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信