由http://blog.csdn.net/wusuopubupt/article/details/21083775得到的启发，在周末自己抽空也做了一个插件，也顺便补充一下po主的教程。
准备工作：正如http://blog.csdn.net/wusuopubupt/article/details/21083775提及，我们需要JavaScript开发基础，chrome插件开发基础，本人第一次开发chrome插件，所以首先恶补了一上午，再者我们还需要知道从哪里根据歌曲名和歌手名获取歌词，感谢po主给我们推荐了http://geci.me/api/lyric/，这个好用的接口，我们可以在url后加上‘歌曲名/歌手名’从而获得歌词的json信息。如下是http://geci.me/api/lyric/listen，得到的信息：
{
"count": 8,
"code": 0,
"result": [
{
"aid": 2574902,
"lrc": "http://s.geci.me/lrc/306/30660/3066099.lrc",
"song": "Listen",
"artist_id": 2762,
"sid": 3066099
},
{
"aid": 1814321,
"lrc": "http://s.geci.me/lrc/200/20048/2004871.lrc",
"song": "Listen",
"artist_id": 15735,
"sid": 2004871
},
{
"aid": 2741204,
"lrc": "http://s.geci.me/lrc/329/32975/3297582.lrc",
"song": "Listen",
"artist_id": 25266,
"sid": 3297582
},
{
"aid": 3232739,
"lrc": "http://s.geci.me/lrc/395/39566/3956629.lrc",
"song": "Listen",
"artist_id": 32473,
"sid": 3956629
},
{
"aid": 2922563,
"lrc": "http://s.geci.me/lrc/354/35450/3545085.lrc",
"song": "Listen",
"artist_id": 34747,
"sid": 3545085
},
{
"aid": 3003590,
"lrc": "http://s.geci.me/lrc/365/36514/3651490.lrc",
"song": "Listen",
"artist_id": 34747,
"sid": 3651490
},
{
"aid": 3182564,
"lrc": "http://s.geci.me/lrc/388/38895/3889558.lrc",
"song": "Listen",
"artist_id": 35285,
"sid": 3889558
},
{
"aid": 3131255,
"lrc": "http://s.geci.me/lrc/382/38223/3822392.lrc",
"song": "Listen",
"artist_id": 39213,
"sid": 3822392
}
]
}
好了，准备工作做好了，进入正题吧。我们这次是开发基于page_action的chrome插件，不知道的同学，可以上chrome插件开发文档看看。
以下是本项目的文件结构：
开发插件第一步是写manifest.json
{
"name": "Douban FM Lyric",
"version": "1.0",
"manifest_version": 2,
"description": "The lyric extension of the douban.fm",
"page_action": {
"default_icon": "img/icon.jpeg",
"default_title": "Dave‘s Douban FM lyric"
},
"background": {
"scripts": ["js/background.js"]
},
"content_scripts": [
{
"matches": ["http://douban.fm/*"],
"js": ["js/jquery-1.11.0.min.js", "js/lyrics.js"],
"runat": "document_end"
}
],
"permissions": [
"tabs", "http://douban.fm/*", "http://geci.me/api/lyric/*","http://*.geci.me/*"
]
}第二步，content_scripts,插件与豆瓣电台主要交互是在lyrics.js，以下所有代码都在lyrics.js里。
创建Song伪类，定义属性：
function Song(id, name, artist) {
this.id = id;
this.name = name;
this.artist = artist;
this.lyricUrl;
this.lyric = this.addLyric();
}Song.prototype.addLyric = function () {
var lyrics_div=document.createElement(‘div‘);//用document.createElement()方法可以创造新的节点
document.body.appendChild(lyrics_div);//用document.body.appendChild()方法把新的节点附加到到document中
lyrics_div.style.width = ‘900px‘;//下面几行是设置css
lyrics_div.style.backgroundColor = ‘#F00‘;
lyrics_div.style.zIndex = ‘42‘;
lyrics_div.style.position = ‘relative‘;
lyrics_div.style.margin = ‘200px auto 0‘;
lyrics_div.id = ‘lyricParent‘;
lyrics_div = $(‘<div id="myLyric" style="width: 490px;height: 280px;background-color: #9dd6c5;position: absolute;right: 0;overflow: auto;display: block;font-size: 14px;padding: 10px;"></div>‘)
$(‘div#lyricParent‘).append(lyrics_div);
return lyrics_div;
}Song.prototype.getLyricUrl = function () {
var withAritist = false;
if (this.name == undefined || this.name == null || this.name == ‘‘) return ‘‘;
var url = ‘http://geci.me/api/lyric/‘ + this.name;
if (!(this.artist == undefined || this.artist == null || this.artist == ‘‘)) {
url += ‘/‘ + this.artist;
withAritist = true;
}
this.ajaxLyricUrl(url, withAritist);
}
Song.prototype.ajaxLyricUrl = function (url, withAritist) {
var song = this;
$.ajax({
url: url,
method: ‘GET‘,
success: function (data) {
console.log(data);
var count = data.count;
console.log(count);
if (count > 0) {
song.lyricUrl = data.result[0].lrc;
song.getLyric();
} else {
if (withAritist) {
url = url.substring(0, url.lastIndexOf("/"));
song.ajaxLyricUrl(url, false);
} else
song.printLyric(‘找不到歌词‘);
}
},
error: function () {
return undefined;
}
})
}Song.prototype.getLyric = function () {
var url = this.lyricUrl;
var song = this;
$.ajax({
url: url,
method: ‘GET‘,
success: function (data) {
//将时间信息去掉，g全局符号，把所有匹配字符串替换
data = data.replace(/\[.*\]/g, ‘‘).trim();
data = data.replace(/\n/g, ‘\n<br>‘);
song.printLyric(data);
}
})
}Song.prototype.printLyric = function (text) {
this.lyric.html(text);
}var lastSongId = ‘‘, song;
$(document).ready(function () {
eval(‘var data=‘ + localStorage[‘bubbler_song_info‘]);
song = new Song(data.id, data.song_name, data.artist);
$("div#fm-channel-list").scroll(function () {
var offsetTop = $(this).scrollTop();
$("div#myLyric").scrollTop(offsetTop);
});
})window.setInterval(function () {
eval(‘var data=‘ + localStorage[‘bubbler_song_info‘]);
if (lastSongId != data.id) {
lastSongId = data.id;
song.setId(data.id);
song.setArtist(data.artist);
song.setName(data.song_name);
song.getLyricUrl();
}
}, 2000);
插件运行效果：
代码和打包后的插件下载地址：http://download.csdn.net/detail/xanxus46/7126773
插件安装：
首先打开扩展程序页面：
然后把下载压缩包里的douban lyric.crx拖到扩展程序的页面里安装，然后打开豆瓣就能看到效果了。
Chrome插件开发之制作豆瓣电台歌词,布布扣,bubuko.com
原文：http://blog.csdn.net/xanxus46/article/details/22689863
