脚本添加按钮（求）

石一歌

想用脚本添加一个按钮到页面上，该怎么办呢？

王一之

下一节就介绍这个!

石一歌

坐等，希望学会后，自己搞一个实用插件出来:;P

王一之

周末文章应该能写出来,但是不知道视频不知道要什么时候
最近太忙了

王一之

[油猴脚本开发指南]脚本往页面上添加新元素
https://bbs.tampermonkey.net.cn/thread-237-1-1.html
(出处: 油猴中文网)

石一歌

本帖最后由 石一歌 于 2021-1-23 22:00 编辑

// ==UserScript==
// @name         bilibili保存demo
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      0.1
// @description  给bilibili增加一个保存进度按钮
// @author       石一歌
// @match        https://www.bilibili.com/video/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

let Save_progress = document.createElement("button");
Save_progress.innerText = "保存";
Save_progress.style.background = "#757575";//颜色弄得差不多吧
Save_progress.style.color = "#fff";
Save_progress.onmouseover = function () {
    Save_progress.style.background = 'rgb(0,161,214)';
}//变蓝
Save_progress.onmouseout = function () {
    Save_progress.style.background = 'rgb(117,117,117)';
}//还原

Save_progress.onclick = function () {
    //保存代码
    var test = window.location.href;
    alert(tit);
    createAndDownloadFile(tit + ".bat", "start " + test+"\ndel %0")
    //tit为标题，下载直接打开当前页面的bat脚本，单次使用后删除（del %0），浏览器一直拦截，需要手动确认，很烦
};
let tit = document.querySelector('.tit').innerText;//获取其标题
let ops = document.querySelector('#arc_toolbar_report .ops');
ops.addEventListener("DOMNodeInserted", function (event) {
    let more = document.querySelector('.more');
    more.parentElement.insertBefore(Save_progress, more);
    //调节了按钮位置
});//插入
function createAndDownloadFile(fileName, content) {
    var aTag = document.createElement('a');
    var blob = new Blob([content]);
    aTag.download = fileName;
    aTag.href = URL.createObjectURL(blob);
    aTag.click();
    URL.revokeObjectURL(blob);
}//下载函数，fileName为文件名, content为内容

交个作业，对教程的代码进行了一定的修改作用是下载一个打开哔哩哔哩网址的bat脚本，用以保存视频学习的进度（分p的那种）