Ползвали ли сте Greasemonkey? Това е една изключително готина добавка за Firefox (вече и за други браузери, в Chrome 4 си я има по подразбиране), която доста улеснява живота. Greasemonkey ви позволява да промените начина по който изглежда или се държи дадена Web-страница, благодарение на малки парченца javaScript код.
Greasemonkey може да се използва за персонализиране на редакторите във форумите. Как примерно да добавим бутончета към редактора за постове в Dbg:
– да прави цвета на селектирания текст в синьо, а текста удебелен
– да слага тагове за цитиран текст
Ей го скрипта:
// ==UserScript== // @name Add DBG Buttons // @namespace http://www.download.bg/* // @description Add DBG Buttons // @include // ==/UserScript== var BlueBtn = document.createElement('a'); BlueBtn.appendChild(document.createTextNode('Blue')); BlueBtn.setAttribute("onclick", "s('[color=blue][b]', '[/b][/color]', document.posting_form.message)"); BlueBtn.setAttribute("style", "color: blue; font-weight: bold; cursor:pointer; margin: 0 2px; background: #eeeedd; border: 1px solid #bbbbaa;"); var content=document.evaluate("//a[@class='rtbutton']", document, null, 9, null).singleNodeValue; content.parentNode.insertBefore(BlueBtn, content); var QuotBtn = document.createElement('a'); QuotBtn.appendChild(document.createTextNode('"quot"')); QuotBtn.setAttribute("onclick", "s('[q]', '[/q]', document.posting_form.message)"); QuotBtn.setAttribute("style", "color: black; font-weight: normal; cursor:pointer; margin: 0 2px; background: #eeeedd; border: 1px solid #bbbbaa;"); var content=document.evaluate("//a[@class='rtbutton']", document, null, 9, null).singleNodeValue; content.parentNode.insertBefore(QuotBtn, content); |
Много готино е, че Frefox поддържа XPath! За разлика от лайното Internet Explorer (трябва да се забрани със закон и всеки потребител да подписва договор, че никога, за нищо на света няма да използва IE, ам наистина НИКОГА!). А XPath яко улеснява писането на JavaScript и неимоверно съкращава кода.
Резултата може да се види на картинките по-долу.
Оригинална лента:
С добавените бутони:
Скрипта може да се изтегли от тук:
Добавяне на бутони към коментарите в DBG
======================================
Между другото Greasemonkey може да автоматизира и въвеждането на информация в специални сайтове, като например онлайн игрите. Има една онлайн игра Dimiva.com, където трябва да въртиш някакво зомбирано колело и междувременно ти излизат някакви зомбирани реклами, които трябва да познаваш за какво са и да кликаш на radio-бутони под тях. Изобщо зомбирана ситуация. Използвам я само за примерен скрипт, който да маркира автоматично radio-бутоните.
// ==UserScript== // @name Dimiva // @namespace https://www.dimiva.com/* // @description Dimiva advent script // @include // ==/UserScript== var items = { "24ins" : "Застрахователен", "0_7_wonders" : "Сладкарница", "0_svobodni_kvartiri" : "жилища под наем", "folio4cars" : "Затъмняване", "cube_fitness_club" : "Фитнес", "0_4by4" : "Off-Road", "0_qbi_group" : "Застрахователен", "0_maniq_varna" : "Дрехи втора упореба", "e4995150fc0a" : "Алмохадон" }; var images = document.getElementsByTagName('img'); for (var i=0; i<images.length; i++){ for(var index in items) { if (images[i].src.indexOf(index) != -1) { document.evaluate("//div[contains(@class,'banner-container')]/a/img[contains(@src,'" + index +"')]/../../div/label[contains(text(),'" + items[index] + "')]/input", document, null, 9, null).singleNodeValue.setAttribute('checked', 'checked'); } } } |
Спред картинката, която се зарежда, маркирам и съответния бутон. Картинките са с постоянни имена, което улеснява зомбираната ситуация.
И скрипта: dimiva.com – radio clicker
======================================
Ще покажа и още един пример, който обработва всички зададени тагове от дадена страница. Примерно искаме да сменим цвета на “син” на всички линкове в някой сайт. За да си спестя безмислено писане на код, отново ще използвам XPath.
// ==UserScript== // @name Blue Links // @namespace http://statcounter.com/ // @include http://statcounter.com/* // ==/UserScript== textNodes = document.evaluate("//a", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (var i=0;i<textNodes.snapshotLength;i++) { var node = textNodes.snapshotItem(i); node.style.color = "blue"; } |
======================================
На сайта на филмовата база данни IMDB има много интересни класации и рейтинги на филми. Но при отварянето на някои излиза досаден банер, който те призовава да станеш ProUser. Примерна страница:
https://pro.imdb.com/moviemeter/?d=tt_moviemeter_why
Това е смешно… и естествено е редно да го разкараме:
// ==UserScript== // @name imdb hide pro banner // @namespace none // @include http://pro.imdb.com/moviemeter/* // ==/UserScript== var snode = document.evaluate("//div[@id='pro_upsell_wrapper']", document, null, 9, null).singleNodeValue; snode.style.display = 'none'; |
След като приложихме скрипта, получаваме една нормална страница:
======================================
И още един скрипт за оналайн магазина SportsDirect, който скрива резултати с цена по-висока от избраната от нас. Примерно искаме да скрием всички стоки, които са с цена по-висока от 29 паунда.
// ==UserScript== // @name SportsDirect // @namespace http://www.sportsdirect.com/ // @include http://www.sportsdirect.com/* // ==/UserScript== var price_custom = 29; // Nad kakva cena da skriva rezultata textNodes = document.evaluate("//span[@class=\"sellingprice s-largered productPrice productHasRef\"]", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (var i=0;i<textNodes.snapshotLength;i++) { var nodeText = textNodes.snapshotItem(i).textContent.replace("£",""); var node = textNodes.snapshotItem(i) if(nodeText>=price_custom){ node.parentNode.parentNode.parentNode.parentNode.parentNode.style.visibility = 'hidden'; } } |
Файл за инсталиране: SportsDirect price filter
======================================
Малко полезни линкове:
https://userscripts.org/ – база данни с потребителски скриптове. Добро място за разучаване на кодирането с Greasemonkey.
https://wiki.greasespot.net/ – мястото от където е добре да започнем
document.evaluate – обяснение за опциите на document.evaluate
