[1.  很長的簡介]

Tampermonkey 是瀏覽器的擴充程式,可以直接在網頁上執行javascript。

詳細的介紹可以參考這個網址: Link ,目前網路上能查到的資料還不太多...大多都只有說這個程式很好用之類的。

-

當初會看到這個工具是因為工作上的需要,要在某些網頁上處理許多重複又複雜的事情,常常花許多時間又容易出錯....

所以想說是否有自動化程式能夠加速作業,並增加精準度。

-

我部落格也有寫爬蟲程式,也可以用來自動化處理。

但這些程式都要另外裝測試軟體(比如Chrome 就需要裝 ChromDriver),而有時ChromDriver顯示的網頁資訊會跟Chrome不一樣,造成我工作上處理數據的錯誤。

總之,最後上網查詢,就查到了這款 Tampermonkey 的程式,他就是可以寫javascript 直接讓瀏覽器(如 chrome 、firefox、IE)去運行。

-

[2. 下載部分]

下載安裝教學可以參考: Link

順帶一提,這個影片應該是我看過介紹游猴最清楚的影片了,大家也可以參考一下,裡面說到可以去網路上下載許多別人寫好的腳本,讓使用網站更方便。

-

[3. 重點來囉~]

不過今天的重點是想要教大家如何自己寫所需要的腳本程式(哈,其實我只是想記錄一下自己如何寫的),所以我就直接教大家一些游猴撰寫的重點吧。

 

1.打開游猴的頁面(觀看下面影片)

2. 在 ==UserScript==的 match中,填寫你要執行javascript的網頁,並在下方(function(){})()中填寫你要執行的javascript 程式

image

[4. 重點還沒完]

接下來想要紀錄一下,如何讓網站中的checkbox打勾、還有按一鍵直接複製表格: 請看以下影片展示

 

以下是程式碼的幾個重點部分(看不懂可以直接貼到記事本上看):

1.  得到物件的Xpath

function getElementByXpath(path)
 {
  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

 

2. checkbox 打勾

//在設定chkk陣列,在其中存入所有checkbox的Xpath
var chkk=["//*[@id=\"form\"]/input[3]","//*[@id=\"form\"]/input[4]","//*[@id=\"form\"]/input[5]","//*[@id=\"form\"]/input[6]","//*[@id=\"form\"]/input[8]","//*[@id=\"form\"]/input[9]"];
var chk=getElementByXpath(chkk[0]);
    chk.checked=true;

3. 鍵盤事件,當輸入Enter(keyCode=13)時,顯示警告

//1 在主程式裡加入偵測鍵盤事件的語法
////////////////////////////////////
(
    function()
 {
   document.onkeydown=keyFunction;
 }
)();


//2加入keyFunction函式,當偵測到使用者輸入enter時,彈出警告
////////////////////////////////////
function keyFunction()
{
    if (event.keyCode==13)
    {
    alert("已複製");
    }
}

 

4. 取得要複製之表格的xpath,後複製起來(之後可以直接貼上)

//1 取得table的xpath
//////////
var table = getElementByXpath("//*[@id=\"churchlife\"]");

//2 將其選取並複製
//////////
    var range = document.createRange();
    range.selectNode(table);
    window.getSelection().addRange(range);
    document.execCommand('copy');

 

[5. 完整程式碼]

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        這裡請填入你要的網址,並就著你需要的功能去修改以下程式
// @grant        none
// ==/UserScript==
 
//得到Xpath
/////
function getElementByXpath(path) {
  return document.evaluate(pathdocumentnullXPathResult.FIRST_ORDERED_NODE_TYPEnull).singleNodeValue;
}
 
//等待
/////
function wait(ms){
   var start = new Date().getTime();
   var end = start;
   while(end < start + ms) {
     end = new Date().getTime();
  }
}
 
//偵測按下
/////
function keyFunction()
{
    if (event.keyCode==13)
    {
    //複製表格
    var table = getElementByXpath("//*[@id=\"churchlife\"]");
    var range = document.createRange();
    range.selectNode(table);
    window.getSelection().addRange(range);
    document.execCommand('copy');
    alert("已複製");
    }
}
 
//主程式
/////
(
    function()
 {
   // 勾選需要的選項
    var chkk=["//*[@id=\"form\"]/input[3]","//*[@id=\"form\"]/input[4]","//*[@id=\"form\"]/input[5]","//*[@id=\"form\"]/input[6]","//*[@id=\"form\"]/input[8]","//*[@id=\"form\"]/input[9]"];
    for(var i=0;i<=5;i++)
   {
    var chk=getElementByXpath(chkk[i]);
    chk.checked=true;
   }
   document.onkeydown=keyFunction;
 }
)();

 

 

 

 

arrow
arrow
    創作者介紹
    創作者 charliech17 的頭像
    charliech17

    國全張的部落格

    charliech17 發表在 痞客邦 留言(0) 人氣()