手把手教你写P站视频下载Chrome插件

今天带你们开发一个 Chrome 浏览器插件，主要功能是下载P站视频，若是还不知道P站是干吗的，嗯。。。那仍是不要往下看了，这趟车最好不要上。

P站是个学习的好地方，好比看新闻联播什么的。

但他须要登陆才能下载高清视频，有的视频还须要付费下载。可是这种怎么能阻挡咱们学习的好奇心呢。

如何下载P站高清视频

打开 Devtools， 审查元素，找到 flashvars 变量，以前的版本是直接能在这个变量下看到视频地址。

如今前端作了混淆，不能直接看到，可是只要执行完 js，地址依然能轻松拿到。咱们打印 flashvars_224154541 的值。能够看到有4种格式的视频 cdn 地址。

看样子须要一个 js 引擎去执行这段代码。网上查了下，有个神奇的项目竟然能完美下载P站视频，应该不少小伙伴都用过： github.com/ytdl-org/yo…

看了下他的代码，实现逻辑也跟上面的差很少，详见：github.com/ytdl-org/yo…

好了，轮子别人已经作好了，咱们只要实现个转换的 web server 的接口就行。

def get_download_urls(url):
    ydl_opts_start = {'forcejson': True, 'simulate': True, 'skip_download': True, 'quiet': True}

    f = io.StringIO()
    with redirect_stdout(f):
        ydl = youtube_dl.YoutubeDL(ydl_opts_start)
        ydl.download([url])
    result = f.getvalue()
    result = json.loads(result) if result else {}
    return result复制代码

Chrome 插件开发

Chrome 插件的做用是拿到用户访问的 url，提交给服务器便可。

咱们先建立一个 manifest.json，至关于插件的一个配置文件。

{
    "manifest_version": 2,
    "name": "P站视频高清下载",
    "version": "1.1",
    "description": "下载高清P站高清视频",
    "author": "laosiji",
    "icons":
    {
        "48": "icon.png",
        "128": "icon.png"
    },
    "browser_action": 
    {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": ["activeTab"]
}复制代码

因为插件很是简单，用不着 background.js content-script.js ，只需声明 activeTab 的权限。

接下来，咱们建立一个 popup.html 做为和用户的交互界面，html 里面包含一个 popup.js

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    url = tabs[0].url
    title = tabs[0].title
    if (url != undefined && url.match(/https:\/\/.*?\.pornhub\.com\/view_video\.php\?viewkey=.*/)) {
        html = '<h5>' + title +'</h5>'
        html += '<a target="_blank" href="https://mydownload.fun/download?url='+ url +'"><span class="btn"><img class="icon" src="../css/download.svg"/>Download</span></a>'    
        $("#video_info").append(html)

    }
})复制代码

将开发完的插件加载到浏览器中，而后在P站页面点击浏览器右上角的插件，能够看到以下弹窗。

点击 Download 跳转至网站页面，便可下载高清视频。

总结

本次教程忽略了一些细节，好比前端 html 的制做，如何打包一个插件，这部份内容可参见我翻译的谷歌浏览器扩展官方文档：dev.crxhome.org

其实解析视频这块，直接用 js 执行也能获得结果，并且还不依赖后端 api。我开发后端的转换 api，主要缘由以下:

1. 插件有更新问题，一旦解析逻辑失效，须要从新审核上线，或者一些没法更新的用户就会无法使用。
2. 网站能够不依赖插件运行，相对限制更少，更通用。

安装

最后把 Demo 放出来给你们试用吧，在公众号「程序化思惟」回复 demo ，最后下载拿到一个 zip 文件。

谷歌浏览器访问 chrome://extensions 后，直接将 zip 文件拖拽进页面安装便可。