Chrome插件-网页异步dom监测

前言

  通过谷歌插件访问网站html元素时，有些div元素是通过用户点击之后唤起的，如提交数据之后的模态框，删除数据之后的返回框等。用户打开网页时，插件只会对打开后那一时刻的dom起作用。如果需要得到这些动态的dom中的文本内容就需要对谷歌插件进行修改，最简单的方法就是利用setInterval不停的执行对网站dom的监控。

---

例子

1.谷歌插件的描述文件:menifest.json中添加content_scripts字段：

"content_scripts":[{
    "matches":["http://www.jianshu.com/*"],
    "js":["jquery-2.0.0.min.js","main.js"]
  }],

  添加content_scripts字段后，当你打开matches里面的网址时会执行js里面的脚本一次，*号为通配符，打开的网站是简书。

2.以简书的删除文章作为例子，删除文章的时候会弹出一个让用户确定删除该文章的模态框，我们需要获取里面的内容，鼠标右键单击检查，查看这个模态框中文本所在的div。在main.js中添加如下代码，最后获得结果如图1所示。

//到达网站之后触发插件脚本
function checkDivExisted(){
    if($('._37SYn').length > 0){
        return true;
    }else{
        return false;
    }
}

//动态监控dom,获取模态框中的数据
function timerFunc(){
    setInterval(function(){
        if(checkDivExisted()){
            console.log("exist!");
            console.log($('._37SYn').html());
        }else{
            console.log("unexist!");
        }
    },1000);
}

timerFunc();

3.重新载入谷歌插件，刷新网站，执行删除文章操作，弹出模态框，打开F12可以看到如图2，从dom不存在到存在，并且获得了其中的内容。