GreaseMonkeyを活用する (初級編)

今までは、提供されていたものを使うだけだったのですが、
JavaScript,jQuery周りの知識がついてきたのと、Webの仕事が増えてきたので、
GreaseMonkeyを使って、自分でスクリプトを書いてみる事にしました。

GreaseMonkeyも覚えられて、jQueryも使う事ができるようになって、
仕事も効率化。と、いいことづくめになりそうです。


インストールなどの説明は省き、使っているケースの紹介です。

ケース1 ：ログイン画面で、自動的にIDとパスを表示する

システム開発におけるテストとか、運用保守とかに使えそうです。
毎度入れるのが手間だったりするので、大助かり。

// ==UserScript==
// @name     IDを自動セットする処理
// @namespace  domain.com
// @description 任意の文字
// @include   対象のurl
// @version   2
// ==/UserScript==
  $("#txtloginID").val('loginid');
  $("#txtfPASSWORD").val('password');

jQueryで値をセットしているだけですね。簡単です。

ケース2：ボタン機能を追加することで機能拡張

// ==UserScript==
// @name     フィルタ機能の実装
// @namespace  domain.com
// @description 任意の文字
// @include   対象のurl
// @require   http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js

// @resource jQueryUICSS https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css
// @version   2
// ==/UserScript==

大事なのは、@requireを入れるところ。
jQuery対応していないサイトだったのですが、以下1文を入れるだけで
jQuery対応となります。CSSを読むには同じ要領で、@resourceを指定します


フィルタのボタンを入れる。(alertはダミーです

$(document).ready(function(){
  $('input[name=RE]').after('<input type="button" name="filter" value="フィルタ" onclick="alert(&apos;&apos;);">');
});

ケース3：カスタムCSS

var cssValue = ".custBtn{color:blue;background-color:lightgreen;margin:0 2px 0 2px;}";
var style = document.createElement('style');
style.textContent = cssValue;
document.getElementsByTagName('head')[0].appendChild(style);

あとは通常のjavasscript(jquery)で何とでもなりそうです。