【Web前端问题】自己编写了一个屏蔽百度推广的chrome插件，但是没效果。

Z时代
2024-01-10
分类：技术分享

我用javascript写了一个chrome插件，目的是屏蔽百度推广链接部分。如图所示：图片描述

我的预期是，在刷新页面之后，粉色框推广链接这部分消失。可是使用了插件之后并没有达到预期效果。请问为什么会这样。

//插件的javascript部分
function no_ads() {
    var links = document.getElementsByTagName("a");
    for(var i = 0; i < links.length; i++){
        var href_value = links[i].getAttribute("href");
        if(href_value == "http://e.baidu.com/?refer=666"){
            var link_father = links[i].parentNode;
            link_father.parentNode.removeChild(link_father);
        }
    }
}
window.onload = no_ads;

下面是源码的百度网盘链接：链接描述

回答：

我试了下，这么写的话，no_ads中的代码并没有执行，我想是因为chrome对这种写法做了限制吧，chrome调用此代码的是在页面加载完成后，所以这这么写也没必要。
建议你参照jquery的写法，可以防止全局命名空间污染，如下：

(function(){
    var no_ads = function() {
        var links = document.getElementsByTagName("a");
        for(var i = 0; i < links.length; i++){
            var href_value = links[i].getAttribute("href");
            if(href_value == "http://e.baidu.com/?refer=666"){
                var link_father = links[i].parentNode;
                link_father.parentNode.removeChild(link_father);
            }
        }
    };
    no_ads();}());

回答：

我写的去广告的插件代码：

var t1=0;t2=0;t3=0;//控制计时器执行次数
function display_none() {
    var flag_run = $("span").filter(function(index) {
        return $(this).text() == '商业推广'; //flag，通过它标识广告
    })
    if (flag_run.length!=0) {
        flag_run.parentsUntil("#content_left").css({ "display": "none", "visibility": "hidden" });
        //隐藏它及其父级元素
        $("span").filter(function(index) {
            return $(this).text() == '商业推广';
        }).remove();
        //删除flag，以免重复执行css重写函数
        clearall();
    }
    console.log("函数执行");//测试函数是否执行
    if(timer1) t1++;
    if(timer2) t2++;
    if(timer3) t3++;
    if(t1>5||t2>5||t3>5) clearall();
}
function clearall(){
    if(timer1) {clearInterval(timer1);t1=0;timer1=false;}
    if(timer2) {clearInterval(timer2);t2=0;timer2=false;}
    if(timer3) {clearInterval(timer3);t3=0;timer3=false;}
    //清除计时器，以免浪费资源
}
//初始化，让脚本运行
var timer1 = window.setInterval(display_none, 1000);
var timer2 = window.setInterval(function(){}, 1000);
var timer3 = window.setInterval(function(){}, 1000);
//监听点击百度搜索事件
$("#su").click(
   function() {
    timer2=window.setInterval(display_none, 1000);
    t2=0;//防止计数过快
  }
    //重新启用计时器
);
//监听百度搜索input框内容是否变化
$('#kw').bind('input propertychange', function() {
    timer3=window.setInterval(display_none, 1000);
    t3=0;
  //重新启用计时器});