油猴脚本编写总结

脚本设置

| 后为设置对应解释

油猴代码编写

油猴基础模板代码

(function() {
    'use strict'; 
    })()

此写法为 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);

 }
    
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"); 
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(); 
    }

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

定时执行

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

var timeoutId = setTimeout(function() {
  console.log("这个消息会在 3 秒后显示");
}, 3000);

clearTimeout(timeoutId);

var intervalId = setInterval(function() {
  console.log("这个消息会每 2 秒显示一次");
}, 2000);

clearInterval(intervalId);

通过油猴发送异步请求

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

(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 参数值的代码示例：

var urlString = "https://xxxxxxx?courseId=15948&courseFieldID=c374aa0ff6421f6d45e0d35606627bc7&trainingId=1902&projectId=18463&practiseSize=5";


var url = new URL(urlString);


var courseFieldID = url.searchParams.get('courseFieldID');
var projectId = url.searchParams.get('projectId');


console.log(courseFieldID); 
console.log(projectId); 

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

常用函数

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

var str = "Hello World!";
var includesResult = str.includes("World"); 

• 获取标签内文本：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) {}

常见的坑

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