FC2ブログ

ゴミ箱.net

汚物は消毒

GreasemonkeyとTampermonkeyでスクリプトが共用できない場合がある件

Greasemonkeyとその互換アドオンであるTampermonkeyではスクリプトが共通に使えるはずであるが、依存するライブラリの読み込み方の違いのために実際には片方で動くスクリプトがもう片方で動かない場合がある。

その一つの例が、jQueryを独自に拡張しているサイトにjQueryを使ったスクリプトを適用する場合である。

Greasemonkeyの現在のバージョン(4.2)では、スクリプトごとに変数のスコープを分離する仕組みがある。元のサイトで実行されたJavaScriptのスクリプトのグローバル変数は、Greasemonkeyのスクリプトからは見えない。そのため、たとえば元のサイトがjQueryを読み込んでいたとしても、jQueryの提供する$などの変数をGreasemonkeyのスクリプト内で使うことができない。
jQueryを使いたければ、Greasemonkeyのスクリプトにおいて
// @require     https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
のように記述してjQueryを読み込まねばならない。
一方Tampermonkeyの現在のバージョン(4.5.5660)では、Greasemonkeyのスクリプト内で普通にグローバル変数が使える。元のサイトがjQueryを使っていれば、Greasemonkeyのスクリプト内で@requireによってjQueryを読み込む必要は特にない。

従ってGreasemonkeyでもTampermonkeyでも使えるスクリプトを作成するには@requireが必須になるわけだが、Tampermonkeyのほうは@requireで読み込んだスクリプト内で定義されたグローバル変数を外に漏らしてしまうようなのだ。

通常はそれでも特に問題はないが、元のサイトがjQueryに独自の拡張を施していた場合、それが@requireによって上書きされて消えてしまうため、元のサイトのスクリプトが想定通りに動作しなくなる場合がある。
そしてその影響をもろに受けるのがTogetter。
togetterの特定ユーザのまとめを非表示にするスクリプトをGreasemonkeyで使えるようにするため
// @require     https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
を追加したところ、Tampermonkeyで動かなくなってしまった。

対策として
(function() {
jQuery.noConflict();
var $ = jQuery;
//ここに従来の処理が入る
})();
のようにスクリプトを書き換えた。
「jQuery.noConflict()」は、グローバル変数$を書き換えられる前の状態に戻す働きがある。これによって、Greasemonkeyスクリプトの@requireによって書き換えられたグローバル変数$を元に戻す。(グローバル変数jQueryは元に戻せないが、まああまり使われてはいないだろう。)
そして「var $ = jQuery;」は、関数内でのみ変数$を使えるようにする働きがある。
これらを無名関数でくるんでいるのは変数のスコープをこの内部だけにするための常套手段である。

これによって、とりあえずGreasemonkeyでもTampermonkeyでも動くようにスクリプトを修正することができた。
スポンサーサイト

PageTop

コメント


管理者にだけ表示を許可する
 

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

| | 2018-02-19(Mon)21:52 [編集]


貴方のTwitterのヘッダー明らかに著作権違反です。親告罪だから権利者にバレなきゃラッキーとして使っているのでしょうが、漫画村を批判する前にご自身を顧みたらいかがでしょうか?自分棚上げ論者の話など誰にもとどきませんし、無知をひけらかしてるようにしか見えませんよ?

| URL | 2018-02-19(Mon)22:08 [編集]