Веб-разработка Голосов: 0 Адрес блога: http://dayte2.com/ Добавлен: 2011-06-30 15:18:48 блограйдером ifman

Пользовательские JavaScript и Greasemonkey

2011-06-24 12:49:57 (читать в оригинале)

Я ленивый программист. И считаю это достоинством. Лень помогает мне не писать лишнего кода, оптимизировать его, делать переносимым, использовать чужие наработки. А еще лень помогает учиться.

Вот сейчас мне стало лень и я освоил написание пользовательских скриптов для Greasemonkey.

О такой возможности я знал давно. Вообще я считаю что в программировании нельзя быть дока. Потому что слишком много подобластей и нюансов. Нужно просто представлять что возможно, какие технологии есть и где про них прочитать если потребуется. Все остальное — дело техники.

Что такое пользовательские скрипты и зачем они нужны

Я когда-то давно узнал что можно встраивать некий JavaScript прямо в браузер. Можно говорить ему: друг мой, выполни пожалуйста вот этот нехитрый скрипт когда я захожу на этот сайт и он будет это делать. Пользовательским этот скрипт называется потому что хранится он не на сервере, а прямо у клиента на компьютере. То есть, это ваш собственный скрипт, который доступен только вам.

Пользовательские скрипты реализуются некоторыми браузерами на нативном уровне, кажется. Вроде Опера это умеет, например. Но народную любовь снискал Greasemonkey — плагин для браузеров, который как раз позволяет выполнять пользовательские скрипты.

Мне это все было как-то без надобности. Ну что можно сделать жабаскриптом? Обычно это все касается изменения внешнего вида страницы. Убрать колонку, изменить размер чего-нибудь, показать что скрыто или наоборот. Так вот, мне это все было не нужно. А теперь у меня есть блог о футболках, куда я часто постю картинки с сервиса printdirect.

Процесс постинга картинки выглядит так:

• Я захожу на страницу товара
• Кликаю по изображению
• Кликаю по большой картинке правой кнопкой, выбираю "Копировать ссылку на изображение".
• Иду в редактор поста на tshirt-fan.ru и вставляю ссылку на изображение в поле вставки изображения визуального редактора.
• Заполняю поля alt и title картинки в том же редакторе
• Перехожу во вкладку "Положение" и в выпадающем меню "Класс" ставлю fcenter (это CSS класс для центрования картинки)
• Затем перехожу снова на страницу товара, выделяю адрес страницы
• Перехожу в редактор, выделяю изображение, нажимаю на "установить ссылку"
• В поле "Адрес" я ввожу скопированный адрес товара.
• Заменяю в этом адресе http:// на /go/ чтобы ссылка была внутренней и чтобы при переходе добавлялся партнерский код.

Вот столько всяких действий чтобы вставить ОДНУ картинку с ссылкой. Это очень, очень утомительно.

Поэтому я решил автоматизировать этот процесс. Потому что я ленивый программист.

Я взялся за изучение Greasemonkey. Оказалось, что там все не просто, а очень просто. По сути, это просто JS код, который снабжен парой служебных директив.

Greasemonkey скрипт для tshirt-fan.ru

Вдохновившись, я сразу захотел использовать jQuery. Лень мне писать на чистом JavaScript, видите ли. Хотя задача простая, если честно. Короче, я нашел как подключать jQuery к Greasemonkey и заюзал этот код. Он загружает jQuery с хостинга гугла. Обычно я загружаю с хостинга Яндекса, но какая разница?

Теперь надо было только написать сам скрипт. Все оказалось просто.

// Весь Greasemonkey код ниже
function letsJQuery() {
	var full = $('#full_img_front').attr('src'); //хватаем адрес большой картинки
	if(full)	{  //если он есть — мы на нужной странице
		var url = location.href; //берем адрес страницы
		url = url.replace('http://', '/go/'); //изменяем его
		var text = $('h1.main').html(); //берем имя товара
		//формируем код для отображения
		var code = '<br style="clear:both;"><textarea style="clear:both;height:200px;width:300px;">';
		code+='<a href="'+url+'"><img src="'+full+'" alt="'+text+'" title="'+text+'"/></a></textarea>';
		$('div.images').append(code); //показываем его
	}
}  

Теперь страница товара у меня выглядит так:

Мне остается только скопировать этот код и вставить его в пост. Очень упрощает работу, скажу я вам. Удачной автоматизации!