Tampermonkey Greasemonkey の使い方 userscriptの書き方

TampermonkeyとGreasemonkeyの使い方とUserScriptの書き方を解説します。

これらのアドオンを使うことによりウェブページの見た目を自由に変更することができます。userscriptを自分で思い通りに作れるようになれば、ネットサーフィンの効率が飛躍的に上がります。

UserScriptを使ったプログラミング例を少しだけ紹介します。

例1.グーグルにツイート検索機能を付ける。

例2.DMMのサムネイル表示を見やすくする。

Tampermonkey、Greasemonkeyを導入しよう。

どちらを使っても構いません。スクリプトには互換性がありどちらにも移植可能です。

今回はTampermonkeyの操作法だけを解説します。

UserScriptの書き方はどちらでも全く同じです。まずはアドオンをインストールします。

Tampermonkey

Chrome用、Firefox用、Edge用

Greasemonkey

http://www.greasespot.net/

インストールしたら各ブラウザの拡張機能（アドオン）のオプション（設定）からダッシュボードを開きましょう。ツールバーにアイコンがある場合はそちらから。

ダッシュボードではUserScriptの管理が行えます。

インストール（作成）したスクリプトの設定からスクリプトを実行しないページを設定することができます。便利なので覚えておいてください。

UserScriptの書き方を知ろう。

スクリプトを新規追加をするとあらかじめコードが書かれています。

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();

変更する場所だけ見ていきます。

@name　このUserScriptの名前

@match　スクリプトを実行するページを指定します。例えばhttps://google.co.jpにスクリプトを実行したい場合はそのまま、google.co.jpというドメインのページ全てに適用したい場合は*アスタリスクを使います。

// @match     https://google.co.jp
// @match     https://google.co.jp/*　*は「なんでもよい」という意味

@require　外部ライブラリを指定します。主にjQueryを使うときに設定します。

// @require     https://code.jquery.com/jquery-1.12.4.js

// ==/UserScript== これより下にscriptを書いていきます。

言語はJavaScriptです。イメージはhtmlコードにUserScript.jsを読み込ませる感じです。

htmlは@match URLで指定したページです。1つサンプルコードを書いておきます。

// ==UserScript==
// @name        google
// @namespace   test
// @version     1
// @include     https://www.google.co.jp/
// @grant       none
// ==/UserScript==
window.onload = function(){
    console.log("UserScript test");
    alert("UserScriptが有効です。")
}

新規作成時に書かれているコードを消して、上記のコードを丸ごとコピペして保存してからグーグルのトップページに行くとスクリプトが実行されます。

https://www.google.co.jp/

Tampermonkey、GreasemonkeyでUserScriptが使えるようになったので身につけたJavaScriptの知識を思う存分発揮してやりましょう！

肝心のJavaScriptの書き方が分からねえ！

ゼロからはじめるプログラミングからこのページへ来てない方、JavaScriptでコードが書けない方はゼロからはじめるプログラミングを見てください。

JavaScript実践編まで学習が終わった時点でUserScriptが書けるように構成しています。

プログラミングは面白いので遊びのつもりで触れてみましょう！