Hatena::ブログ(Diary)

shouhの日記

2015-10-11

Greasemonkeyで実行するページのconsole.logを消したい

Greasemonkey を使うと、特定ページ上で指定スクリプトを実行できるが、このページが console.log を多用するページだった場合、デバッグが困難になる。なので console.log に表示されないようにできないのか調べてみた。

How to read from Chrome's console in JavaScript
http://stackoverflow.com/questions/19846078/how-to-read-from-chromes-console-in-javascript

結論

たとえば、単に console.log に表示されないようにするには、こんな感じにする。

// console.logを空関数に書き換え, 表示させないようにする.
// 自分で出したい場合は c 関数を使う.
var c = console.log;
console.log = function(){}

おまけとして、実行するページが console.log に書き込む内容を取りたい場合には、以下のようにする。

// console.log の内容が store にどんどん入っていく。
var store = [];
var oldf = console.log;
console.log = function(){
   store.push(arguments);
   oldf.apply(console, arguments);
}

ただ一つ注意したいのは、上記処理が実行されるタイミングだろう。当然ながら、上記処理が実行された後ではないと console.log の挙動は変更されない。理想は、何よりも最初に上記処理を実行することだろうが、そう単純にもいかない(JavaScriptはまだまだ勉強中なので詳しいことは知りません)。

とはいえ、ユーザスクリプトのグローバル空間中に記載しておけば、粗方問題無いタイミングで実行されると思う。

Greasemonkeyの使い方メモ in Windows

本記事について

Greasemonkey の使い方やノウハウを雑多にメモしている。あくまで Greasemonkey に焦点を当てたものであり、JavascriptjQueryFirefoxFirebug 等の解説は割愛している。あと、OSWindows のみ想定。

Greasemonkeyとは

指定ページに対して指定Javascriptを実行するFirefoxアドオン。これを使うと、たとえば「このブログはこのサイドバーが重たいから非表示にしてしまおう」といったことができる。

ユーザスクリプト適用するまでの手順(一般化)

まずは Greasemonkey を有効にしておく。

続いて「ユーザスクリプトを実行したいページ」を開いた後、ツールメニュー > Greasemonkey > ユーザスクリプト新規作成 を開く。すると新規作成画面が開くので必要な設定を記入する。なお、最低限編集が必要な項目には(!)を付けた。

OKボタンを押すと (名前).user.js という javascript ファイルが開かれるので、これを編集する。

編集して保存後、ページをリロードすると、編集したスクリプトが実行される

ユーザスクリプト適用するまでの手順(具体例)

ここでは Google トップページのロゴとボタンを消すスクリプトを作ってみる。

まずは Google のトップページを開く。
https://www.google.co.jp/webhp?hl=ja

ユーザスクリプトを新規し、必要な項目を入力。すると、開かれた javascript ファイルはこんな感じになっているはず。

// ==UserScript==
// @name        hide_google_logo
// @namespace   hide_google_logo
// @include     https://www.google.co.jp/webhp?hl=ja
// @version     1
// @grant       none
// ==/UserScript==

続いてこれを以下のように編集する。

// ==UserScript==
// @name        hide_google_logo
// @namespace   hide_google_logo
// @include     https://www.google.co.jp/webhp?hl=ja
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
// @version     1
// @grant       none
// ==/UserScript==

$(function(){
	$("#hplogo").remove();
	$("input").remove();
});

追加したのは二点。

  • @require にて jQueryインポートしている。こうすれば jQuery が使えるようになる
    • jQuery のバージョンが新しすぎると動かないかもしれない
  • $(function(){...} にて、ページロード後の動作を書いている。ここではロゴとボタンを消すコードを書いた

完了したら、Greasemonkey を有効にした上で、Google のトップページをリロードする。すると、ロゴとボタンが消えるはず。

ユーザスクリプトの在り処

以下のディレクトリに存在する。

%appdata%\Mozilla\Firefox\Profiles\(プロファイル名)\gm_scripts


このフォルダ直下に「名前空間名」のフォルダがずらっと並んでおり、各フォルダの直下に (スクリプト名).user.js というユーザスクリプトがある。この他、@require で取り込んだファイルもコピーされていたりする。

なお、ここにフォルダとファイルを準備しても、Greasemonkey は認識してくれない。おそらく config.xml の中身を編集した後、Firefox再起動すれば良いのだろうが、試してないのでわからない。

@includeについてのメモ

@include は「実行するページ」を指定する行である。

ワイルドカードを使うことができる。

@include http://www.data.go.jp/data/*


@include に file:// プロトコルは使えない。