注入Script增加了一个GoogleTrack功能

    首先声明我不是对博客园搞破坏哦，而且我只修改我的blog嘛。很多时候你可能会想在Google里面搜索一下你的文章是否被别人转载了，如果每次都要把标题复制到Google里再搜，真是麻烦得要死。GoogleTrack就是会自动地把搜索连接生成，然后你只需要点击链接就可以跟踪你自己的文章的功能。

    本来这个脚本注入做的是比较的麻烦，因为博客园的文章在显示的时候会自动过滤掉里面<script> ... </script>，但是如果是<tag onclick="javascript: ..."></tag>这样的脚本却是可以被保留的。正好这个是必须保留的，否则动态折叠代码的功能就是使用不了了。以至我开始制作这个注入就是按不能使用<script>来做的，才搞得比较麻烦。

    如上所说，我使用HTML Object事件属性来内连代码。为了让代码自动执行，必须使用onload一类的属性，有onload属性的element还不少，看看觉得使用IMG是比较好的，于是使用<img onload="...">来作为代码注入的执行点起点。可是这个时候问题又来了，如果我引用的image装载的很快，那么它的onload很有可能比document的onload早执行，那个时候页面都没有装载完毕，注入很容易出错的说。

    所以在IMG的onload里是不能做真正的执行注入的逻辑的，而把注入的执行挂到document的onload事件上，因为<script>对象一但被append进文档就会load其src所指向的脚本文件。注入代码如下：

<img src="http://zhilee.aehk.com/Archive/Images/25.gif"
     style="width:0; height:0" onload="
function JudgeInject()
{
     var injected = false;
     var scripts = document.getElementsByTagName('SCRIPT');
     for ( var i=0 ; i < scripts.length ; ++i )
     {
         var script = scripts[i];
         var fileName = script.src;
         fileName = fileName.substr(fileName.lastIndexOf('/'));
         if ( fileName == '/GoogleTrack.js' )
         {
             injected = true;
             break;
         }
     }
     if ( !injected )
     {
         var __script__ = document.createElement('SCRIPT');
         document.body.appendChild(__script__);
         __script__.src = "http://zhilee.aehk.com/Archive/JScript/GoogleTrace.js";
     }
}
document.body.onload = JudgeInject;
">

    其实本来可以把文件都放在cnblogs的服务器上，那样效果会更好，因为服务器的传输速率就是一样的，会少些异步操作代来的问题，我有空再来移图片和代码了。

    脚本GoogleTrack.js是用来处理具体的注入逻辑的，它依赖于博客园文章的显示格式，然后都是一些DHTML的操作而以，没啥难的，代码如下(也可以直接用上面代码中的url下载)：

InjectComponents();

function InjectComponents()
{
     var imgPath = 'http://zhilee.aehk.com/Archive/Images/';
     var posts = document.getElementsByTagName('H5');
     var imgSrc = imgPath + 'GoogleTrack-s.gif';
     if ( !posts || posts.length == 0 )
     {
          posts = document.getElementsByTagName('H2');
          imgSrc = imgPath + 'GoogleTrack.gif';
     }
     for ( var i=0 ; i < posts.length ; ++i )
     {
          var post = posts[i];
          var innerLinks = post.getElementsByTagName('A');
          if ( innerLinks.length > 1 )
          {
              return;
          }  
          post.style.display = 'inline';
          var link = document.createElement('A');
          link.href = 'http://www.google.com/search?hl=zh-CN&q='
              + window.encodeURIComponent(post.innerText)
              + '&btnG=Google%E6%90%9C%E7%B4%A2&lr=';
          link.target = '_blank';
          var imgGoogle = new Image();
          imgGoogle.align = 'absmiddle';
          imgGoogle.title = 'Click me to search the title by google.';
          imgGoogle.src = imgSrc;
          link.appendChild(imgGoogle);
          link.onmouseover = function()
          {
               window.status = 'Google Track by birdshome';
               return true;
          };
          link.onmouseout = function()
          {
               window.status = '';
          };
          post.insertAdjacentElement('afterEnd', link);
     }
}

    怎么用?! 对了，怎么用呢？把第一段代码加到Configure的"公告"里就行了:) 我都做完后我才发现，公告里面是支持<script> ... </script>，早知道我就不这么折腾了，代码都放公告里就的了。

   页面注入GoogleTrack后的效果： 

  
    enjoy it!

    警告：如果用此方法破坏首页的显示，那就请dudu好不手软@$#%&(*掉他！！！