油猴脚本介绍 - 打造你的定制化浏览器体验

天歌丶
400 阅读7分钟

1、前言

学习学习，弄清楚底层原理远远比记忆来的更重要

微信图片_20231018102605.jpg

资本家落泪哈哈哈哈，这位朋友抓住了底层逻辑

闲话少扯，开始介绍一款自动化脚本浏览器工具-Tampermonkey

2、什么是油猴脚本？

油猴脚本是一种浏览器插件，用于修改网页的行为和外观。它基于用户自定义的JavaScript代码，可以通过向页面注入脚本来实现各种功能的定制化

很抽象对不对，但只要了解了它的运行场景，你瞬间你能了解它是什么

  • 广告屏蔽：通过脚本屏蔽网页那让人不甚烦恼广告和弹窗。
  • 功能增强：比如自动填写表单、登录信息、自动翻译页面上的文本内容等等
  • 自定义：如批量下载网站图片，视频，爬取数据等等

只要是你对网页的操作，油猴脚本都可以替你完成，这意味这什么，所有重复耗时的事情，都可以交给油猴。这时可能就有人会讲，这不就是 Python 的一部分功能吗？没错~你可以理解为他是 web 端的 Python

那我直接学习 Python 不就可以了吗？听起来好像是没错了，但要深入掌握一门语音可不是说说而已~而且，作为一个前端工程师，可以使用 JavaScript 就能做到 Python 式的体验，即简单又相当的 cool 不是嘛！

同时，使用油猴脚本还能辅助我们进行各种调试，助力前端学习和开发

3、基本原理

油猴通过注入自定义的 JavaScript 代码来改变网页的行为和外观

  • 匹配脚本：使用正则表达式或 URL 匹配模式来定义脚本应该运行的页面。当用户访问一个网页时，油猴会根据这些规则判断是否应该应用特定的脚本，一旦页面与某个脚本规则匹配，油猴会将该脚本注入到页面中。
  • 执行脚本：一旦脚本被成功注入到页面中，它可以立即开始执行。通过自定义的JavaScript代码，可以实现对网页元素、事件和数据进行操作。

4、安装

不同浏览器有不同的油猴脚本插件，这里选择的是当前最好用 Chrome -> Tampermonkey

点击 Chrome 右上角 ... --> 拓展程序 --> 访问 Chrome 应用商店 --> 搜索篡改猴 --> 选择 Tampermonkey 添加到 Chrome 即可

