手把手教你寫(xiě)P站視頻下載Chrome插件
今天帶大家開(kāi)發(fā)一個(gè) Chrome 瀏覽器插件，主要功能是下載P站視頻，如果還不知道P站是干嘛的，嗯。。。那還是不要往下看了，這趟車(chē)最好不要上。
P站是個(gè)學(xué)習(xí)的好地方，比如看新聞聯(lián)播什么的。
但他需要登錄才能下載高清視頻，有的視頻還需要付費(fèi)下載。但是這種怎么能阻擋我們學(xué)習(xí)的好奇心呢。
如何下載P站高清視頻
打開(kāi) Devtools， 審查元素，找到 flashvars 變量，之前的版本是直接能在這個(gè)變量下看到視頻地址。
現(xiàn)在前端做了混淆，不能直接看到，但是只要執(zhí)行完 js，地址依然能輕松拿到。我們打印 flashvars_224154541 的值?？梢钥吹接?種格式的視頻 cdn 地址。
看樣子需要一個(gè) js 引擎去執(zhí)行這段代碼。網(wǎng)上查了下，有個(gè)神奇的項(xiàng)目居然能完美下載P站視頻，應(yīng)該很多小伙伴都用過(guò)：https://github.com/ytdl-org/youtube-dl
看了下他的代碼，實(shí)現(xiàn)邏輯也跟上面的差不多，詳見(jiàn)：https://github.com/ytdl-org/youtube-dl/blob/fa9b8c662808a50605bb05f90af101e13b30fce6/youtube_dl/extractor/pornhub.py
好了，輪子別人已經(jīng)做好了，我們只要實(shí)現(xiàn)個(gè)轉(zhuǎn)換的 web server 的接口就行。
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 插件開(kāi)發(fā)
Chrome 插件的作用是拿到用戶訪問(wèn)的 url，提交給服務(wù)器即可。
我們先創(chuàng)建一個(gè) manifest.json，相當(dāng)于插件的一個(gè)配置文件。
"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"]
}
由于插件非常簡(jiǎn)單，用不著 background.js content-script.js ，只需聲明 activeTab 的權(quán)限。
接下來(lái)，我們創(chuàng)建一個(gè) popup.html 作為和用戶的交互界面，html 里面包含一個(gè) popup.js
url = tabs[0].url
title = tabs[0].title
if (url != undefined && url.match(/https:\/\/.*?\.pornhub\.com\/view_video\.php\?viewkey=.*/)) {
html = '
' + title +'
'html += 'Download'
$("#video_info").append(html)
}
})
將開(kāi)發(fā)完的插件加載到瀏覽器中，然后在P站頁(yè)面點(diǎn)擊瀏覽器右上角的插件，可以看到如下彈窗。
點(diǎn)擊 Download 跳轉(zhuǎn)至網(wǎng)站頁(yè)面，即可下載高清視頻。
總結(jié)
本次教程忽略了一些細(xì)節(jié)，比如前端 html 的制作，如何打包一個(gè)插件，這部分內(nèi)容可參見(jiàn)我翻譯的谷歌瀏覽器擴(kuò)展官方文檔：https://dev.crxhome.org
其實(shí)解析視頻這塊，直接用 js 執(zhí)行也能得到結(jié)果，而且還不依賴后端 api。我開(kāi)發(fā)后端的轉(zhuǎn)換 api，主要原因如下:
插件有更新問(wèn)題，一旦解析邏輯失效，需要重新審核上線，或者一些無(wú)法更新的用戶就會(huì)沒(méi)法使用。
網(wǎng)站可以不依賴插件運(yùn)行，相對(duì)限制更少，更通用。
安裝
最后把 Demo 放出來(lái)給大家試用吧，在公眾號(hào)「程序化思維」回復(fù) demo ，最后下載拿到一個(gè) zip 文件。
谷歌瀏覽器訪問(wèn) chrome://extensions 后，直接將 zip 文件拖拽進(jìn)頁(yè)面安裝即可。