総合 ゲーム 画像動画

Tampermonkey Greasemonkey の使い方 userscriptの書き方

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

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

 


 

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

 

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

 

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


 

  1. Tampermonkey、Greasemonkeyを導入しよう。
  2. UserScriptの書き方を知ろう。

 

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が書けるように構成しています。

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

この記事へのコメント

  1. 名前:名無しさん 2018/01/01(月) 02:19:43返信する

    Chromeのtampermonkeyについて質問なのですが、Win7の場合、導入したユーザースクリプトはどこかに保存されているのでしょうか? 

    • 名前:hyper_T 2018/01/01(月) 03:06:49返信する

      Tampermonkeyのスクリプトはブラウザが管理するストレージに保管されています。
      アドオンからしか操作することができず、保存場所なども分かりません。

      スクリプトをバックアップするには、各スクリプトのエディター画面の左上(保存の隣)に「ディスクに保存」というボタンがあるので、
      そちらから好きな場所に保存することができます。
      まとめてスクリプトを保存する場合はユーティリティタブからファイルをエクスポートしてください。

      質問の内容を取り違えていたらごめんなさい

  2. 名前:名無しさん 2018/01/01(月) 09:42:50返信する

    早速のご回答有り難う御座いました。
    正に求めていた情報でした! と言いますのも、先日ブラウザの調子が悪く(何をやっても反応せず、起動できなくなる)、Chromeの最新バージョンを再インストールした際に導入していたユーザースクリプトが全て一覧から消えてしまい途方に暮れていた所でした(泣)。 度々の質問で恐縮ですが「ディスクに保存」「エクスポート」していない場合復旧は可能でしょうか?

    • 名前:hyper_T 2018/01/01(月) 10:40:49返信する

      スクリプトリストが空になっている場合、
      「ストレージを読み込めていないバグ」と「ストレージにスクリプトが無い場合」があるようです。
      前者はデバッグで読み込める可能性がありますが、後者は復元は出来ません。

      再インストールが通常の更新で、Tampermonkeyの拡張機能も残っている場合は望みがあるかもしれません。
       
      一度Chromeをアンインストールした場合と、Tampermonkeyの拡張機能が残っていなかった場合は復元できないと思います。

  3. 名前:名無しさん 2018/01/01(月) 11:01:51返信する

    迅速で分かりやすいご回答、有難う御座いました。
    やはり、現状復元は難しそうですね(泣)。痛すぎる教訓では有りますがこれを機にバックアップを取るように心がけたいと思います。
    重ね重ね有難う御座いましたm(_ _)m。

コメントを残す。

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。