User Script

tomorrow.cyz@gmail.com

?

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

一、什么是user script

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

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

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

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

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

二、user??script的書寫

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

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

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

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

?

?

?

??????????在上圖中點擊”try google”，轉向google搜索。搜索結果如下圖，紅色標注鏈接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關鍵字相反，還有@exclude關鍵字，過濾掉一些網站。

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

??????http://userscripts.org??這個網站提供了大量的user script供大家免費下載學習，還可以在論壇提腳本申請。

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

?

?

參考

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）

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。