Published on

油猴脚本开发教程

油猴脚本开发教程

highlight: monokai

前言

如何跟普通朋友介绍前端工程师是一个怎样的职位? 我会毫不犹豫的给他的浏览器装上 Tampermonkey，再装一个去广告插件，他们肯定会觉得你很牛逼，然后再问问他们，有些时候想复制某度文档，却复制不了，再给他们装一个 XX 文库的选中复制插件，瞬间成就感拉满，前端工程师就是干这个事的，笔者之前也写了几个油猴脚本，接下来我就分享下写脚本的经验，一起来看看吧。

什么是油猴脚本

Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器，它适用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox。

「油猴脚本」是一段脚本代码，通过它可以让浏览器实现各种各样的扩展功能，和浏览器扩展的作用类似。 比如获去链接重定向、微博页面精简、去广告等，相当于给浏览器开了个挂，可以说是浏览器的辅助神器了！但浏览器扩展若要发布到 chrome 扩展市场，需要支付 5 美元，但「油猴脚本」可以随时随地发布，不需要支付任何费用费用。

新建脚本

在脚本管理控制台，右上角的+添加按钮，新建一个脚本，默认会包含以下代码：

新建脚本

最上面的注释不能删除，Tampermonkey 就通过注释代码来配置脚本字段的

  • @match 用来匹配注入脚本网址的 url 其中 * 代表一个或者多个任意字符

    若要匹配 baidu 域名下的任意网页可以使用 *://*.baidu.com/*;

    若要匹配任意网址，可以使用*://*/*

  • @require 代表要注入的公用 JS 库

    比如要使用 jquery，可以使用以下代码

// @require https://code.jquery.com/jquery-2.1.4.min.js
// @require tampermonkey://vendor/jquery.js
// @require tampermonkey://vendor/jszip/jszip.js

CSDN 免登录复制

比如 CSDN 中代码块复制必须要登录后才可以复制， 那么我们就可以写一个脚本，输入以下代码

// ==UserScript==
// @name         CSDN 免登录复制
// @version      0.1
// @description  try to take over the world!
// @match        *://*.csdn.net/*
// @require      tampermonkey://vendor/jquery.js
// @grant        none
// ==/UserScript==

;(function () {
  'use strict'
  $('pre,code').css('user-select', 'auto')
})()

保存后，重新刷新浏览器，在右上角的扩展标志中会向上一个1, 说明有一个扩展作用于这个网页，脚本注入成功。

CSDN 免登录复制

其实就是一行代码，CSDN 的默认代码块的样式是 user-select: none;，不能复制，改成 auto 后就可以复制了。

添加样式

首先需要在最上面的注释中开启权限 @grant GM_addStyle，然后就可以使用内置的 GM_addStyle 方法了。

// ==UserScript==
// @grant        GM_addStyle
// ==/UserScript==
GM_addStyle(`pre,code{user-select:auto !important}.signin{display: none !important;}`)

这样也可以解决 CSDN 代码块不能复制的问题，顺便将代码块后面的登录后复制按钮隐藏；

当然我们也可以使用 JS 自己实现

const heads = document.querySelector('head')
const style = document.createElement('style')
style.setAttribute('type', 'text/css')
style.innerHTML = `pre,code{user-select:auto !important}.signin{display: none !important;}`
heads.append(style)

网络请求

一般前端脚本都是修改前端网页内容，若复杂一点的脚本，可能会涉及到动态数据，比如我们在脚本中直接写fetch 请求，这时浏览器肯定会阻止请求，因为跨域了。

我们需要使用脚本的内置方法

// ==UserScript==
// @grant        GM_xmlhttpRequest
// ==/UserScript==
GM_xmlhttpRequest({
  headers: {
    'content-type': 'application/json',
  },
  responseType: 'json',
  url: 'https://api.juejin.cn/recommend_api/v1/article/recommend_cate_feed',
  data: '{"id_type":2,"sort_type":200,"cate_id":"6809637767543259144","cursor":"0","limit":20}',
  method: 'POST',
  onreadystatechange: (res) => {
    if (res.readyState === 4) {
      console.log(res.response)
    }
  },
})

在最上面的注释中开启权限 @grant GM_xmlhttpRequest，然后就可以使用内置的 GM_xmlhttpRequest 方法了。

比如把接口换成有道翻译的 api。通过 document.getSelection().toString(); 获取网页中的选中文本，便可以实现一个划词翻译油猴插件了。 划词翻译

右键搜索

接下来我们将结合右键菜单和打开新窗口的内置函数，实现一个快捷搜索的功能， 同样内置函数需要在最上面的注释中加入权限，代码如下：

// ==UserScript==
// @grant        GM_registerMenuCommand
// @grant        GM_openInTab
// ==/UserScript==

GM_registerMenuCommand('GitHub 搜索', function () {
  const str = document.getSelection().toString()
  if (str) {
    GM_openInTab(`https://github.com/search?q=${str}`, { active: true })
  }
})

