Javascript打造豆瓣FM的歌詞插件

這是自己第一次寫chrome擴展程序，功能比較簡單，就是爲你在豆瓣FM上聽歌時配上歌詞，以此類推，大家只要懂得javascript就可以很輕鬆打造屬於自己的各種插件。

先上效果圖：

首先進入chrome開發者工具，選擇resource下的localstorage，在裏面你可以看到你現在正在聽的這首歌的相關信息，這將是我們一會兒需要使用javascript獲取的，如下圖：

接下來你需要一個可以獲取歌詞的API,http://geci.me/api/lyric/歌曲名，通過這個api你可以獲得歌詞的下載地址，例如你在地址欄輸入http://geci.me/api/lyric/小情歌，將會返回如下json格式的數據:

這裏我們只關注lrc，也就是歌詞地址。


好了有了這些，我們就可以編寫javascript代碼了，代碼這個思路是這樣的，當你打開豆瓣FM這個網站的時候，代碼會通過localstorage獲取你的歌曲名，然後將歌曲名與http://geci.me/api/lyric/拼接成一個
api地址，如http://geci.me/api/lyric/+小情歌=http://geci.me/api/lyric/小情歌。然後通過這個地址發起異步請求，會得到上圖的那堆數據，再根據數據中的lrc對應的值再次請求以獲得歌詞內容。

function DoubanFM(){
this.name = 'FM';
this.tmp_song_id = '';
this.flag = 1;
this.lyrics = this.draw_lyrics();
}

DoubanFM.prototype.draw_lyrics = function() {
var lyrics_div = document.createElement('span');//用document.createElement()方法可以創造新的節點
document.getElementById("fm-channel-list").appendChild(lyrics_div);//用document.body.appendChild()方法把新的節點附加到到document中
lyrics_div.style.width = '230px';//下面幾行是設置css
//lyrics_div.style.backgroundColor = '#CCF';
lyrics_div.style.zIndex = '10000';
lyrics_div.style.position = 'absolute';
lyrics_div.style.left="50px";
lyrics_div.style.top="0px";
lyrics_div.style.color="#93F";
lyrics_div.align="center";



return lyrics_div;
}

DoubanFM.prototype.geci_entry_url = function(song, artist) {
if (song == undefined || song == null || song == '') return '';
var url = 'http://geci.me/api/lyric/' + song;
if (!(artist == undefined || artist == null || artist == '')) {
url += '/' + artist;
}
console.log(url);
return url;
}

DoubanFM.prototype.request_geci = function() {
eval('var stored_song = ' + localStorage['bubbler_song_info']);//
console.log('the song in localStorage:' + stored_song.artist + ' ' 
+ stored_song.song_name);
if (this.tmp_song_id != stored_song.id) {
console.log(this.tmp_song_id + ' is not ' + stored_song.id);
var url = this.geci_entry_url(stored_song.song_name, stored_song.artist);
this.tmp_song_id = stored_song.id;
this.ajax_get(url);
}
}

DoubanFM.prototype.ajax_get = function(url) {
var XHR = new XMLHttpRequest();
var obj = this;
//一次典型的原生js發起的AJAX請求
XHR.onreadystatechange = function() {
if (XHR.readyState == 4) {
if (XHR.status == 200) {
obj.deal_response(XHR.responseText);
} else {
obj.print_lyrics('獲取歌詞失敗');
}
} else {
obj.print_lyrics('歌詞搜索中');
}
}
 
XHR.open('GET', url, true);
XHR.send(null);
}

DoubanFM.prototype.deal_response = function(data) {
if (this.flag == 1) {
eval('var resp = ' + data);
if (resp.count > 0) {
this.ajax_get(resp.result[0].lrc);
this.flag++;
} else {
this.print_lyrics('沒有找到歌詞');
}
} else {
this.print_lyrics(this.format(data));
this.flag = 1;
}
}

DoubanFM.prototype.format = function(text) {
var s = text.replace(/\[(.*)\]/g, '').trim();//去除返回數據的[]兩端的內容，只保留歌詞部分
return s.replace(/\n/g, '\n<br />');//每行末尾輸出html的換行符
}

DoubanFM.prototype.print_lyrics = function(text) {
 this.lyrics.innerHTML =text; 
}
var fm = new DoubanFM(true);
window.setInterval(function() { fm.request_geci(); }, 1000);

有了以上這些其實功能就已經實現了，但我們還需要將它做成chrome擴展然後安裝在chrome瀏覽器裏，這樣以後就可以很方便的使用。
建立一個manifest.json文件，內容類似下面這樣：

{
"name" : "demo",
"version" : "1.0",
"manifest_version" : 2,
"description" : "用於豆瓣FM配歌詞",
 
"page_action" : {
"default_icon" : "icon.png",
"default_title" : "Douban FM"
},
"permissions" : ["tabs", "http://douban.fm/", "http://*.geci.me/*"],
"content_scripts" : [{
"matches" : ["http://douban.fm/"],
"js" : ["demo.js"],
"runat" : "document_end"
}],
"icons" : {
"48" : "icon-48.png",
"128" : "icon-128.png"
}
}

然後你在找三張你喜歡的圖片分別命名爲icon.png,icon-48.png以及icon-128.png，當然這些名字你是可以任意的，只是要個上面文件裏的名字對應。
最後在開發者工具裏的擴展應用裏打包你的代碼，就會獲得兩個文件：

第一個是作爲你程序的簽名，在你插件以後升級的時候使用，後一個就是安裝文件，直接將其拖入chrome瀏覽器即可安裝成功，如下圖：

所有工作已完成，你可以享受自己的歌詞插件了。