【原】content.js里面定义的操作为什么网页没有按照预期执行或者说执行了没效果？？？

表白：黑白圣堂血天使，天剑鬼刀阿修罗。 
讲解对象：/content.js里面定义的操作为什么网页没有按照预期执行或者说执行了没效果？？？
作者：融水公子 rsgz
===

今天做了一个插件。

content.js主要负责和页面交互 改动页面元素的。服务工作者线程主要传递消息或者管理功能的

今天想利用content.js和页面能够交互的特点，做一款插件去除某个网站 一访问就跳出一个div广告 挡住用户继续浏览的东西

content.js 里面的逻辑 每隔3秒去除广告一次，总共去除1分钟

{
  var intervalId = setInterval(myFunction, 3000); // 每隔3秒钟执行一次
  
  function myFunction() {
    try {
      // 在这里写你的代码逻辑
      var ad = document.querySelectorAll("div#ADS-block-detect")[0];
      console.log(ad);
      ad.style.display = "none";
      console.log(ad.style.display);
    } catch (error) {
      console.error("出现错误:", error);
    }

    // 检查是否已经执行了1分钟
    if (new Date() - startTime >= 60000) {
      clearInterval(intervalId); // 停止定时器
    }
  }

  var startTime = new Date(); // 记录开始执行的时间
}

之前就简单的写了一个逻辑

var ad = document.querySelectorAll("div#ADS-block-detect")[0];
console.log(ad);
ad.style.display = "none";
console.log(ad.style.display);

我发现控制台输出的结果预期的都没问题

但是那个代码还是没有去除

我就想是不是加载时间延迟的问题？后来我就这样写 来一个延迟五秒执行动作

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
delay(5000);
var ad = document.querySelectorAll("div#ADS-block-detect")[0];
console.log(ad);
ad.style.display = "none";
console.log(ad.style.display);

遗憾的是 控制台的结果是预期的，但是网页上面的div仍然没有去除

我进一步去思考 哪里不对劲？因为是国外网站 延迟的时候有长有短。总不可能定义1分钟后再去出去div？这不现实，后来综合考虑之下，决定设置总的去除时间是1分钟，每间隔3秒去除一次广告

经过实验。不仅仅是控制台符合预期，现实网页也是符合预期的。非常好。

但是目前想不到办法能检测那个广告被去除之后，怎么让代码执行的动作停止下来，我设置的执行一分钟，那么代码还是会执行一分钟，并不会提前停止的

当然了，如果是页面上去添加一个按钮去除，会更加的精准，因为人眼能准确的判断广告什么时候跳出来，点击按钮之后去除，人还能判断是否去除，没有去除再点击一下即可

=== 

公众号：不浪仙人

谢谢大家的支持！可以点击我的头像，进入我的空间浏览更多文章呢。建议大家360doc[www.360doc.com]注册一个账号登录，里面真的有很多优秀的文章，欢迎大家的到来。
---

';