写一个简单的Tampermonkey油猴插件—实现音乐下载

前言；油猴插件的安装与简介请参考，本文不再赘述Tampermonkey油猴插件——安装与使用教程 - 知乎 (zhihu.com)

一个基本的油猴插件有一下组成

 打开复制qq音乐播放器的网站

 目标是将播放的音乐下载到本地（当然仅限于免费歌曲）

打开F12查看音乐标签的位置

可以看到音乐的url可以直接从audio标签的src属性获得

再这是歌曲的名字位于类song_info_name的a标签中可以获得

则代码如下

var songname=document.querySelector('.song_info__name');//先获取容器的位置
var name=songname.querySelector('a').innerText;//查找节点的a标签获取歌曲的名字

var music_url=document.querySelector('audio');
var url=music_url.src;//获取下载的url

 获取完则可以开始下载

下载可以直接使用油猴自带的api，开头添加一下内容即可

// @grant         GM_download

 封装一个下载的函数

function downloadFile(url1, fileName) {
 GM_download({
url: url1,
name:fileName, //不填则自动获取文件名
saveAs: true, //布尔值，显示"保存为"对话框
onerror: function (error) {
//如果下载最终出现错误，则要执行的回调
console.log(error)
alert("下载失败");
}
})
}

调用的话可以通过加入一个按钮来实现，效果如下

具体代码如下

var button1 = document.createElement('button');
    button1.textContent = "一键下载"; //按钮内容
    button1.style.width = "90px"; //按钮宽度
    button1.style.height = "28px"; //按钮高度
    button1.style.align = "center"; //文本居中
    button1.style.color = "white"; //按钮文字颜色
    button1.style.background = "#31c27c"; //按钮底色
    button1.style.border = "1px solid #e33e33"; //边框属性
    button1.style.borderRadius = "10px"; //按钮四个角弧度
    songname.appendChild(button1);//把按钮加入子节点

 然后给按钮绑定点击的事件

button1.addEventListener('click', function() {
var songname=document.querySelector('.song_info__name');
var name=songname.querySelector('a').innerText;
var music_url=document.querySelector('audio');
var url=music_url.src;//获取下载的url
downloadFile(url,name);
    });
}

可以调试试试，

发现脚本运行了，但是没用出现按钮， 

通过断点发现，此时dom还未加载出来，

我们可以给函数加个延时属性

    setTimeout(start, 1000);

 再调试发现可以正常显示并且下载 ，大功告成

结合附上源代码

// ==UserScript==
// @name         QQ音乐下载
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       风间花雨
// @match       https://y.qq.com/n/ryqq/player
// @icon        https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000
// @grant         GM_download
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';
function downloadFile(url1, fileName) {
 GM_download({
url: url1,
name:fileName, //不填则自动获取文件名
saveAs: true, //布尔值，显示"保存为"对话框
onerror: function (error) {
//如果下载最终出现错误，则要执行的回调
console.log(error)
alert("下载失败");
},


})

}

// 创建新按钮
function start(){
var button1 = document.createElement('button');
    button1.textContent = "一键下载"; //按钮内容
    button1.style.width = "90px"; //按钮宽度
    button1.style.height = "28px"; //按钮高度
    button1.style.align = "center"; //文本居中
    button1.style.color = "white"; //按钮文字颜色
    button1.style.background = "#31c27c"; //按钮底色
    button1.style.border = "1px solid #e33e33"; //边框属性
    button1.style.borderRadius = "10px"; //按钮四个角弧度
console.log(button1);
var songname=document.querySelector('.song_info__name');
console.log(songname);
// 添加新按钮到页面中
songname.appendChild(button1);
button1.addEventListener('click', function() {
      // 在这里编写点击按钮后执行的代码
 var name=songname.querySelector('a').innerText;
var music_url=document.querySelector('audio');
var url=music_url.src;//获取下载的url
downloadFile(url,name);

    });
}
    setTimeout(start, 1000);
    // Your code here...
})();