手把手教你寫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 文件拖拽進頁面安裝便可。