如何开发一个油猴（Tampermonkey）脚本

什么是油猴

油猴（Tampermonkey ）是一款免费的浏览器扩展和最为流行的用户脚本管理器，它适用于市面上大部分的浏览器。它提供了诸如便捷脚本安装、自动更新检查、标签中的脚本运行状况速览、内置的编辑器等众多功能。安装后浏览器不会发生任何变动，只有安装了油猴脚本(用户脚本)才能真正发挥作用。
油猴脚本一般指用户脚本(User Script)，其实就是一段 Javascript 代码，它们能够优化我们网页浏览体验。总的来说油猴是一个浏览器插件，它可以把用户安装的脚本执行在指定的网页上。

安装与配置

油猴安装其实很简单，其实就是安装一个浏览器插件，各大主流浏览器几乎都支持了。可以到浏览器的扩展插件商店搜索安装或者直接到油猴的官网下载安装
油猴官方下载地址：http://www.tampermonkey.net/

油猴官网提供了几个油猴脚本分享网站，可以去查找安装自己喜欢的脚本，或者自行去网上搜寻，当然也可以自己写😁

脚本安装成功后，可以在油猴的管理面板-已安装脚本里面查看和管理，设置里面也可以设置一些脚本相关的功能

自己写一个脚本

• 元数据块

元数据块是描述脚本的一个用户脚本部分。它通常包含脚本名称，命名空间，描述和包含和排除规则。元数据块出现在JavaScript行注释中，可能会出现在脚本内的任何位置， 一般写在的顶部。

详细可参考链接：Greasy Fork greasespot

• 开搞

// ==UserScript==
// @name         小玩意
// @version      0.1
// @author       xt
// @include     *
// @require     https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js
// @noframes
// @run-at       document-start
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// ==/UserScript==
;(function () {
  'use strict'
  var menuArr = [
    ['menu_eye', '✅护眼模式已开启', '⬜护眼模式已关闭'],
    ['menu_color', '✅颜色拾取器已显示', '⬜颜色拾取器已隐藏'],
  ]
  function getColorValue(e) {
    var rgbValueArry = window
      .getComputedStyle(e)
      .backgroundColor.replace(/rgba|rgb|\(|\)| /g, '')
      .split(',')
    return parseInt(rgbValueArry[0] + rgbValueArry[1] + rgbValueArry[2])
  }
  function handle(key) {
    if (key === 'menu_color') {
      $('body').append(
        `<input type="color" style=" position: fixed;z-index:99999; bottom: 20px;right: 20px;"/>`
      )
    } else if (key === 'menu_eye') {
      if (
        window.getComputedStyle(document.body).backgroundColor === 'rgba(0, 0, 0, 0)' &&
        window.getComputedStyle(document.lastElementChild).backgroundColor === 'rgba(0, 0, 0, 0)'
      ) {
        $('html').append(`<style type="text/css">html,body{background-color: #fff;}</style>`)
      } else if (
        window.getComputedStyle(document.body).backgroundColor === 'rgb(0, 0, 0)' ||
        (getColorValue(document.body) > 0 && getColorValue(document.body) < 898989) ||
        (getColorValue(document.lastElementChild) > 0 &&
          getColorValue(document.lastElementChild) < 898989) ||
        (window.getComputedStyle(document.body).backgroundColor === 'rgba(0, 0, 0, 0)' &&
          window.getComputedStyle(document.lastElementChild).backgroundColor === 'rgb(0, 0, 0)')
      ) {
        return
      }

      $('html').append(
        `<style type="text/css">html {filter: brightness(90%) sepia(20%) !important;}</style>`
      )
    }
  }
  menuArr.forEach(e => {
    if (GM_getValue(e[0])) {
      if (document.lastElementChild && document.body) {
        handle(e[0])
      } else {
        var timer1 = setInterval(function () {
          if (document.lastElementChild && document.body) {
            clearInterval(timer1)
            handle(e[0])
          }
        }, 5)
      }
      GM_registerMenuCommand(e[1], function () {
        GM_setValue(e[0], false)
        location.reload()
      })
    } else {
      GM_registerMenuCommand(e[2], function () {
        GM_setValue(e[0], true)
        location.reload()
      })
    }
  })
})()

• 效果