User Script

tomorrow.cyz@gmail.com

?

摘要：本文講述瀏覽器技術(shù)中常用的user script。

一、什么是user script

User scripts或者稱userscripts，是用來在客戶端（瀏覽器或者代理服務(wù)器）對特定的網(wǎng)頁進(jìn)行修改的腳本，一般用來改變頁面的外觀或者增加修改功能。User scripts目前常見的是用javascript書寫的腳本。

最著名的user scripts是AdBlock，幫助用戶攔截廣告在內(nèi)的各種頁面元素，并使這些內(nèi)容不被下載或者顯示。

User scripts最早在Firefox上運(yùn)用（通過Greasemonkey擴(kuò)展），迄今為止，包括Chrome，Opera，IE，Safari等瀏覽器或內(nèi)置或通過插件，都對user script進(jìn)行的支持。詳細(xì)情況參見http://emulefans.com/userscript-on-various-browsers/。

Chrome對User Script的安裝最簡單，9.0以后的版本，只要user.js后綴的腳本直接拖到瀏覽器中，在右下角的選擇中，選允許，就成功安裝了腳本，通過工具à擴(kuò)展程序菜單，可以進(jìn)行插件的管理。

Firefox需要安裝Greasemonkey插件來支持user script，插件和user script的安裝參考http://diveintogreasemonkey.org/install/index.html。

二、user??script的書寫

書寫user script的前提是熟悉html和javascript。在學(xué)習(xí)user script時，Dive into Greasmonkey（http://diveintogreasemonkey.org/toc/）是一本很棒的教材，幾乎是手把手交。

下面以我寫的一個user script為例來簡單講述user script的書寫。

相信大家平常搜索引擎的使用概率都非常高，對于google和baidu這兩個搜索引擎，大家可能各有喜好，對于我來說，技術(shù)方面的問題，我偏向用google進(jìn)行搜索，但是有時候有些特定的搜索特別是中文搜索，貌似baidu的搜索結(jié)果也有優(yōu)于google的地方，所以我特別希望瀏覽器提供一個功能，就是我在進(jìn)行google搜索以后，如果不滿意搜索結(jié)果，可以直接點(diǎn)擊菜單進(jìn)行baidu搜索，不需要再輸入關(guān)鍵詞。同樣，在baidu搜索以后，如果沒有找到合適的結(jié)果，則直接點(diǎn)擊菜單進(jìn)行google搜索，同樣不需要輸入關(guān)鍵詞。以前我希望通過修改瀏覽器內(nèi)核來實(shí)現(xiàn)，自從發(fā)現(xiàn)了user script這個東東以后，我發(fā)現(xiàn)，用user script來實(shí)現(xiàn)這個，只需要幾句話，非常之簡單，不需要深入內(nèi)核。

先上一張圖，在baidu中搜索”user script”的截圖。

?

?

?

??????????在上圖中點(diǎn)擊”try google”，轉(zhuǎn)向google搜索。搜索結(jié)果如下圖，紅色標(biāo)注鏈接try baidu，可以直接嘗試搜索baidu。

?

?

?

?

??? 看了一天的diveintogreasemonkey,寫出了如下user script。

?????????

[javascript]?view plaincopy

//?==UserScript==??

//?@name?????????Try?another?Search?engine??

//?@author???????tomorrow.cyz@gmail.com??

//?@namespace????http://t.sina.com.cn/chenyuzhi??

//?@description??try?another?search?engine?when?you?perform?baidu/google?search??

//?@include??????http://www.baidu.com/s?*??

//?@include??????http://baidu.com/s?*??

//?@include??????http://www.google.com.hk/*??

//?@include??????http://google.com.hk/*??

//?==/UserScript==??

function?g_search_func()??

{??

?var?keywords=document.getElementById("kw");??

?window.location.href="http://www.google.com.hk/search?q="+keywords.value;??

}??

??

if?(document.location.href.indexOf('baidu.com')?!=?-1)??

