【Javascript】通过浏览器书签构建与执行自动刷新脚本

0x00 前言

日常工作中，经常遇到需要时不时点一下刷新这样的事情（怪前端想不到写一个自动刷新）
但是…… 没有自动刷新按钮，在这页面手动点刷新还是太浪费时间了。
有时候懒得等了去做别的事情，过一小时回来刷新一下，发现是有问题的，
被 killed 了，白跑，又得重来多浪费时间啊，那…… 我搞个自动刷新吧。

0x01 获取按键 selector

获取刷新按键的 selector：
右键你想要点击的按钮，检查（有的浏览器叫检查元素）
在一堆代码里鼠标上下滑动，滑到哪一个就是你要点的位置被高亮了，
就对着这个代码右键 - Copy - Selector，可以获得类似下文的 selector 字符串

#rc-tabs-0-panel-32223 > div > div > div.x6-split-box-item.x6-split-box-item-primary > div > div > div.ExecutionHistory--tableContain--1nB0TUL > div > div > div > div > div > div.aop-pipelines-table-header > table > thead > tr > th:nth-child(12) > div > div:nth-child(2) > button

0x02 构建脚本

然后分享一下自制自用的按序点击模版：

• 每隔半分钟循环一次
  • 需要不同的循环周期，修改 30000 那个数
• 每隔两秒点击 selector 中的一个
  • selector 为字符串，如果有多个，按逗号分隔，如果只有一个 selector，直接贴即可
  • 需要不同的循环周期，修改 2000 那个数

javascript: (function() {
  let selector = '#rc-tabs-0-panel-32223 > div > div > div.x6-split-box-item.x6-split-box-item-primary > div > div > div.ExecutionHistory--tableContain--1nB0TUL > div > div > div > div > div > div.aop-pipelines-table-header > table > thead > tr > th:nth-child(12) > div > div:nth-child(2) > button';
  const buttons = document.querySelectorAll(selector);
  let index = 0;
  function clickButtons() {
    if (index < buttons.length) {
      buttons[index].click();
      index++;
      setTimeout(clickButtons, 2000);
    } else {
      index = 0;
      setTimeout(clickButtons, 30000);
    }
  }
  setTimeout(clickButtons, 2000);
})();

0x03 书签制作

1. 点开 Chrome - 书签 - 书签管理器
2. 在界面任意位置右键，选择新建新书签
3. 随意取名，例如 “DW 表名复制”，网址的位置输入上述 javascript 代码
4. 保存

0x04 使用书签

之后在页面上，点一下这个书签就会自动帮忙刷新啦（终止暂时还没搞，刷新下页面就停了）

0x05 原理解释

基于 javascript 的单页面网页元素 Selector 触发按钮点击