Ползвали ли сте 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); |
// ==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');
}
}
} |
// ==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";
} |
// ==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'; |
// ==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';
}
} |
// ==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