带你制作百词斩单词表读写插件

       上篇博文简单的介绍了一下Chrome插件，今天就与大家分享一下我做的这款有实际意义的插件吧。

       做这款插件主要是用百词斩网站进行单词学习时，遇到的一点点闹心事儿。在单词表中不能听发音，也不能练习拼写，所以才忍无可忍的做了这么一款插件。自我感觉还是很不错的。

      先来看看效果吧：

（原网站格式）

（安装插件后，多了一个按钮）

（点击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"]
    }]
}

//修改css样式
function csschange(){
  $(".user-word-list-block").css("width","1000px");
  $(".w950").css("margin-left","175px");
}

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 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://baicizhan0.qiniudn.com/word_audios/+单词+.mp3

//生成音乐播放器
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);
}

       做出来以后，发现插件的确很不错，可以自由扩展，属于本地个性化设计，值得学习一下。

带你制作百词斩单词表读写插件,布布扣,bubuko.com

带你制作百词斩单词表读写插件

原文：http://blog.csdn.net/xiaoxian8023/article/details/24485087