# 预处理

网页更新提醒 (opens new window)：是一款可以监控并跟踪记录网页内容更新，并立即通知你的浏览器插件

# 前言

预处理是比较高级的功能，几乎无所不能，前提是需要有一定的Javascript代码基础，。

# 检测前预处理

就是在检测开始之前，先执行一段自定义的JS脚本，用于页面需要一些操作或者整理以后才能执行检测的场景。
「网页更新提醒」的原理是，定时获取圈选区域的DOM节点文本内容，与上一次的内容进行对比，预处理脚本就是在插件提取内容之前执行的代码。
相当于当次检测的节点控制权完全开发给了使用者，使用者可以自己决定节点的内容，从而决定插件是否能够检测到更新，可以说无所不能。

场景①，页面需要先设置过滤条件，然后点击查询才能看到数据，可以使用预处理脚本自动完成
场景②，检测的区域没有文字，只有链接或者图片地址会变更，可以通过预处理脚本将链接或者图片地址提取出来插入到监控的区域
场景③，页面需要检测的变更条件非常复杂，用匹配/排除规则难以准确界定的场景
场景④，页面自动化测试，可以自己编写代码模拟操作并检测操作结果是否符合预期
场景N。。。

以页面需要设置过滤条件然后点击查询为例，检测前预处理代码如下：

function _beforeExtract(id, data) {
    /*设置输入框数值*/
    document.querySelector('.ipt').value = 100;

    /*点击按钮*/
    document.querySelector('.btn').click();
    
    /*支持异步/延时回调*/
    setTimeout(function() {
      _callback(id, data);
    }, 1000);
}

1
2
3
4
5
6
7
8
9
10
11
12

这里function beforeExtract(id, data) {_callback(id, data);}是固定格式，不要改动
ID: 是一个标识，代码回调映射，编写脚本不用关心
data: 是监控任务数据，完整的结构如下：

{
  selectors: [
    {type: 'xpath', selector: '//UL[1]'}
  ]
}

1
2
3
4
5

# 通知前预处理

插件在检测到更新或者异常的时候，默认是会推送通知的，当然也有选项可以设置不推送。通知前预处理，可以做更多的个性化配置，使用场景包括：

场景①，当检测到异常以后，并不是不推送而是只给特定的人推送
场景②，插件的推送内容是程序内定的，可以通过预处理脚本实现推送内容的个性化定制

下面的代码表示，如果监控出现异常，则只给UID_xxx_N这个用户推送消息，根据盈亏比例显示个性化的推送标题和摘要

function _beforeNotify(id, data) {
  var pre = parseFloat(data.preData.text);
  var cur = parseFloat(data.curData.text);
  var diff = cur - pre;
                  
  if (/重新框选/.test(data.text)) {
    data.config.webhook = "UID_xxx_N";
  } else {
    var text = "盈亏比例为：" + ((cur - pre).toFixed(2) / 80).toFixed(4) + "%";
    data.text = text;
    if (cur > pre) {
      data.config.title = "枭龙一号开单了，本单为盈利单！";
    } else {
      data.config.title = "枭龙一号开单了，本单为亏损单";
    }
  }
                  
  _callback(id, data);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

data: 是通知需要的数据，完整的结构如下：

{
  text: '消息推送文本内容',
  html: '消息详情html代码',
  ignored: false, // 是否忽略本次通知
  config: {
    title: '监控任务标题',
    url: '监控任务的url地址',
    emails: '通知邮箱',
    webhook: '微信UID或者webhook地址'
  },
  preData: {
    text: '上一次检测到的文本内容',
    html: '上一次检测到的HTML片段'
  },
  curData: {
    text: '当前检测到的文本内容',
    html: '上一次检测到的HTML片段'
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

我们可以通过data变量获取对应的数据，也可以动态修改这些字段，达到修改通知内容目的代码在一个沙盒页面运行，可以访问DOM接口和操作DOM!
注意，这是模板消息，只能修改以上这些字段，其他字段的修改没有意义

# 更新后预处理

检测到更新后，处理进行通知，还可以通过预处理脚本进行进一步的自动化处理。

场景①，检测到更新以后，自动点击按钮完成审批/跳转等动作
场景②，检测到更新以后，自动下单
场景③，检测到更新以后，自动打开其他页面
场景N。。。

预处理代码跟「检测前预处理」类似，示例如下：

function _afterUpdate(id, data) {
    /*点击按钮*/
    document.querySelector('.btn').click();
    
    /*支持异步/延时回调*/
    setTimeout(function() {
      _callback(id, data);
    }, 1000);
}

1
2
3
4
5
6
7
8
9

data: 是监控任务数据，完整的结构如下：

{
  title: '监控任务标题',
  url: '监控任务的url地址',
  emails: '通知邮箱',
  webhook: '微信UID或者webhook地址',
  selectors: [
    {type: 'xpath', selector: '//UL[1]'}
  ]
}

1
2
3
4
5
6
7
8
9

# 定时报告

每个任务可以设置一个定时任务，在固定的时间点发送一个通知。
通知的内容是可以通过Javascript脚本进行定制的，原则上你可以定制任意的富文本内容（表格、列表等等）。

参考案例如下：

function schedule(id, data) {
  var text = data.list.map(function(item) {
    return item.text;
  }).join("\n");
  var html = data.list.map(function(item) {
    return item.html;
  }).join("<br>");
  
  /*设置报告标题*/
  data.config.title="这是日报";
  /*设置文本摘要*/
  data.text = text;
  /*设置通知详情富文本*/
  data.html = html;
                  
  _callback(id, data);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

data: 是通知需要的数据，完整的结构如下：

{
  text: '发送消息的文本摘要，需要脚本设置',
  html: '发送消息详情html代码，需要脚本设置',
  ignored: false, // 是否忽略本次通知
  config: {
    title: '监控任务标题',
    url: '监控任务的url地址',
    emails: '通知邮箱',
    webhook: '微信UID或者webhook地址'
  },
  list: [ // 第一条是最新的内容
    {html: '每次监控提取的HTML片段', text: 每次监控提取的文本内容},
    {html: '每次监控提取的HTML片段', text: 每次监控提取的文本内容}
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

← 过滤规则