Tampermonkey 1スクリプトで複数URLをURL毎に処理！

Tampermonkey

Tampermonkeyの1スクリプトで、複数URLをURLごとに処理する方法についてです！
Tampermonkeyは、指定のページで、自作のjavascriptを実行できちゃうChrome拡張です。

例えばA～Eの5個のサイトを登録したとして、

Aのときはこの処理
Bのときはこの処理

のように処理させることができます！

ソース
解説
参考
あとがき

ソース

// ==UserScript==
// @name         MultiPageSetting
// @namespace    https://www.lisz-works.com/
// @version      0.1
// @description  複数ページをページごとに処理
// @author       lis
// @match        https://togetter.com/li/*
// @match        https://www.google.co.jp/webhp*
// @grant        none
// @require
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
// ==/UserScript==

(function() {
    var url = window.location.href;
    console.log(url);

    if ( url.match(new RegExp(/www.google.co.jp\/webhp/)) != null ) {
        $("body").css("background", "#000");
    }
    else if ( url.match(new RegExp(/togetter.com/)) != null ) {
        $("body").css("background", "#00f");
    }
    //
})();

解説

それではロジックについて解説していきます。

@match

Tampermonkeyは「@match」に設定したURLに対して動作します。

いくら条件分岐を頑張って書いても、ココを逃していると、そもそもロジックが動きません。

ロジックを動かしたいページを、一通り登録しましょう！

「*」はワイルドカードなので、「以降は何でもいいよ」という意味合いになります。

なので

「https://www.google.co.jp/*」は

のいずれでも動作することになります。 ※このURLは適当です。

@require

このロジックではjQueryを使用しているので、jQueryをロードします。

// @require
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

を追加して、設定してください！

サンプル程度のものなら、そんなに複雑なことはしていないので、使わなくても良い気がします。
お好みで！

URLの取得

URLは

window.location.href

で取得できます。

ただ代入するだけ。

URLごとに分岐

「対象のURLか？」を判定するのには、正規表現のマッチを使っています。

参考

こちらを参考にしました。ありがとうございました！

qiita.com

あとがき

コレを使えば「何かの機能について」を1まとめにすることもできますね！

共通ロジックを使いたいけど、ココの部分はこのページだけにしたい……

みたいなときもコレで分岐できますね！

サンプルでも出してますが、この記事みたいにページの色変えたりできます。

lisz-works

プログラミングと興味を貴方に