GM_registerMenuCommand('NPM 搜索', function () {
  const str = document.getSelection().toString()
  if (str) {
    GM_openInTab(`https://www.npmjs.com/search?q=${str}`, { active: true })
  }
})

右键搜索

这样就有了快捷菜单搜索的功能，只是操作挂着 3 级目录下，操作有些不方便。

以上简单介绍了脚本的开发以及一些简单实现，但这个脚本我们只能在自己电脑使用，若想让其他小伙伴也能够使用，我们需要将脚本发布到脚本脚本市场，供其他小伙伴下载。

脚本发布

一个非常流行的脚本共享网站便是 greasyfork.org，有着非常丰富的脚本，并且支持多语言。

greasyfork 脚本发布

注册账号后，点击右上角的用户名，然后点击控制台中的发布你编写的脚本，贴入你写的脚本代码，便可以发布成功！将发布后的链接发送个小伙伴，就可以让他们安装你写的脚本了，你也可以在上面根据匹配域名搜索相关脚本，看大神们是如何来写脚本的。

前端工程化

现代前端开发已经离不开前端框架，若直接使用原生 JS 让我们写复杂的功能，难免会让我们崩溃，比如需要在 JS 中写 CSS，一不小心写错就会让整个脚本无法执行。所以我们可以使用 webpack 来构建一个工程化的项目。 并且使用 Typescript 和 eslint ，让我们的前端工程健全。

下面是 webpack.config.js

const webpack = require('webpack')
const fs = require('fs')
const path = require('path')

const config = {
  entry: './src/index.tsx',

  output: {
    clean: true,
    iife: true,
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
  },
  // 脚本发布后，会被举报，不允许压缩
  optimization: {
    minimize: false,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {},
          },
          { loader: 'css-loader' },
        ],
      },
      {
        test: /\.ts(x)?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [new BannerPlugin()],
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
}

module.exports = config

使用 style-loader，在 webpack 打包后，会自动将 css 样式通过 style 标签插入到 head 中，这样就做到了 css 和 js 分离。 这里有个问题，就是油猴脚本特有的代码前置注释 ==UserScript==，在 webpack 打包后会被删除，所以我们得自己实现一个插件，将这段注释加回来。

const ConcatSource = require('webpack-sources').ConcatSource

/**
 * 添加前缀注释
 */
class BannerPlugin {
  apply(compiler) {
    let banner = ''
    const entryFile = compiler.options.entry.main.import[0]

    const res = fs.readFileSync(entryFile, 'utf-8')
    const matched = res.match(/(\/\/\s==UserScript==)(?<content>(\n.+)+)(\n\/\/\s==\/UserScript==)/)
    if (matched && matched.groups.content) {
      banner = '// ==UserScript==' + matched.groups.content + '\n// ==/UserScript==\n'
    }
    compiler.hooks.emit.tap('BannerPlugin', (compilation) => {
      compilation.chunks.forEach((chunk) => {
        // 最终生成的文件的集合
        chunk.files.forEach((fileName) => {
          compilation.assets[fileName] = new ConcatSource(banner, compilation.assets[fileName])
        })
      })
    })
  }
}

上述代码通过正则匹配 ==UserScript== 之间的代码，并且将匹配的内容合并到了最后的代码 chunk 中。

CICD

若我们每次打包后的 JS 都需要手动拷贝到 greasyfork.org 未免有些麻烦，得益于 greasyfork.org 有个自动发布的功能，我们可以配合 GitHub actions 来实现自动发布。

在项目文件夹下建立 .github/workflows/build.yml， 输入以下代码

name: GitHub Pages

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    permissions:
      contents: write
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '14'

      - name: Get yarn cache
        id: yarn-cache
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ${{ steps.yarn-cache.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - run: yarn install
      - run: yarn build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: ${{ github.ref == 'refs/heads/main' }}
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

当我们把代码提交到 Github ，就会自动触发 workflow ，依次执行 yarn install 、yarn build 并且自动将 dist 目录下的代码自动部署到 GitHub pages。

接下来我们复制 pages 中的 raw 源文件地址

github 源文件地址

贴入复制的源文件地址

  • 设置脚本同步为自动
  • 并且设置 webhook

webhook 配置

复制这里对应的 webhook 地址和秘钥

github 设置 webhook

在 GitHub 项目地址中添加 webhook

这样只要我们一旦提交代码， greasyfork.org 中的脚本便会自动更新最新版本。

以上所有配置我整理在tampermonkey-starter中， 若你也想创建一个自己的脚本，可以直接 fork 项目，修改相关配置即可。

小结

本文简单介绍了油猴脚本开发步骤以及实现，结合 webpack 让脚本实现工程化，并且配合 Github action，让脚本实现自动化构建和部署。

但是若想要实现一些有用的脚本，还需要具备更多的知识，比如JS逆向分析等，若你有好的想法，赶快行动起来吧！

以上就是本文全部内容，如果对你有帮助，可以随手点个赞，这对我真的很重要，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。

runjs-cool
关注微信公众号，获取最新原创文章（首发）View on GitHub