我写了个 Chrome 插件，一键下载 PornHub 视频！
以下文章来源于小詹学Python ，作者小詹&zgao
公众号关注 “GitHubDaily”
小詹有个读者叫 zgao，他之前写过一篇博客，爬取了 PornHub（下面全部简称 P 站）上的视频，代码很简单，关键还好用！当时小詹就 P 站上爬取了一些考研数学视频，虽然我用不上，但是我热爱技术啊！
技术分析
之所以有今天这篇文章呢，是因为 zgao（下文中的我都为读者 zgao）发现 P 站修改了前端的代码，将视频的接口信息全部隐藏起来了，不像以前那样能直接在网页源码中找到视频链接。于是我根据最新的 P 站情况写了一个插件，能够一键下载学习视频。
以下是从分析到写插件的全过程。首先可以来对比下修改前后的 P 站：
这两段都是 JS 代码，但是以前的一看就很清晰明了，而现在的有一大堆的垃圾注释在里面。不用说，肯定是做了 JS 混淆。
在 network 面板中将代码格式化之后可以看的很清楚，看上面定义的那一堆变量感觉就是我们要的 url，而下面就是将变量拼接的最后的视频链接。
我整个人都傻了，P 站的程序猿这么直接的吗？那还混淆个 ** 的代码？
以前写个 P 站的爬虫还得每个 URL 正则匹配才能提取出来。现在更省事了，都不用爬了，直接把这个变量的值取出来就什么信息都有了。
我严重怀疑 P 站的前端程序猿是不是写代码的时候看片去了！
所以接下来要想提取出视频的 url 就很容易了，直接用 ExecJS 这个库来执行这段被混淆过的 JS 代码就 ok 了。
但是想了想这样也太简单了吧，没什么意思。要不我写一个 Chrome 的插件来完成这件事？因为本身视频加载之前 JS 肯定会执行。那么用插件的方式也更加方便。插件开发的过程，最关键的问题就是如何将包含所有视频接口信息的变量给提取出来。
一开始我是想到是直接在浏览器的全局变量 window 中拿到那个变量，这是最简单的办法。我发现通过注入 JS 代码用 console.log (window) 输出的全局变量中还是没有包含 flashvars_***** 这个变量，不清楚为什么。我一开始认为可能是页面 onload 的时候还没有执行 JS 所以没有变量信息。后面我想了想要不执行 settimeout 来实现延迟执行代码，但是还是不行。
于是我决定用另外一个办法，将字符串作为代码执行。也就是写木马最常用到的 eval 函数。在页面加载时，通过 xpath 得到混淆 JS 代码的位置，将它作为一段字符串当成代码执行，这样同样拿到了接口信息。
给大家看一下插件最核心的两段代码 content-script.js，也就是注入页面的 JS 代码。（代码可左右拖动）
function Func() {
return new Promise((resolve, reject) => {
var a = document.querySelector("#player >script:nth-child(1)").innerHTML
a = a.split('loadScriptUniqueId')[0]
var c = a.match("flashvars_[0-9]{1,}")[0]
eval(a)
var d = eval(c)
resolve(d)
})
}
window.onload = () => {
Func().then(res => {
var videoType = []
Object.keys(res).forEach((item) => {
if (item.startsWith('quality_')) {
var obj={
key:item,
val:res[item]
}
videoType.push(obj)
}
})
for(var i = 0, len = videoType.length; i < len; i++){
console.log(videoType[i].key,videoType[i].val)
}
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
if(request.cmd == 'test')
sendResponse(videoType);
});
})
}
popup.js
function sendMessageToContentScript(message, callback)
{
chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
{
chrome.tabs.sendMessage(tabs[0].id, message, function(response)
{
if(callback) callback(response);
});
});
}
sendMessageToContentScript({cmd:'test', value:'test'}, function(videoType)
{
console.log(videoType);
for(var i = 0, len = videoType.length; i < len; i++){
console.log(videoType[i].key,videoType[i].val)
}
var boxEl = document.getElementsByTagName('ul')[0]
//var videoType = [{ key: 'qeqw', val: 'adasda' }, { key: 'qeqw', val: 'adasda' }, { key: 'qeqw', val: 'adasda' }]
var videoStr = ''
videoType.forEach(item => {
videoStr += "<li>" + "<label>清晰度：" + "<span>" + item.key + "</span>" + "</label>" + "<a href=" + item.val + " target='_blank'>下载</a>" + "</li>"
});
boxEl.innerHTML = videoStr
});
popup.js 的作用主要就是和 content-script.js 通信，相互传值。然后在插件中渲染生成页面，JS 间传值主要用到了 Chrome 的 API。插件开发的过程中还涉及到很多细节问题，比如 ico 的制作，这些就不提了。
关于插件
看到这的小伙伴，其实真正吸引你的是这最后的插件吧？
插件安装使用：
如果你会科学上网，直接到Chrome 商店下载即可：
http://1t.click/bpmG
或者，你也可以通过下面方式安装。
1. 公众号后台回复关键词「PH」，获取插件安装包。
2. 打开 Chrome，地址输入 chrome://extensions
3. 打开「开发者模式」，选择「加载已解压的扩展程序」
4. 选择刚刚从公众号后台下载的解压包
---