百度广告高亮 Chrome插件(附源码)

时间：2016-05-09 09:49:31 阅读：207 评论：0 收藏：0 [点我收藏+]

标签：

一前言

百度最近是上了舆论头条了，相信中过百度毒的人对百度都反感。百度自己挖了这么多坑，终究还是要自己来填。国内网民使且最频繁的搜过还是以百度为主，而百度依靠这种市场占有率靠他的广告竞价排名大发横财，却把很多急需帮助的人推进了火坑。

这一点在医疗方面是最突出的。

其次基本的用户体验也是被丢弃，比如大家搜 "软件培训" 第一页光广告就占去了一半以上...... 真心不能忍！而且标识为广告就靠着右下角一个小小的推广字段，连软件行业内的人都有可能不知道是广告，更别说普通用户了！

好！痛点出现了！能不能把百度的广告高亮以提醒用户谨慎点击，于是这款插件就此诞生。

二分析百度广告

百度的搜索广告暂分为两种

1 以“推广” 字段标识的单条结果如图

技术分享

2 以 “推广链接” 字段标识的结果集

技术分享

以上两种应该第一种用户会更容易中招一点，因为用户关键的一定是根据他搜索关键词后的结果，而且搜索结果会把关键字以红色高亮，很容易让用户忽略最底下的推广二字，

第二种虽然没有加推广二字，但是把广告结果以底色加亮提示，虽然没什么卵用，但至少是有提示了

另外针对同一关键词重复搜索3-5次后广告就不再会出现，这一点还算是有一点良心。但TM有毛用啊，谁会一直点啊......

三分析与实现

了解了百度广告的展现形式后接下来就分析它的html

1 先看推广字段的 html，如果是广告的结果 div的 id 都是以数字命名，所以在判断时只要判断是否是数字就行

技术分享

2 推广链接广告html 广告的结果会被包含在 content_left 第一级的div中只需要判断该div下的 a 标签的text属性是否等于 "推广链接" 然后广告div的id是否为数字即可

技术分享

3 代码怎么实现已经知道了码代码就行了

//广告背景色加深
 function changeBackgroundColor()
 {
     var url = window.document.location.href;
     if(url.indexOf("www.baidu.com")>0)
     {
         var searchResult = $("#content_left").children("div");
         
         searchResult.each(function(){
             //验证是否为广告结果(如果为广告id 会是 3001 这种数值)
             if(typeof($(this).attr("id")=="number")|| )
             {
                                  
                 //以"推广"字段的广告
                 var div = $(this);
                 $(this).find("font").each(function(){
                     var text =$(this).find("a").text();

                    if(text=="推广")
                     {
                        div.css("background-color","#FEC2C3") ; 
                     }

                 })
             
             }else if($(this).children("a").text()=="推广链接")
             {
                //以"推广链接"字段的 广告
                $(this).css("cssText","background-color:#FEC2C3 !important; ");
                         
             }
             
         })
     }
     
 }