Grease Monkey

FireFox

JavaScript

Greasemonkeyの記述方法

Greasemonkeyのための宣言

// ==UserScript==
// @name           ig_header_hidden
// @namespace      ig_header_hidden
// @include        http://www.google.co.jp/ig*
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js
// ==/UserScript==

• @name : 名前空間を指定する
• @namespace :
• @include : 適応するページを指定する
• @require : 外部スクリプトを読み込む

無名関数でくくる

変数やオブジェクトが他のグリモンと干渉しないように無毎関数内に記述する。

(function(){
  //ここに記述
})();

jQueryを使うときの注意

jQuery.attrが使えない

Greasemonkeyを配布する方法

******.user.jsのようなファイル名でjsファイルをサーバーにアップする

******.user.jsファイルにリンクするaタグをつくる

FireFoxでそのaタグをクリックすればインストールの準備が始まる

インストールしたGreasemonkeyは以下の場所に保存される

C:\Users\xxxx\AppData\Roaming\Mozilla\Firefox\Profiles\yyyyyy.default\gm_scripts

外部スクリプトを呼び出し、実行するグリモン

例：jqueryを呼び出す

今は@requireから呼び出すことができる

(GM_xmlhttpRequestで取得したテキストをそのままeval関数で実行している)

(function(){
var func = function(obj){
  eval(obj.responseText);

  //以下、jquery記法で書くことができる
  //$('body').prepend('a');
};

GM_xmlhttpRequest({ method:"get", 
url:"http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js",
onload:func});

})();

iGoogleの記事一覧にはてブuserを表示するグリモン

(function(){
var func = function(obj){
  eval(obj.responseText);
  
  $('div.uftl a').each(function(){
    var href = $(this).attr('href');
    $(this).append('<img src="http://b.st-hatena.com/entry/img/'+href+'>');
  });
};

GM_xmlhttpRequest({ method:"get", 
url:"http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js",
onload:func});
})();

iGoogleの検索フォームを非表示にするグリモン

ヘッダをクリックすることで表示・非表示を切り替えるトリックをいれてみた

// ==UserScript==
// @name           ig_header_hidden
// @namespace      ig_header_hidden
// @include        http://www.google.co.jp/ig*
// ==/UserScript==


(function(){

  function show(ele){
    ele.style.display = 'block';
  }
  function hide(ele){
    ele.style.display = 'none';
  }

  function show_header(){
    header.style.height = '180px';
  }
  function hide_header(){
    header.style.height = '0px';
    header.style.overflow = 'hidden';
  }

  function toggle(ele){
    var n = ele.getAttribute("flag");
    if(!n){
      n = 0;
    }
    n = n ^ 1;
    ele.setAttribute("flag", n);
    if(n == 1){
      show(ele);
    } else {
      hide(ele);
    }

    if(ele.getAttribute("id") == 'nhdrwrap'){
      if(n == 1){
        show_header(ele);
      } else {
        hide_header(ele);
      }
    }

  }

  var ebody  = document.body;
  var bar    = document.getElementById('gbar');
  var guser    = document.getElementById('guser');
  var header = document.getElementById('nhdrwrap');
F  var footer = document.getElementById('footerwrap');
  var tab    = document.getElementById('col1_contents');
  var chat    = document.getElementById('enable_chat');

  hide(header);
  hide(footer);
  guser.addEventListener('click', function(){toggle(tab);}, false);
  tab.addEventListener('dblclick', function(){hide(tab);}, false);
  tab.addEventListener('dblclick', function(){show(header);}, false);
  chat.addEventListener('click', function(){hide(tab);}, false);


})();

googleの検索結果に「すごい」を追記するグリモン

googleの検索結果に「夜の」を追記するグリモン

  $('a.l').each(function(){
    var text = $(this).text();
    $(this).text('すごい' + text);
  });

AutoPagerizeをカスタマイズするグリモン

42行目あたりの「var SITEINFO = [」以下にXPathを追記する

ツール→Greasemonkey→ユーザスクリプトの管理→「AutoPagerize」を選択→編集

//メディアマーカーのメディア登録ページ
    {
        url:          'http://mediamarker.net/u/(.*)/search(.*)',
        nextLink:     '//div[@class="navi_search"]/a[last()]',
        pageElement:  '//table[@class="search"]',
        exampleUrl:   'http://mediamarker.net/u/tacshiss/search',
    },
    {
        url:          'http://mediamarker.net/tag/(.*)',
        nextLink:     '//div[@class="more_link"]/a',
        pageElement:  '//div[@class="index_data"]',
        exampleUrl:   'http://mediamarker.net/tag/IT',
    },
//twitterのフォロワー一覧
//※ただし、呼び出し先ページのajaxボタンは使えない
    {
        url:          'http://twitter.com/followers(.*)',
        nextLink:     '//div[@id="pagination"]/a[@rel="me next"]',
        pageElement:  '//div[@class="follow-expanded"]',
        exampleUrl:   'http://twitter.com/followers',
    },

Stylish

GreaseMonkeyではないが、ユーザースタイルシートによって見た目を変更することができる

iGoogleをよりシンプルに (検索窓はブラウザ利用を想定)

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("google.co.jp"),domain("google.com") {

  #guser{
    color:#ffffff !important;
  }

  #nhdrwrap,
  #footerwrap{
    display:none !important;
  }
}