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/BaiduAdBlock
来源: https://www.cnblogs.com/kewei/p/9634582.html