? ? ? ?上篇博文簡(jiǎn)單的介紹了一下Chrome插件，今天就與大家分享一下我做的這款有實(shí)際意義的插件吧。

? ? ? ?做這款插件主要是用百詞斬站點(diǎn)進(jìn)行單詞學(xué)習(xí)時(shí)，遇到的一點(diǎn)點(diǎn)鬧心事兒。在單詞表中不能聽發(fā)音。也不能練習(xí)拼寫。所以才忍無可忍的做了這么一款插件。自我感覺還是非常不錯(cuò)的。

? ? ? 先來看看效果吧：

（原站點(diǎn)格式）

（安裝插件后。多了一個(gè)button）

（點(diǎn)擊change model后的效果，可顯隱單詞，可聽發(fā)音。可檢測(cè)拼寫，看動(dòng)畫效果）

? ? ? ?做這個(gè)插件，主要應(yīng)用了content script與頁(yè)面進(jìn)行交互的。manifest.json內(nèi)容例如以下：

{"name": "百詞斬測(cè)試插件","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": "百詞斬測(cè)試插件。信息技術(shù)提高班 八期 龍軒出品","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"]}] }
? ? ? ?最關(guān)鍵的就是content_script節(jié)點(diǎn)，當(dāng)中全部的功能都是用js在后臺(tái)完畢的。而matches則是設(shè)置匹配模式，規(guī)定遇到哪些頁(yè)面會(huì)自己主動(dòng)運(yùn)行代碼。

其它的就比較簡(jiǎn)單了，直接寫jquery命令就可以，如改動(dòng)頁(yè)面寬度：

//改動(dòng)css樣式 function csschange(){$(".user-word-list-block").css("width","1000px");$(".w950").css("margin-left","175px"); }
? ? ? ?當(dāng)中有點(diǎn)難度的就是往頁(yè)面注入js代碼，我用jquery嘗試了N多次，都不能成功。插進(jìn)去的js都是文本狀態(tài)，不能運(yùn)行。

最終使用原生的js操作成功了，代碼例如以下：

function fun1(){//....} function fun2(){//....}//將js代碼增加到頁(yè)面的head節(jié)點(diǎn)中 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函數(shù) addscript("",fun1,"");//注入fun2函數(shù),并自啟動(dòng) addscript("(",fun2,")();");
? ? ? ?當(dāng)然也直接設(shè)置控件的事件為function的對(duì)象，當(dāng)然也須要用原生js寫：

function fun1(){//...}//往指定節(jié)點(diǎn)中加入a標(biāo)簽，并設(shè)置onclick對(duì)象 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的第一個(gè)元素中插入a標(biāo)簽，并設(shè)定onclick事件 addLable_A("Change Model",fun1,document.getElementsByClassName("btn-start-review")[0])
? ? ? ?加入這些都是小事兒。主要是分析單詞發(fā)音的網(wǎng)址。

因?yàn)槭诸^沒有可用的http抓包分析工具，所以點(diǎn)擊了n多次，然后用谷歌的開發(fā)工具挨個(gè)分析請(qǐng)求，并通過n多實(shí)驗(yàn)。最終能夠拿到全部的單詞具體記錄，包含解釋、音標(biāo)、例句、例句中單詞信息、圖片以及單詞和句子的音頻地址。

可是都拿到的話會(huì)花費(fèi)非常長(zhǎng)時(shí)間。只是看到單詞發(fā)音是有規(guī)律的，所以僅僅做了發(fā)音的鏈接。

音頻地址規(guī)則為：

http://baicizhan0.qiniudn.com/word_audios/+單詞+.mp3
? ? ? ?音頻地址能夠拼出來。可是卻沒有一個(gè)能夠播放的，在網(wǎng)上找了一些代碼，卻發(fā)現(xiàn)Chrome上不能播放，可是ie就沒有問題（提示有activex控件，可能須要media player才行）。可是百詞斬本身在chrome上是能夠播放的，所以經(jīng)過幾番周折，最終分析出它自己寫了一個(gè)soundmanager來完畢播放操作，我直接把newsoundmanager的方法那過來直接載入進(jìn)來就能夠用了，調(diào)用create創(chuàng)建。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";//創(chuàng)建音樂播放soundManager.createSound({id: 'word-audio-'+field,url:file,autoPlay: !1,autoLoad: !1}).play();//設(shè)置1秒后自己主動(dòng)銷毀音頻對(duì)象setTimeout(function(){soundManager.destroySound('word-audio'+field);},1000); }
? ? ? ?在制作的過程中，主要遇到了這么幾個(gè)小問題，主要借鑒了自稱非官方的文檔和360chrome插件開發(fā)文檔。也參照了一些樣例，感覺非常不錯(cuò)。去這里能夠下載到。

? ? ? ?做出來以后，發(fā)現(xiàn)插件的確非常不錯(cuò)，能夠自由擴(kuò)展，屬于本地個(gè)性化設(shè)計(jì)。值得學(xué)習(xí)一下。

轉(zhuǎn)載于:https://www.cnblogs.com/zfyouxi/p/5180358.html

總結(jié)

以上是生活随笔為你收集整理的带你制作百词斩单词表读写插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。