Как стать автором
Обновить

Пишем кроссбраузерный UserJS. Пример №3: TwitPic thumbnails

Время на прочтение2 мин
Количество просмотров2K
Schwarzenegger: Buddy Bison and me in Washington @ Natl Park Trust event

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, а вместо твитов — комментарии на фрэндфиде. Рыбачте сами.
Теги:
Хабы:
+22
Комментарии6

Публикации

Истории

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн