最近高强度使用Bilibili网页版，为了使一些常用的操作更为便捷，于是写了一些油猴脚本。
油猴脚本的具体使用方法见GreasyFork网站。
编写过程
编写油猴脚本的主要目的是对网页中的一些DOM元素进行操作。所以编写的第一步是按F12开启开发者模式，这样在Elements界面中可以将鼠标移动到元素上并找到在网页中的对应位置；然后逐级展开，找到具体要操作的元素的位置。
找到之后，就可以根据该元素的标签在代码中快速定位。常用方法有document.getElementsByClassName，document.getElementsById，document.querySelector等。其中querySelector可以很方便地根据HTML Attribute（属性）来找到对应的元素。
脚本实例
Bilibili直播间自动签到
由于直播间签到只需要找到按钮并点击，所以很容易编写，主要任务还是找到按钮位置并执行点击操作。
// ==UserScript==
// @name Bilibili直播间自动签到
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 现在只要打开Bilibili直播间就能自动签到
// @author Author
// @match https://live.bilibili.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant none
// ==/UserScript==
(function() {
'use strict';
document.getElementsByClassName("checkin-btn t-center pointer")[0].click();
console.log('Bilibili直播间自动签到 已执行')
})();
Bilibili复制Markdown链接
这部分用到的内容比较多，比如剪贴板操作，延时执行等。在编写过程中也查阅了很多的资料，对于大型网站的HTML也有了更多了解。
// ==UserScript==
// @name Bilibili复制Markdown链接
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 在Bilibili标题栏中添加了复制Markdown的按钮
// @author Author
// @match https://www.bilibili.com/video/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant none
// ==/UserScript==
// 添加复制按钮
let markdownButton = document.createElement('button');
markdownButton.setAttribute('style', 'color:#000000;'); // 内联CSS难以修改，不建议在网站开发时使用
markdownButton.innerText = '复制 Markdown 链接';
markdownButton.addEventListener(
'click',
async (e) => {
// 获取Markdown链接；这部分信息不能在点击前获取，否则在切换网页时链接信息可能还是上一个视频链接
let markdownStringTitle = document.getElementsByClassName('video-title')[0].innerText;
let markdownStringLink = document.querySelector('[rel="canonical"]').href;
let markdownString = `[${markdownStringTitle}](${markdownStringLink})`; // Markdown格式的字符串
await navigator.clipboard.writeText(markdownString);
console.log('Markdown链接已复制到剪贴板');
}
);
let biliVideoDataList = document.getElementsByClassName('video-data-list')[0].children[2]; // 插入位置，可自行修改
// 由于Bilibili页面完全加载后会覆盖一开始添加的按钮，故需要延时执行
let sleepFun = (time) => new Promise((resolve) => setTimeout(resolve, time));
let timeout = 5000;
let fun = () => {
biliVideoDataList.insertAdjacentElement('afterend', markdownButton);
}
sleepFun(timeout).then(fun);
