lisz-works

技術と興味の集合体

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/*」は

  1. https://www.google.co.jp/aaaaa
  2. https://www.google.co.jp/bbbbb
  3. https://www.google.co.jp/ccccc
  4. 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まとめにすることもできますね!

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

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

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

www.lisz-works.com