We write cross-browser UserJS. Example # 3: TwitPic thumbnails

twitpic-thumbnails.user.js is added to the tweeter page with a preview of twitpic pictures. It works at least in Opera, Firefox Greasemonkey, Google Chrome and 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 adds CSS to the page. This function works only in Grizimanki, like all other functions with the GM_ prefix . For other browsers you need to define it:

  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);
     }
   }
 } 

Links to pictures look like this: http://twitpic.com/neliw . I check whether the links to 'http://twitpic.com/' begin and whether the class has a 'tweet-url' (if this check is not done, we will also grab the “from TwitPic ” links). Then I replace the text of the link to the preview of the picture. TwitPic has an API for this.

  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 + '" />';
   }
 } 

I give the bait, not the fish. Instead of TwitPic, it can be grab.by , and instead of tweets, comments on the frankfid . Fish yourself.