chrome插件注入函数如何等网页XHR加载完成后再执行?

1:我写了一个去除百度推广的函数,但是百度推广是XHR异步加载,然而chrome是等DOM加载完成就执行,这就导致了,我写的函数执行在异步加载前,没有达到我预期的效果(只有加载完成我手动刷新一下网页才能去掉广告)

2:执行代码(先导入了Jquery)

function display_none(){
$("span").filter(function(index){
    return $(this).text() == '商业推广';
}).parentsUntil("#content_left").css({"display":"none","visibility":"hidden"});
}

3:尝试过的方法:

  1. 计算器循环执行,不知道哪里有问题,不能重复执行

  2. 监听DOM数是否增加,(判断网页中是否存在含有span.text()== '商业推广'的标签,有则执行函数)不知道哪里有问题,未达到预期效果(效果同1)

  3. 想通过监听XHR,拦截有商业推广的部分,弄不来,未能成功拦截

阅读 10.2k
3 个回答

已解决,不能执行计时器是因为:

window.setInterval(function(){}, 1000);

计时器里执行非匿名函数不加括号!不加括号!不加括号!,因为加括号是执行函数,不加括号是返回这个函数
如:

function test(){}
window.setInterval(function, 1000);

这样执行;

最终功能实现方案我选择的计时器重复循环执行(笨方法,等以后有时间再优化),完整代码如下:

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;
  //重新启用计时器
});

mainifest.json里:

"content_scripts": [
    {"js":["contentscript.js"],"matches": ["http://*/*","https://*/*"],
    "run_at": "document_end"}
   ]
   

"run_at": "document_end"

代表 DOM 准备好了才会执行contentscript.js

新手上路,请多包涵

记不清是chrome.webRequest还是chrome.webNavigation了, 应该可以实现题主的需求吧

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