背景

最近在追剧，无奈没有 VIP🤷‍♂️，发现油猴上竟然有破解全网 VIP 视频的插件，于是我用上了。。

有时候我也想在手机上追剧，但是手机浏览器能安装油猴吗？搜了下，果真可以，支持油猴的手机浏览器如下

kiwi 浏览器
yandex 浏览器
火狐浏览器

我原本用的是夸克浏览器，刚开始还挺简洁的，现在越来越臃肿，网盘、小说啥都往里塞，而且有的网站还禁止打开了😅，不过它的手势操作（左滑前进右滑后退）还是很好用的，我也已经深深习惯了

可惜，以上三个浏览器竟然都不支持手势操作，更离谱的是，前进按钮竟然藏在菜单里面，这意味着，当我需要前进网页时，需要先点开菜单，再点前进按钮，这操作简直要吐血。。。前进不是很常用的吗？我实在想不懂这设计（可能只是我常用？）

不过剧还是要追的，对比之后我还是选择了 kiwi 浏览器，但是这种前进方式也绝对不能接受！于是我想，既然支持油猴，那我写个油猴插件实现手势操作，不就完美了吗？

功能描述

向左滑，右侧箭头出现，前进网页
向右滑，左侧箭头出现，后退网页

功能实现

主要有以下几点要注意：

开头的油猴插件注释中 match 要匹配所有网站
加入 direction 方向标识变量，防止左滑后又右滑或者右滑后又左滑的情况
记录 y 坐标，上下滑动不做处理

功能还是比较简单的，就不做封装处理了，直接开写，完整代码如下：

// ==UserScript==
// @name         手机浏览器增加左滑前进右滑后退功能
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  模拟实现夸克手机浏览器的左滑后退右滑前进功能
// @author       企鹅吧
// @match        *://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=google.com
// @grant        none
// @license      MIT 
// ==/UserScript==
 
(function () {
  'use strict';
  const distance = 50
  const arrowCss = `
      position: fixed;
      top: 50%;
      width: ${distance}px;
      height: ${distance}px;
      line-height: ${distance}px;
      text-align: center;
      background: rgba(0,0,0,.4);
      color: #fff;
    `
  const leftArrow = document.createElement('div')
  leftArrow.innerHTML = `←`
  leftArrow.style.cssText = arrowCss
  leftArrow.style.left = `0`
  leftArrow.style['border-radius'] = `0 10px 10px 0`
  leftArrow.style.transform = `translate3d(-100%, -50%, 0)`
 
  const rightArrow = document.createElement('div')
  rightArrow.innerHTML = `→`
  rightArrow.style.cssText = arrowCss
  rightArrow.style.right = `0`
  rightArrow.style['border-radius'] = `10px 0 0 10px`
  rightArrow.style.transform = `translate3d(100%, -50%, 0)`
 
  const docBody = document.body
  docBody.appendChild(leftArrow)
  docBody.appendChild(rightArrow)
  
  function canScroll (el) {
      if (el === document.body) return false
      if (el.scrollWidth > el.clientWidth) {
          return true
      } else {
          return canScroll(el.parentNode)
      }
  }
 
 
  let startX,
    startY,
    direction = null
  docBody.addEventListener('touchstart', e => {
    direction = null
    startX = e.changedTouches[0].pageX
    startY = e.changedTouches[0].pageY
  })
 
  docBody.addEventListener('touchmove', e => {
    if (canScroll(e.target)) return
    const moveX = e.changedTouches[0].pageX
    const moveY = e.changedTouches[0].pageY
    const offsetX = moveX - startX
    const offsetY = moveY - startY
    // console.log('offset X Y: ', offsetX, offsetY)
    if (Math.abs(offsetY) > 5) return // 上下滑动不作处理
    const isToLeft = offsetX < 0
    if (isToLeft) { // 右往左滑
      console.log('toleft')
      if (direction === 'toRight') return
      direction = 'toLeft'
      const x = distance + offsetX
      const translateX = x <= 0 ? 0 : x
      rightArrow.style.transform = `translate3d(${translateX}px, -50%, 0)`
    } else { // 左往右滑
      if (direction === 'toLeft') return
      direction = 'toRight'
      const x = -distance + offsetX
      const translateX = x >= 0 ? 0 : x
      leftArrow.style.transform = `translate3d(${translateX}px, -50%, 0)`
    }
  })
 
  docBody.addEventListener('touchend', e => {
    const endX = e.changedTouches[0].pageX
    const offset = endX - startX
 
    leftArrow.style.transform = `translate3d(-100%, -50%, 0)`
    rightArrow.style.transform = `translate3d(100%, -50%, 0)`
    if (direction === 'toLeft' && offset < -distance) {
      console.log("右往左滑,前进")
      window.history.go(1)
    } else if (direction === 'toRight' && offset > distance) {
      console.log("左往左滑,后退")
      window.history.go(-1)
    }
  })
})()

写一个油猴插件，实现手机浏览器左滑前进右滑后退功能

背景

功能描述

功能实现