Пишем кроссбраузерный UserJS. Пример №3: TwitPic thumbnails
twitpic-thumbnails.user.js добавляется на страницу твитера привью картинок с twitpic. Работает как минимум в Opera, Firefox Greasemonkey, Google Chrome и Safari GreaseKit.
// ==Userscript== // @name Twitpic thumbnails // @include http://twitter.com/* // ==/Userscript==
(function(){
if (typeof GM_addStyle == 'undefined') { /**
* Example: GM_addStyle('* {color:red}')
* @param {String} css
*/ function GM_addStyle(css) {
var head = document.getElementsByTagName('head')[0];
if (head) {
var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode(css));
head.appendChild(style);
}
}
}
GM_addStyle('.entry-content img {display:block; margin:.5em 0;}');
var links = document.links;
for (var i=0; i<links.length; i++) {
if (links[i].href.indexOf('http://twitpic.com/') == 0 && links[i].className.indexOf('tweet-url') > -1) {
var id = links[i].href.split("http://twitpic.com/")[1];
links[i].innerHTML = '<img src="http://twitpic.com/show/thumb/' + id +'"/>';
}
}
})();GM_addStyle добавляет на страницу CSS. Эта функция работает только в Гризиманки, как и все остальные функции с префиксом
GM_. Для остальных браузеров необходимо её определить:if (typeof GM_addStyle == 'undefined') { /**
* Example: GM_addStyle('* {color:red}')
* @param {String} css
*/
function GM_addStyle(css) {
var head = document.getElementsByTagName('head')[0];
if (head) {
var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode(css));
head.appendChild(style);
}
}
}Ссылки на картинки выглядят например так: http://twitpic.com/neliw. Я проверяю начинаются ли ссылки на 'http://twitpic.com/' и имеет ли класс 'tweet-url' (если эту проверку не делать то, мы прихватим ещё и ссылки «from TwitPic»). Потом заменяю текст ссылки на привью картинки. У TwitPic есть API для этого.
for (var i=0; i<links.length; i++) {
if (links[i].href.indexOf('http://twitpic.com/') == 0 && links[i].className.indexOf('tweet-url') > -1) {
var id = links[i].href.split("http://twitpic.com/")[1];
links[i].innerHTML = '<img src="http://twitpic.com/show/thumb/' + id +'"/>';
}
}Я даю удочку, а не рыбу. Вместо TwitPic может быть grab.by, а вместо твитов — комментарии на фрэндфиде. Рыбачте сами.
комментарии (6)