As a loyal user of Douban fm, Douban fm is deeply attracted by the concept of encountering music unexpectedly. Recently, Douban has upgraded to PRO to enjoy higher quality music services. After the upgrade, the quality has improved significantly. However, a feature is still unavailable, which means you cannot download your favorite songs. After some research on the Douban fm web page, I decided to make a Chrome plug-in for downloading the current song, just to help myself download my favorite music.
Step 1: Find the resource
Use the chromeide tool to open the douban.fm's first page. You can use the networks' in the chromeide tool to access all resources and package your files. Check whether the Douban player is a flash. OK. flash uses http protocol to get audio files.
Step 2: Obtain the URL of the currently played song
In the first step, we learned that the flash music player of Douban directly Obtains resources through the http get method, so we cannot directly know the file address being played in flash, we have to use chrome extension chrome. webRequest. onBeforeRequest. the addListener event monitors all http requests. When a new listener finds a new request, it notifies the page of the update. However, the page and background notification mechanism of chrome extension are pages that actively ask the chrome background. Therefore, more code is needed to implement this simple function. Here we register a communication event with the page in the background. Once a page message is sent to the background, the method registered in the background will be called: chrome. extension. onMessage. addListener (function (request, sender, sendResponse) {// dosomething ;});
The page uses chrome. extension. sendMessage ({from: "douban. fm "}, function (response) {// dosomething}); communicates with the background. The first parameter indicates the requested page.
Another background event is very useful, chrome. webRequest. onHeadersReceived. addListener (function (details) {// dosomething },....), this event occurs when the http reponse header is reached. It can be used to do some small things, such as modifying the name used for audio storage. The Code is as follows:
Chrome. webRequest. onHeadersReceived. addListener (function (details ){
If (details. url. indexOf (". mp3? Douban = ")! =-1 ){
Response = details; // for debugging
For (I = 0; I <details. responseHeaders. length; I ++ ){
If (details. responseHeaders [I]. name. toLowerCase () = "content-type "){
Details. responseHeaders [I]. value = "application/x-please-download-me ";
}
}
Details. responseHeaders. push ({name: "Content-disposition", value: "attachment; filename =" + tab. title. substring (0, tab. title. lastIndexOf ('-')-1) + ". mp3 "});
}
Return {
ResponseHeaders: details. responseHeaders
};
},{
Urls: ["<all_urls>"],
Types: ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"]
},
["Blocking", "responseHeaders"]);
Step 3: Create a page download connection
Use Js to add a download link to the page. This link can be used to download the mp3 file currently being played. To download the mp3 file in person, we embed a hidden iframe.
All code: https://github.com/darlinglele/extensions/tree/master/fm