油猴脚本开发教程

sxkk20082年前知识分享214

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逆向分析等，若你有好的想法，赶快行动起来吧！

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

返回列表

上一篇：码上掘金不仅可以写 PPT，还可以录视频

下一篇：iPad 编程生产力

相关文章

语音合成技术：改变人机交互方式的创新

语音合成技术：改变人机交互方式的创新

　　语音合成技术是一项用来将文本转化为声音的创新技术。随着科技的不断发展，语音合成技术正被广泛应用于各个领域，改变着人机交互的方式。本文将探讨语音合成技术的应用和前景，并对其...

新工具让文献检索进入AI模式

新工具让文献检索进入AI模式

　　查文献、读文献，是做科研的一项根本作业。据统计，科研人员花费在查找和消化科技材料上的时刻约占悉数科研时刻的51%。有没有一种可能，将文献变成一个知识库或许数据库，用人工智...

一天内筛选超1亿种化合物，AI语言模型“提速”药物发现

一天内筛选超1亿种化合物，AI语言模型“提速”药物发现

　　美国麻省理工学院和塔夫茨大学研讨人员设计出一种依据大型言语模型(如ChatGPT)的人工智能算法，这种称为ConPLex的新模型可将方针蛋白与潜在的药物分子相匹配，而无需...

百度语音开放平台：实现人机交互的智慧引擎

百度语音开放平台：实现人机交互的智慧引擎

　　作为人工智能的前沿应用领域之一，语音技术在近年来发展迅速，引领着人机交互的潮流。在这个领域，百度语音开放平台扮演着举足轻重的角色。作为中国顶尖的技术创新企业，百度在语音领...

有个非常大的缺点，就是需要一个安静的环境，声音必须外放，后来因为代码压缩，下架了。

现在推荐一款大神开发的，界面是这样的

Azure Speech Download

不必先播放，就可以直接下载音频文件，相信对一些视频制作者有很大帮助，我的几个视频就是通过这个插件获得的音频，再配上制作 keynote 动画导出视频，剪辑实现，可以说是非常好用。

2. copy-helper

网址：https://greasyfork.org/zh-CN/scripts/439663-copy-helper

文章拷贝助手，掘金、简书、微信文章、知乎专栏、思否、CSDN 文章一键拷贝 markdown。

文章拷贝助手

我还写了篇文章介绍如何实现这个脚本，无论对个人知识整理和收集，还是公众号主运营，都很有帮助。

3. 壹伴排版 Plus

网址: https://greasyfork.org/zh-CN/scripts/439551-壹伴排版-plus

公众号运营者福利，可以在微信公众平台可直接插入壹伴的模板，免开 vip

壹伴排版 Plus

这款插件也是笔者开发的，关于如何实现，有一篇文章介绍

4. 屏蔽广告

网址：https://greasyfork.org/zh-CN/scripts/439420

屏蔽谷歌广告、百度广告、知乎广告、隐藏谷歌和百度搜索增强百度搜索结果的各种广告等等（过滤所有采用谷歌联盟和百度联盟等广告联盟的广告）

屏蔽广告设置

安装好脚本之后，可以点击油猴，去脚本【广告管理设置】，在设置里也能看见这个脚本都支持哪些网站，还支持 CSDN 外链优化。

5. 稿定去水印

网址：https://greasyfork.org/zh-CN/scripts/454511

有些同学问我的博客首图是怎么设计的？我用的就是这款插件，稿定提供了大量免费设计素材和免费设计和视频模板、在线抠图和电商海报设计模板等，一键搞定设计需求。

稿定去水印

安装完成后，在右上角会有一个去水印按钮，设置完成后，使用 QQ 微信登截屏工具，截图即可。

6. iconfontr

网址：https://greasyfork.org/zh-CN/scripts/447288-iconfontr

前端开发者福利，在 Iconfont 可以直接复制 React component

iconfontr

推荐6款油猴脚本，不看错亿！

本文视频地址推荐 6 款贼好用的油猴脚本，其中有 4 个是笔者开发的，看完了文章，要是对这几款脚本感兴趣的话，赶紧去试试看，且用且珍惜！1. Azure Speech Download网址：https...

智能时代如何助力企业发展-探讨人工智能在企业应用中的优势与挑战

智能时代如何助力企业发展-探讨人工智能在企业应用中的优势与挑战

　　优势一：提高生产效率　　传统的生产线是由人员操作的，但是人力灵活性差，操作容易出错，并且在连续的工作中容易出现疲劳等问题。而人工智能无需休息，经过训练后能够实现超快速、高...

发表评论    

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

易家机器人 @2024-2035 www.liferobots.cn& 陕ICP备20001986号-10

Powered By Z-BlogPHP. Theme by TOYEAN.