{??

????var?tools?=?document.getElementById('tools');??

????if?(tools)?{??

????????tools.parentNode.removeChild(tools);??

????}??

????var?con?=?document.getElementById('mCon');??

????if?(con)?{??

????????con.parentNode.removeChild(con);??

????}??

????var?menus?=?document.getElementById('mMenu');??

????if?(menus)?{??

????????menus.parentNode.removeChild(menus);??

????}??

????var?allEle,?thisEle;??

????allEle?=?document.evaluate(??

????????"//*[@class='tools']",??

????????document,??

????????null,??

????????XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,??

????????null);??

????for?(var?i?=?0;?i?<?allEle.snapshotLength;?i++)?{??

????????thisEle?=?allEle.snapshotItem(i);??

????????thisEle.parentNode.removeChild(thisEle);??

????}??

????var?google_btn=document.createElement("input");??

????var?baidu_btn=document.getElementById("kw").nextSibling;??

????google_btn.setAttribute("type",?"button");??

????google_btn.setAttribute("name",?"gsearch");??

????google_btn.setAttribute("value",?"try?google");??

????google_btn.addEventListener('click',g_search_func,true);??

????google_btn.setAttribute("class","btn");??

????baidu_btn.parentNode.insertBefore(google_btn,baidu_btn.nextSibling);??

}??

else??

{??

????var?allEle,?thisEle;??

????allEle?=?document.evaluate(??

????"//input[@name='q']",??

????document,??

????null,??

????XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,??

????null);??

????for?(var?i?=?0;?i?<?allEle.snapshotLength;?i++)?{??

????thisEle?=?allEle.snapshotItem(i);??

????break;??

????}??

????var?keywords=thisEle.value;??

??????

????var?resultStats=document.getElementById('resultStats');??

????if(resultStats)??

????{??

????????var?baidu_link=document.createElement("div");??

????????baidu_link.innerHTML="<a??class=/"gl?nobr/"??style="/"?mce_style="/""color:#4373db/"?href="/"?mce_href="/""http://www.baidu.com/s?wd="?+keywords+?"/"><strong>try?baidu</strong></a>";??

????}??

}??

?

????

??????? 我是個javascript和html的菜鳥，所以這個user script，可想而知，寫得也不咋樣。但作為一個入門介紹的例子，將就著吧。

??????? user script的開始首先要有meta data。這是固定的格式，說明作者，user script的描述，這些信息在用戶安裝的時候可能會彈出來提示用戶。另外，@include很重要，表示這個user script適用的頁面。同@include關(guān)鍵字相反，還有@exclude關(guān)鍵字，過濾掉一些網(wǎng)站。

????? 推薦使用DOM inpector結(jié)合代碼來進(jìn)行學(xué)習(xí)分析。對于baidu的頁面來說，該腳本去掉了tools,mCom,mMenu等元素（也就是手寫，設(shè)為首頁等我認(rèn)為無用的鏈接，根據(jù)id識別），在這里用到的還都是javascript的語句。有時候baidu的頁面中tools沒有id，而是name屬性，這時候用到了XPath的功能，XPath在用戶腳本中非常重要，建議閱讀diveintogreasemonkey的4.6節(jié)（http://diveintogreasemonkey.org/patterns/match-attribute.html)以及xpath教程。baidu獲取關(guān)鍵字是通過getElementById，取value值，就是javascript語句，然后這里用到了一句window.location.href=來進(jìn)行跳轉(zhuǎn)。另外一個就是try google按鈕的加入，其實(shí)只要通過DOM inspector找到"百度一下“按鈕，然后用javascript實(shí)現(xiàn)出來，再調(diào)用insertBefore來插入生成的"try google”按鈕的節(jié)點(diǎn)就可以。對于google的頁面，生成的是link，所以更加簡單，自己閱讀代碼吧。

??????http://userscripts.org??這個網(wǎng)站提供了大量的user script供大家免費(fèi)下載學(xué)習(xí)，還可以在論壇提腳本申請。

?????????????

?

?

參考

1.???????UserScript(用戶腳本)在Firefox、Opera、IE678等不同瀏覽器上的使用（http://emulefans.com/userscript-on-various-browsers/）

2.?????????????Greasemonkey的wiki(http://zh.wikipedia.org/w/index.php?title=GreaseMonkey)

3.?????????????Greasemonkey教程（http://diveintogreasemonkey.org/toc/）

4.???????????????Opera的user script介紹（http://kb.operachina.com/node/184）

?

總結(jié)

以上是生活随笔為你收集整理的User Script浏览器用户自定义脚本userscripts的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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