Web — 好用的自訂外掛Tampermonkey

在以前 Firefox剛出來的年代，有一個很火紅的外掛，叫做Greasemonkey，他可以透過在事後植入javascript的方式，讓你去改變網頁的任何元素，在技術限制下就可以做到很多事情

譬如更改網頁的css，如果你不想讓人知道你在逛Facebook，把他改顏色改樣式，如果你覺得某個購物網站不方便，圖片都需要額外點選後才能放大，透過外掛就可以直接滑鼠移到上面後就自己變大

如此的行為，都可以透過事後的script來修改，非常的方便，當然要使用別人的script前也要注意安全性的問題，當然要套用jquery也是沒有問題的

而Chrome也有一套類似的外掛叫做Tampermonkey，基本上大同小異，不過方便在他可以透過 @ annotation來定義一些限制或者語法

而且也提供線上的版本直接讓你編輯，就像上圖這樣

譬如我經常要上架蝦皮，我想增加一些功能在蝦皮上，要怎麼做呢?先介紹上方的 Annotation

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://seller.shopee.tw/
// @grant           GM_xmlhttpRequest
// @grant           GM.xmlHttpRequest
// @require http://code.jquery.com/jquery-1.12.4.min.js
// ==/UserScript==

像這樣透過註解定義，可以讓你的script可以擁有 xmlHttpRequest的功能(通常會有Cross-site的問題)，然後透過require可以引入你想使用的library，譬如jQuery

那該怎麼從裡面抓取某個網頁資料呢?

GM.xmlHttpRequest({
            method: "GET",
            url: "https://www.url.com....",
            headers: {
                "User-Agent": "Mozilla/5.0",    // If not specified, navigator.userAgent will be used.
                "Accept": "text/xml"            // If not specified, browser defaults will be used.
            },
            onload: function(response) {
                var responseXML = null;
                var bodyHtml = $($.parseHTML( response.responseText ));
                var name = bodyHtml.find("div.title.global-primary.dark-primary").html() ;
                var price = bodyHtml.find("div.price-sale.price").html();
                var desc = bodyHtml.find("div.global-secondary.dark-secondary.description-container").text();
                var detail = bodyHtml.find("div#product-detail-media").html();
                console.log("name:"+name+",\nprice:"+price +",\ndesc:"+desc +"\n,detail:" +detail);
            }
        });

類似這樣的方式就可以抓取到某個網頁的標題內容等資訊進行運用

如何下載圖片到電腦中

加上定義

// @grant        GM_download

語法

var arg = { url: "https://url.com/5b305bfc8d1db9fea50011cd/xlarge.jpg",name: "CustomFileName.jpg"} ;
var result = GM_download(arg);

這樣非常方便，後面也可以加上callback處理下載進度

如何加上JQuery UI

加上定義

// @resource jQueryUICSS http://strd6.com/stuff/jqui/theme/ui.all.css

加上插入區塊語法

$("body").append("<link rel='stylesheet' type='text/css' href='https://code.jquery.com/ui/1.7.1/themes/base/jquery-ui.css'>");
$("body").append("<div id='dialog' title='WorldIBuy'><p>Here We go</p></div>");

如此透過JQuery Ui就可以叫出一個Dialog

$( "#dialog" ).dialog();

如何使用剪貼簿

記得要定義

// @grant GM_setClipboard

然後呼叫

GM_setClipboard(descriptionText);

就完成了

如何插入一個Button後進行click事件設定

如果直接設定onclick是不會work的，詳細原因還不知道

但可以透過on的方式去設定

function setupTitle(){
    title = $(".title.global-primary.dark-primary h1").html();
    var viewTitle = $("div.title.global-primary.dark-primary");
    viewTitle.html(buildButton('btnCopyTitle','複製標題'));
    viewTitle.parent().on("click", "#btnCopyTitle", function(){
        copyTitle();
    });
}

如何去Select一段特定的元件

$("div.variant-gallery.row div.variant-gallery-scroll-container div.variant-gallery-slider div.variant-image.ng-scope a div");

像這樣 div.variant-gallery.row 代表一個元件，接著child裡面有div.variant-gallery-scroll-container一直往下指定

如何把一段html element進行繼續找到元件？

如果你已經透過selector找到一段code

val headerDiv = $(“div#header”)

那如何繼續在header中找元素呢？

val msg = $(headerDiv).find("div.msg")

那如果是用each 怎麼去對每一個元素找呢？

$(“div.switch-list-content”).children().each(function(index, value){
   var div = `div${index}: ${value}`;
   var title = $(value).find(“div.item-title”).text();
   var msg = $(vaule).find(“div.item-msg”).text()
   console.log(title +”:”+ msgt);
 })

透過這樣就可以在已經找到的element繼續找