2WGJSP_{RAZL4R2XZFI%462.png

注意：使用插件需要开启开发者模式；拓展程序 --> 管理拓展程序，右上角勾选开发者模式即可

image.png

这样就可以愉快的使用油猴脚本了~他就在右上角的拓展程序里

image.png

5、Tampermonkey 脚本初体验

在正式开始之前，先简单介绍一下核心头部信息

// ==UserScript==
// @name        文心
// @description Stores and logs a counter of executions.
// @version      0.1
// @match       *://*.baidu.com/*
// @grant       GM.setValue
// @grant       GM.getValue
// @grant       GM.xmlHttpRequest
// @connect     *
// @grant       unsafeWindow
// @require     https://code.jquery.com/jquery-latest.js
// ==/UserScript==
  • match：脚本匹配规则，支持正则和完整 URL 的形式；如 ://*.baidu.com/ 将匹配所有二级域为 baidu.com 的网页
  • grant GM.setValue 系统设置值，类似 localStorage，GM.getValue 则是读取
  • grant GM.xmlHttpRequest Tampermonkey 内置的请求模块，用来发起请求
  • require 引入外部资源，如 jQuery、自己编写的 js、css 等等

更多关于介绍可以查阅官方文档 Tampermonkey文档

5.1、文心一言

为什么选择文心一言注册而不是 chatGPT？

  • 国内站点，更快速方便
  • 更能理解国人的需求，如中国菜谱、国家文化、历史等等

大家要对国内的 AIGC 有信心，现在的文心一言已经不是当初那个闹出 红烧狮子头 笑话的 AI 了，它在上述场景中比 chatGPT 具有更好的结果反馈。

文心一言注册 前往官网交互式完成即可~

上周心血来潮，准备整几个小菜好好犒劳一下自己，媳妇大手一挥，转发给我一份菜单；好家伙，又是鱼香肉丝，又是宫保鸡丁，最离谱的是还有北京烤鸭~~~

好嘛，这不是犒劳自己，而是为难自己。但作为一个新时代的程序员 cook，就算学不会，也得先看看，先瞅瞅菜谱再说！

5.2、菜谱自动生成

提示工程：使用 AI 生成文案，是否符合预期，提升工程非常重要；我们的目标是学习做菜，那么肯定希望知道有哪些材料，什么步骤对不对，同时对于新手，应该注意些什么也很重要对不对？一个简单的提示工程如下：生成一篇青椒炒肉的菜谱；包含材料，步骤，注意事项；不得少于 200 字

如何编写油猴脚本？很简单，将你要进行的操作，交给脚本实现

1、构建菜单及结果数据结构

我们现在的目标是生成一系列的菜谱，拿到答案内容，那么首先就需要构建一个菜单数组，以及答案保存的对象

  let menu = ['青椒肉丝', '红烧鱼块']; // 菜单
  let QA = {}; // 答案

2、分析与 AI 交互行为

image.png

打开文心一言网站（需先登录），如果你要提问上述我们生成的提示工程问题，需要怎么做？肯定是在输入域填写内容，然后点发送按钮对不对~

那如果交给 JS 处理，则是获得输入域的 DOM，然后将我们的内容赋值给它；然后获取发送按钮的 DOM，触发点击事件.

通过 F12 即可拿到相关 DOM 的标识，一打开你就会发现进入无限 debugger 断点，这是一种常用的防止调试的办法；虽然不影响我们获取 DOM 标识，能解决掉后面调试代码会方便很多的说，参考 解决浏览器无限 debugger

let inputArea = document.querySelector('textarea'); // 输入域
let submitBtn = document.querySelector('.VAtmtpqL'); // 提交按钮
inputArea.focus();
inputArea.execCommand('inserttext', false, "生成一篇青椒炒肉的菜谱；包含材料，步骤，注意事项；不得少于 200 字");
submitBtn.click();

这里使用聚焦然后触发 inserttext 命令的形式来插入用户行为式填充内容，而不是通过 dom.value 的形式赋值。这是因为这个 textarea 不是一个普通的文本域，而是 react 生成具有双向绑定 dom。

至此，我们就完成了我们 JS 处理与 AI 交互的核心代码

3、完整代码与结果

完整代码

// ==UserScript==
// @name        文心
// @description Stores and logs a counter of executions.
// @version      0.1
// @match       *://*.baidu.com/*
// @grant       GM.setValue
// @grant       GM.getValue
// @grant       GM.xmlHttpRequest
// @connect     *
// @grant       unsafeWindow
// @require     https://code.jquery.com/jquery-latest.js
// ==/UserScript==

(async function () {
  let menu = ['青椒肉丝', '红烧鱼块']; // 菜单
  let QA = {}; // 答案
  // 等待页面加载完毕
  await sleep(2000);
  for (let i = 0; i < menu.length + 1; i++) {
    let question = `生成一篇${menu[i]}的菜谱；包含材料，步骤，注意事项；不得少于 200 字`;
    setTimeout(() => {
      if (i === menu.length) {
        // 结束,收集答案
        let answerNodes = document.querySelectorAll('.q4y8uP0A');
        for (let j = 0; j < answerNodes.length; j++) {
          QA[menu[j]] = answerNodes[j].innerHTML
        }
        let str = JSON.stringify(QA)
        alert(str)
      } else {
        // 提问
        changeInputValue(document.querySelector('textarea'), question)
        document.querySelector('.VAtmtpqL').click();
      }
    }, i*30*1000)
  }

  function sleep (time) {
    return new Promise((resolve) => {
      setTimeout(resolve,time);
    })
  }

  function changeInputValue (dom,value) {
    dom.focus();
    document.execCommand('inserttext',false,value);
  }
})();

结果展示 image.png

4、总结与思考

借助 Tampermonkey 与 AI 交互，拿到了问题答案的内容；不管是借助富文本展示，还是通过 DOM 解析内容再次处理，都拥有不错的适用场景~

上述代码中，我们通过定时器等待 30s，然后默认认为此时 AI 生成答案已经结束，但实际中，我们的问题有复杂有简单，统一等待 30s 肯定不合适; web api 中提供了 MutationObserver 来监听 DOM 元素变化，我们可以借此来精准的判断答案是否生成完全

  // 创建一个 MutationObserver 实例，监听 body 元素内子元素的变化
  const observer = new MutationObserver(function (mutations) {
    let stopCreateBtn = document.querySelector('.mEKFkIX7'); // 停止生成按钮
    if (stopCreateBtn && stopCreateBtn.style.display != 'none') {
      // TODO: 生成失败，填入问题重新生成
    }

    let reCreateBtn = document.querySelector('.yyjIo3Fm'); // 重新生成按钮
    if (reCreateBtn && reCreateBtn.style.display != 'none') {
      // 创建完成，找到最后一个内容容器（即成功生成的内容）
      let answerNodes = document.querySelectorAll('.q4y8uP0A');
      let len = answerNodes.length;
      let content = answerNodes[len - 1].innerHTML;
      // TODO: 存储
      location.reload();
    }
  });

  observer.observe(document.body, { 
    childList: true,
    subtree: true 
  });

以上，只是油猴脚本的简单使用介绍，抛砖引玉，还有更多有趣的内容等待着探索~

6、结束语

生活中，总有那么一种人，把刻薄当作耿直，把嘴贱当作坦诚，惹得我们心烦气躁，肝火上升。这里给大家介绍一剂良方：陈皮 4.5 克，半夏 3 克，茯苓 3 克，甘草 0.9 克，加 3 大碗水大火煎成 1 碗，然后趁其不备，泼他脸上。

开个玩笑；生活嘛，皮一点才会开心，毕竟

微信图片_20231018143211.jpg
avatar
文章
阅读
粉丝