最近高强度使用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);