油猴脚本教程案例【长按元素】- 哔哩哔哩一键三连

文章目录

1. 元数据
2. 编写函数
- 2.1 关键函数
- 2.2 完整代码
3. 验证和调试
- 3.1 效果演示
4. 可能遇到的问题和解决方法
5. 结语

1. 元数据

在编写油猴脚本时，首先需要设置一些元数据，包括脚本的名称、命名空间、版本、描述等信息。以下是本脚本的元数据部分：

// ==UserScript==
// @name         bilibili一键三连脚本
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  点击按钮实现一键三连脚本
// @author       D0ublecl1ck
// @match        https://www.bilibili.com/video/*
// @match        https://www.bilibili.com/list/*
// @icon         https://static.hdslb.com/mobile/img/512.png
// @grant        GM_addStyle
// ==/UserScript==

name: 脚本的名称，这里是 “bilibili一键三连脚本”。
namespace: 命名空间，一般使用默认值。
version: 脚本版本号，初始版本为 “0.1”。
description: 脚本的描述，简要介绍了脚本的功能。
author: 脚本作者，这里是 “D0ublecl1ck”。
match: 脚本运行的网页地址，匹配Bilibili视频和列表页。
icon: 脚本图标的URL。
grant: 油猴脚本所需的额外权限，这里使用了 GM_addStyle。

2. 编写函数

2.1 关键函数

 longPressElement(targetElement, 3000);// 2.4 长按指定元素function longPressElement(element, duration) {// 创建 mousedown（鼠标按下） 事件const pressEvent = new Event('mousedown');// 创建 mouseup（鼠标释放） 事件const releaseEvent = new Event('mouseup');// 触发鼠标按下事件element.dispatchEvent(pressEvent);// 延时一定时间后触发鼠标释放事件，模拟长按setTimeout(() => {element.dispatchEvent(releaseEvent);}, duration);}

2.2 完整代码

接下来，我们将编写代码逻辑

(function () {'use strict';// 2.1 创建悬浮窗function createFloatingWindow() {// 创建一个 div 元素作为悬浮窗const floatingWindow = document.createElement('div');// 设置悬浮窗的样式floatingWindow.id = 'floating-window';floatingWindow.style.position = 'fixed';floatingWindow.style.bottom = '20px';floatingWindow.style.left = '20px';floatingWindow.style.padding = '10px';floatingWindow.style.zIndex = '9999';floatingWindow.style.background = '#ffffff';floatingWindow.style.border = '1px solid #cccccc';floatingWindow.style.padding = '10px';floatingWindow.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)';// 将悬浮窗添加到页面中document.body.appendChild(floatingWindow);// 2.2 创建按钮const button = document.createElement('button');button.textContent = '一键三连';button.style.marginRight = '10px';// 添加按钮点击事件监听器button.addEventListener('click', handleButtonClick);// 将按钮添加到悬浮窗中floatingWindow.appendChild(button);}// 2.3 处理按钮点击事件function handleButtonClick() {// 查找页面中类名为 'video-like' 且属于 'video-toolbar-left-item' 的元素const targetElement = document.querySelector('.video-like.video-toolbar-left-item');// 如果找到目标元素if (targetElement) {// 调用长按指定元素的函数，长按时间为 3000 毫秒（3秒）longPressElement(targetElement, 3000);} else {// 如果未找到目标元素，输出错误信息到控制台console.error('未找到目标元素');}}// 2.4 长按指定元素function longPressElement(element, duration) {// 创建 mousedown（鼠标按下） 事件const pressEvent = new Event('mousedown');// 创建 mouseup（鼠标释放） 事件const releaseEvent = new Event('mouseup');// 触发鼠标按下事件element.dispatchEvent(pressEvent);// 延时一定时间后触发鼠标释放事件，模拟长按setTimeout(() => {element.dispatchEvent(releaseEvent);}, duration);}// 2.5 初始化脚本，调用创建悬浮窗的函数createFloatingWindow();})();