油猴脚本编写总结

脚本设置

| 后为设置对应解释

// ==UserScript==
// @name         new js        					|脚本名
// @namespace    http://tampermonkey.net/ 		|脚本命名空间
// @version      2024-07-09
// @description  try to take over the world!
// @author       You 							| 作者名
// @match        https://xxxx/usercenter/projectDtail?*  | 匹配网址*代表通配符任意字符串，如果需要多个不想通的网址则这是多个@match即可
// @match        https://xxxxx/videoPlayer?*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        GM_setValue   	| 油猴gm函数申请，函数的作用为不同页面共享变量
// @grant        GM_getValue	| 油猴gm函数申请，函数的作用为不同页面共享变量
// ==/UserScript==

油猴代码编写

油猴基础模板代码

(function() {
    'use strict'; // 设置代码严格模式，增强代码规范性，减少bug
    })()

此写法为js代码语法，意义为：定义匿名函数function(){‘use strict’; } 并且调用它.实际上油猴脚本代码的编写就是js代码的编写

GM函数使用方式

// 保存数据
GM_setValue('myKey', 'myValue');
// 获取数据
let value = GM_getValue('myKey');

保存后的数据即使在不同页面情况下也可以获取对应的数据，常用于不同页面之间的数据共享

js代码基础

html页面生命周期

等待页面加载完成后执行脚本

document.addEventListener('DOMContentLoaded', function() {
  //定义一个函数来模拟键盘按键
 function simulateKeyPress() {
          console.log('已模拟随机操作');
   // 创建一个键盘事件
  var keyEvent = document.createEvent('KeyboardEvent');
    keyEvent.key = 'ArrowUp';
     //模拟键盘按键操作
   document.dispatchEvent(keyEvent);

 }
    // 设置一个定时器，每10秒钟执行一次模拟点击
simulateKeyPress();
});

html元素获取

通过ID获取元素

使用 document.getElementById() 方法可以获取具有特定ID的元素。这个方法返回对应ID的第一个元素。

var element = document.getElementById("elementId");

通过类名获取元素

使用 document.getElementsByClassName() 方法可以获取具有特定类名的所有元素。这个方法返回一个HTMLCollection。

var elements = document.getElementsByClassName("className");

通过标签名获取元素

使用 document.getElementsByTagName() 方法可以获取具有特定标签名的所有元素。这个方法返回一个HTMLCollection。

var elements = document.getElementsByTagName("tagName");

通过CSS选择器获取元素

使用 document.querySelector() 方法可以获取第一个匹配特定CSS选择器的元素。使用 document.querySelectorAll() 方法可以获取所有匹配特定CSS选择器的元素，返回一个NodeList。

var element = document.querySelector("#elementId"); // 通过ID
var element = document.querySelector(".className"); // 通过类名
var element = document.querySelector("tagName"); // 通过标签名
var elements = document.querySelectorAll("selector"); // 获取所有匹配的元素

通过属性获取元素

var element = document.querySelector("[attributeName='value']");
var elements = document.querySelectorAll("[attributeName]");

通过JavaScript创建元素

var newElement = document.createElement("tagName");

通过关系获取元素

你还可以通过元素之间的关系来获取元素，例如：
parentNode：获取元素的父节点。
childNodes：获取元素的子节点列表。
firstChild：获取元素的第一个子节点。
lastChild：获取元素的最后一个子节点。
nextSibling：获取元素的下一个兄弟节点。
previousSibling：获取元素的前一个兄弟节点。

var parent = element.parentNode;
var children = element.childNodes;
var firstChild = element.firstChild;
// ...等等

通过标签内容获取元素

获取标签内内容为未学习的元素

let wantLearnEle = Array.from(document.querySelectorAll('table td')).find(el => el.innerText === '未学习');

综合使用案例

    // 获取标签文本为未学习的元素
	let wantLearnEle = Array.from(document.querySelectorAll('table td')).find(el => el.innerText === '未学习');
    if(wantLearnEle) {
    // 通过未学习的元素获取视频播放按钮
    let wantLearnVideo = wantLearnEle.nextElementSibling.firstChild;
        wantLearnVideo.click(); // 想要模拟点击元素直接调用元素的click方法即可
    }

更为详细的具体使用结合css选择器即可

定时执行

由于js中没有自带的sleep函数所以设置定时执行需要用到setTimeout函数或setInterval函数，另外不建议这两个函数嵌套使用，使用示例如下：

// setTimeout 允许你设置一个函数在指定时间后执行一次。
// 设置一个定时器，3秒后执行
var timeoutId = setTimeout(function() {
  console.log("这个消息会在3秒后显示");
}, 3000);
// 停止上面的setTimeout定时器
clearTimeout(timeoutId);

// setInterval 允许你设置一个函数每隔一定时间就执行一次。
// 设置一个定时器，每2秒执行一次
var intervalId = setInterval(function() {
  console.log("这个消息会每2秒显示一次");
}, 2000);
// 停止上面的setInterval定时器
clearInterval(intervalId);

通过油猴发送异步请求

使用 GM_xmlhttpRequest 来发送 HTTP 请求，它比原生的 XMLHttpRequest 更强大，可以突破同源策略的限制

// ==UserScript==
// @name         Advanced HTTP Request
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Send a HTTP request using GM_xmlhttpRequest
// @author       You
// @match        *://*/*
// @grant        GM_xmlhttpRequest   | 申请异步函数
// ==/UserScript==

(function() {
    'use strict';

    GM_xmlhttpRequest({
        method: "GET",
        url: "YOUR_URL_HERE",
        onload: function(response) {
            console.log('Response body:', response.responseText);
        },
        onerror: function(response) {
            console.error('Request failed.');
        }
    });
})();

解析地址栏参数在get的情况下

在JavaScript中，你可以使用URL对象的searchParams属性来解析查询字符串并提取特定的参数值。以下是提取courseFieldID和projectId参数值的代码示例：

// 定义URL字符串
var urlString = "https://xxxxxxx?courseId=15948&courseFieldID=c374aa0ff6421f6d45e0d35606627bc7&trainingId=1902&projectId=18463&practiseSize=5";

// 创建URL对象
var url = new URL(urlString);

// 提取courseFieldID和projectId参数值
var courseFieldID = url.searchParams.get('courseFieldID');
var projectId = url.searchParams.get('projectId');

// 输出提取的值
console.log(courseFieldID); // 输出: c374aa0ff6421f6d45e0d35606627bc7
console.log(projectId); // 输出: 18463

这段代码首先定义了一个包含查询参数的URL字符串，然后使用new URL(urlString)创建了一个URL对象。之后，通过searchParams.get(‘parameterName’)方法提取了courseFieldID和projectId参数的值，并将它们打印到控制台。

常用函数

• includes() 方法： includes() 方法用于检查一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。

var str = "Hello World!";
var includesResult = str.includes("World"); // 返回 true

• 获取标签内文本：document.querySelector(“[class=video_dabiao]”).innerText
• 将json字符串转化为对象JSON.parse(response.responseText)
• 将对象转化为json字符串JSON.stringify(对象)
• 将两个list合并let resList= [...list1,...list2]
• 遍历listfor(let question of questionList) {} for(let index in questionList) {}

常见的坑

• 视屏无法自动播放，调用视频播放按钮失败，原因是浏览器的安全策略，需要用户鼠标点击或用键盘控制网页后才能播放成功。
• 脚本代码更改不生效，原因是浏览器缓存，修改脚本名即可解决