ENTEREAL

Greasemonkey (グレースモンキー)とは

Greasemonkeyとは、Google Chromeや、Firefoxなどの主要ブラウザに対応するアドオンで、各種WEBサイト上で任意のJavascriptを実行するためのアドオンです。
https://addons.mozilla.org/ja/firefox/addon/greasemonkey/

各種WEBサイト上でJavascriptを実行する事で、HTML要素や機能、CSSのスタイル等を自由にカスタマイズが出来ます。具体例としては、以下のような事が可能です。

• WEBサイト上の広告や不要要素を表示しなくする
• 使用端末の画面サイズに合わせて各要素のサイズを調整する
• WEBサイト内のデータを整形して表示する
• WEBサイト内の外部リンクを全て取り出す
• WEBサイト内の任意の単語にフリガナをつけたり、意味を表示するリンクを付ける

スクリプトの作り方

// ==UserScript==
// @name			Sample Script
// @namespace		https://entereal.co.jp
// @description	 This is a sample script by ENTEREAL LLP
// @include		 http://www.google.co.jp/*
// @include		 http://www.yahoo.co.jp/*
// @exclude		 http://www.bing.com/*
// ==/UserScript==

(function(){
// ここに処理を記載する
alert('Hello World!');
document.getElementById('lst-ib').value = "Edit by Sample Script";
})();

スクリプトファイル名

基本的には、スクリプト名.user.jsと名前を付け保存します。

@name

スクリプト名

@namespace

様々な開発者が自由に名前をつけたスクリプトを配布する際、名前が同じでも区別できるようにするためのサブ名(苗字のようなもの)。

@description

スクリプトの概要を説明する文章。処理には影響しない。

@include

スクリプトの実行対象のサイトURLを記載する。*(アスタリスク)等で正規表現する事が可能。
複数サイトを対象とする場合は、@includeとURLのペアを複数サイト分記載する。

@exclude

@includeの反対でスクリプトの実行対象外のサイトURLを記載する。

@require

外部のライブラリを読み込む場合は、URLを記載する。

@version

各スクリプトのバージョン管理番号等を記載する。

素のJavascript意外にも各種ライブラリを読み込んでプログラムを書く事が出来ます。下記はjQueryを読み込んでjQueryの書式で処理を書いた例です。

// ==UserScript==
// @name			Sample Script with jQuery
// @namespace	   https://entereal.co.jp
// @description	 This is a sample script by ENTEREAL LLP
// @include		 http://www.google.co.jp/*
// @require		 //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
// ==/UserScript==

(function($){
// ここに処理を記載する
alert('Hello World!');
$('#lst-ib').value("Edit by Sample Script");
})(jQuery);

実例集

1. GoogleのトップページにYahooへのリンクを追加する

// ==UserScript==
// @name			1_Add-a-yahoo-link-to-the-google
// @namespace	   https://entereal.co.jp
// @description	 This is a sample script by ENTEREAL LLP
// @include		 http://www.google.co.jp/*
// @require		 //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
// ==/UserScript==

(function($){
// ここに処理を記載する
var linkObj = $('a').attr('href', 'http://www.yahoo.co.jp/').html('Yahoo');
$('body').append(linkObj);
})(jQuery);

2. Google以外のWEBサイトの背景を黒に、文字を白に変更する

// ==UserScript==
// @name			2_Change-the-background-color-of-google
// @namespace	   https://entereal.co.jp
// @description	 This is a sample script by ENTEREAL LLP
// @include		 *
// @exclude		 http://www.google.co.jp/*
// @require		 //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
// ==/UserScript==

(function($){
// ここに処理を記載する
$('body').css('background-color', '#000');
$('body *').css('color', '#FFF');
})(jQuery);