帶你製做百詞斬單詞表讀寫插件

       上篇博文簡單的介紹了一下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"]
    }]
}

       最關鍵的就是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插件開發文檔。也參照了一些例子，感受很不錯。去這裏能夠下載到。

       作出來之後，發現插件的確很不錯，能夠自由擴展，屬於本地個性化設計，值得學習一下。

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。