使用Tampermonkey 前端程序员竟用它入侵了github系统。。。（内附源码）

拿我格子衫来

发布于 2022-01-24 08:56:47

7230

发布于 2022-01-24 08:56:47

文章被收录于专栏：TopFETopFE

女朋友是做外账会计的，手上有很多报税的客户,每到月中都要检查各家的报税情况,进入国税系统,截图,命名,保存,归档.发给客户。有时候她忙不过来会让我帮忙，这样繁琐,程序化的事情，作为一名前端程序员的我准备写个脚本帮助女朋友提升一下工作效率。节省二人的时间。

装逼开始

下面开始分析一下这个脚本的诞生过程：

写脚本，首先要了解业务流程，了解工作流程。找出其中可以利用技术自动化的操作部分，从而提高效率，避免重复，无意义的工作。浪费时间就是浪费生命。

工作流程:

打开一个包含很多客户的Excel,打开国税网站,复制excel的帐号和密码,点击验证,点击同意,点击登录进入系统,在登录后的首页截图,命名为公司名,保存到文件夹里.退出,重复以上操作.

下面这张是深圳国税登录入口

需求分析:

首先：我们可以通过技术手段,将复制账号密码这一步简化.通过Excel手段我们可以将账号和密码合成一列,这一列的数据格式就是

https://github.com/login?name=1&pwd=2 网站地址+参数账户名+参数密码,接着,针对这个页面我们写个脚本,提取出url中的账户名和密码,自动填写到表单里,然后将同意的单选框选中.

然后：在某个固定的页面,通过技术手段注入一个按钮,点击这个按钮,对页面某区域进行截图,并自动命名归档,保存命名规则为页面上的某个显示的字段,其实就是公司名.

这部分的分析很重要,直接决定你脚本有几个函数,使用那些技术,数据流如何流转的。

设计思路:

1:制作一个chrome的插件,调取浏览器提供的api,自动截图,命名保存到本地

2:编写Tampermonkey 脚本,在页面注入一个按钮,并为按钮添加点击事件

前一种方式技术难度高,操作复杂,故后续尝试,首选的是第二种编写一个js脚本

脚本的编写主要依据需求分析,主要二个功能,一是根据url自动填写账号密码二是点击注入的按钮命名保存截图

以下是脚本源码,经过一番修改,将国税系统改为github

引入了二个库 jquery 和 html2canvas

jquery操作dom

heml2canvas 将dom节点生成canvas,

源码编写：

// ==UserScript==
// @name         魔法按钮
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       Fizz
// @match        https://github.com/*
// @require      https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js
// @require      https://cdn.staticfile.org/html2canvas/0.5.0-beta4/html2canvas.min.js
// @grant        none
// ==/UserScript==

(function () {

  'use strict'

  // 获取url中参数
  function getQueryString (name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
    var r = window.location.search.substr(1).match(reg)
    if (r != null) return unescape(r[2])
    return null
  }

  // 提取url账号密码,自动填写表单,选中单选按钮
  if (kk.indexOf('https://github.com/login') > -1 && location.search) {
    let name = getQueryString('name')
    let pwd = getQueryString('pwd')
    $('#login_field').val(name)
    $('#password').val(pwd)
    // $('[type=radio]').eq(0).attr('checked',true)
  }

  // 点击魔法按钮
  function clickMagicBtn () {
    html2canvas($('body'), {
      onrendered: function (canvas) {
        var dataURL = canvas.toDataURL('image/png')

        const fixtype = (type) => {
          type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg')
          const r = type.match(/png|jpeg|bmp|gif/)[0]
          return 'image/' + r
        }

        dataURL = dataURL.replace(fixtype('png'), 'image/octet-stream')

        // 将图片保存本地
        const saveFile = (data, filename) => {
          const link = document.createElement('a')
          link.href = data
          link.download = filename
          const event = document.createEvent('MouseEvents')
          event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
          link.dispatchEvent(event)
        }
        const filename = $('title').text() + '.png' // 文件名提取方法
        saveFile(dataURL, filename)
      },
      width: 320,
      height: 400
    })
  }

  // 注入魔法按钮
  var btnStyle = `position: fixed;
    bottom: 20px;
    right: 20px;
    color: #fff;
    background-color: #0084ff;
    border: 1px solid #0084ff;
    border-radius: 4px;
    padding: 5px 10px;` // 按钮样式
  var button = $(`<button style="${btnStyle}">魔法按钮</button>`)
  button.on('click', clickMagicBtn)
  $('body').append(button)
})()

效果图：

学到的东西:

熟悉了TamperMonkery插件的使用,
复习了jquery和html2cavan库的api使用
对编程和生活有了更深的思考，你的技术不应该是仅仅为了满足老板的那个产品。你应该学以致用，造福广大人民,解救那些还整天坐着重复无意义工作的人们，让人们有更多的时间陪家人，陪孩子。
降低女朋友工作时间，提供工作效率，有助于家庭和谐幸福。（猝不及防的撒把狗粮。。。)