工欲善其事，必先利其器。
无需多言，Chrome浏览器绝对是Web开发者心中的神器之一。配上插件扩展，其更是如虎添翼。今天推荐一个神级插件 —— Tampermonkey，并提供一个实战示例。
Tampermonkey 能做什么？
它是一个用户脚本(userscript)管理器，有着千万级别的用户数。用户脚本是一小段程序，可以用来给网页添加额外的功能。比如改变页面的主题样式、为Youtube视频添加下载按钮、甚至可以用来屏蔽网站广告。
怎么运行 Tampermonkey？
首先，建议你安装最新版的chrome
然后，如果你在国内，需要有一架可用的梯子
打开chrome，访问插件安装页，https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo，点击 Add to Chrome 按钮进行安装
怎么为 Tampermonkey 添加新的脚本？
1. 点击浏览器右上角 Tampermonkey 图标，选择 添加新脚本。
2. 在新打开窗口中加入自己的js脚本，按 cmd + s (或 ctrl + s) 保存。
以上只是简单的步骤，更高级的技巧请参考 Tampermonkey 官方文档，http://www.tampermonkey.net。
下面说说怎么写一个自动显示公众号音频下载链接的用户脚本。
需求来源
某老师做课程演示时需要将公众号上相关音频下载下来，以方便放到ppt中。
公众号默认是不给音频下载地址的，所以我们要自己探索。
探索的方法我在之前的文章中也有提过，请自行复习：
一言以蔽之，只需要通过 Chrome网络面板 定位到资源类型为 media 的链接：
我们要做的，是在用户脚本中把这个过程自动化。
先上代码：
// ==UserScript==// @name 微信音频下载// @namespace http://tampermonkey.net/// @version 0.1// @description try to take over the world!// @author Youmoo// @match https://mp.weixin.qq.com/**// @grant unsafeWindow// ==/UserScript==(async function (w, doc) {'use strict';await delay(3000);let [voiceId, dom] = fromCgiData() || fromMpVoice() || [];if (!voiceId) {return console.info('未发现音频资源...');}const link = `https://res.wx.qq.com/voice/getvoice?mediaid=${voiceId}`;console.info('发现音频资源,下载链接：', link);const a = doc.createElement('a');a.href = link;a.textContent = '点我下载音频';a.target = '_blank';dom.after(a);function fromCgiData() {// https://mp.weixin.qq.com/mp/audio?_wxindex_=0&scene=104&__biz=MzI3NjY3NDc3Ng==&mid=2247494834&idx=3&voice_id=MzI3NjY3NDc3Nl8yMjQ3NDk0ODIw&sn=2317b46ffe663257af3f49cbaee61bb6#wechat_redirectconsole.log('cgi data', w.cgiData);const {cgiData: d} = w;if (!d || !d.voiceid) {return;}return [d.voiceid, doc.getElementById('voice_parent')];}function fromMpVoice() {// https://mp.weixin.qq.com/s/r70i5Eny_m0_Uk_b5u_-PQconst v = doc.querySelector('mpvoice');if (!v) {return;}return [v.getAttribute('voice_encode_fileid'), doc.querySelector('.js_audio_frame')];}function delay(ms) {return new Promise(res => setTimeout(res, ms));}})(window.unsafeWindow||window, document);
你如果只是要下载音频，则不需要理解这段代码；如果你是一名技术并对其原理感兴趣，请继续往下看，我会对重要的部分解释。
第7行，@match 用来指定在哪些网页上运行。这里我们要求脚本在微信开放平台域名下运行。
第8行，@grant 用来声明需要的权限。unsafeWindow 可以用来访问页面上的js对象。
第14、51行，因有些公众号页面音频内容是异步的，我们要延迟一会再去访问这些内容，以免拿不到。
第21行，组装音频下载源。
第24~28行，将下载源显示到音频下方。
第31、42行，目前发现公众号显示音频时，有2种不同的dom排布，所以写了两个方法分别进行处理。
第54行，我们传入了 window.unsafeWindow||window，这样，即使不借助 Tampermonkey，我们直接复制上面脚本在Chrome终端下运行，也能达到同样效果。
我们看看效果：
如果对您有用，还请「转发」或点个「在看」。
更多的工具介绍：
