上篇博文简单的介绍了一下Chrome插件，今天就与大家分享一下我做的这款有实际意义的插件吧。
做这款插件主要是用百词斩站点进行单词学习时，遇到的一点点闹心事儿。在单词表中不能听发音。也不能练习拼写。所以才忍无可忍的做了这么一款插件。自我感觉还是非常不错的。
先来看看效果吧：
（原站点格式）
（安装插件后。多了一个button）
（点击change model后的效果，可显隐单词，可听发音。可检測拼写，看动画效果）
做这个插件，主要应用了content script与页面进行交互的。manifest.json内容例如以下：
{"name": "百词斩測试插件","version": "1.0.0.0","manifest_version": 2,"background": {"page": "background.html"},"permissions": ["http://*/"],"icons": {"16":"images/icon_16.png","128":"images/icon_128.png"},"description": "百词斩測试插件。信息技术提高班 八期 龙轩出品","content_scripts": [{"all_frames": true,"matches": ["http://www.baicizhan.com/user/words/list*"],"js": ["js/jquery-1.7.2.min.js","js/content_script.js","js/background.js"]}]
}最关键的就是content_script节点，当中全部的功能都是用js在后台完毕的。而matches则是设置匹配模式，规定遇到哪些页面会自己主动运行代码。
其它的就比較简单了，直接写jquery命令就可以，如改动页面宽度：
//改动css样式
function csschange(){$(".user-word-list-block").css("width","1000px");$(".w950").css("margin-left","175px");
}
当中有点难度的就是往页面注入js代码，我用jquery尝试了N多次，都不能成功。插进去的js都是文本状态，不能运行。
最终使用原生的js操作成功了，代码例如以下：
function fun1(){//....}
function fun2(){//....}//将js代码增加到页面的head节点中
function addscript(prefix,f,suffix){var script = document.createElement("script");script.type="text/javascript";script.innerHTML=prefix+eval(f)+suffix; document.head.appendChild(script);
}//注入fun1函数
addscript("",fun1,"");//注入fun2函数,并自启动
addscript("(",fun2,")();");当然也直接设置控件的事件为function的对象，当然也须要用原生js写：
function fun1(){//...}//往指定节点中加入a标签，并设置onclick对象
function addLable_A(name, fun,node) {var a = document.createElement("a");a.innerText = name;a.href="#";a.onclick = fun;node.appendChild(a);
}//向class为btn-start-review的第一个元素中插入a标签，并设定onclick事件
addLable_A("Change Model",fun1,document.getElementsByClassName("btn-start-review")[0])加入这些都是小事儿。主要是分析单词发音的网址。
因为手头没有可用的http抓包分析工具，所以点击了n多次，然后用谷歌的开发工具挨个分析请求，并通过n多实验。最终能够拿到全部的单词具体记录，包含解释、音标、例句、例句中单词信息、图片以及单词和句子的音频地址。
可是都拿到的话会花费非常长时间。只是看到单词发音是有规律的，所以仅仅做了发音的链接。
音频地址规则为：
http://baicizhan0.qiniudn.com/word_audios/+单词+.mp3音频地址能够拼出来。可是却没有一个能够播放的，在网上找了一些代码，却发现Chrome上不能播放，可是ie就没有问题（提示有activex控件，可能须要media player才行）。可是百词斩本身在chrome上是能够播放的，所以经过几番周折，最终分析出它自己写了一个soundmanager来完毕播放操作，我直接把newsoundmanager的方法那过来直接载入进来就能够用了，调用create创建。play播放，destroy销毁。代码例如以下：
//生成音乐播放器
function t() {1 != window.isSoundManagerLoading && 1 != window.isSoundManagerLoaded && (window.isSoundManagerLoading = !0, window.SM2_DEFER = !0, $.cachedScript("http://assets1.baicizhan.com/pack/soundmanager2-nodebug-jsmin.js").done(function() {window.soundManager = new SoundManager;var t = {url: "/sound_manager/",debugMode: !1,debugFlash: !1,useFlashBlock: !1,useHighPerformance: !0,noSWFCache: !0,onready: function() {window.isSoundManagerLoaded = !0, window.isSoundManagerLoading = !1}};navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad)/) && (t.preferFlash = !1), soundManager.setup(t), soundManager.beginDelayedInit()}))
}//播放单词读音
function wordvoiceplay(field){var file="http://baicizhan0.qiniudn.com/word_audios/"+field+".mp3";//创建音乐播放soundManager.createSound({id: 'word-audio-'+field,url:file,autoPlay: !1,autoLoad: !1}).play();//设置1秒后自己主动销毁音频对象setTimeout(function(){soundManager.destroySound('word-audio'+field);},1000);
}在制作的过程中，主要遇到了这么几个小问题，主要借鉴了自称非官方的文档和360chrome插件开发文档。也參照了一些样例，感觉非常不错。去这里能够下载到。
做出来以后，发现插件的确非常不错，能够自由扩展，属于本地个性化设计。值得学习一下。
