lisz-works

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

Chrome拡張「Tampermonkey」で閲覧ウェブサイトをカスタマイズ!

【スポンサーリンク】

Chrome ロゴ

TampermonkeyというChrome拡張をご存知でしょうか?

「GreasemonkeyスクリプトがChromeでも使える」と言ってわかる人は、きっと知らなくても話は早そうですね。

Tampermonkeyってなに?

Javascriptを組み合わせたスクリプトを、特定のウェブページで実行することができる……

といった代物です。

Greasemonkey(グリースモンキー)とは、Mozilla FirefoxおよびSongbird用の拡張機能。後述のユーザースクリプト形式に従ったJavascriptを組み合わせて、ウェブページ閲覧時に実行することができる。
引用:Greasemonkey - Wikipedia

ウェブページを見やすいようにカスタマイズしたり、拡張したりできるそうです。

Javascript操作してるから、当たり前かもしれないですが……

すごい……

元々GreasemonkeyというのがFirefoxのアドオンにあり、それをChromeで使えるようにしたもののようです。

今回は手書きでスクリプトを作成する方法を紹介しますが、既に作られた便利なスクリプトもTampermonkey公式から取得することもできるので、色々調べてみると便利かもしれませんよ!

拡張を導入する

Tampermonkeyは、Chrome ウェブストアからインストールすることができます。

他の拡張と同じで、普通にインストールするだけ。

スクリプトの新規作成

では、さっそくスクリプトを試してみたいと思います。

Tampermonkeyのボタンを押して、「新規スクリプトを追加」を選択します。

新規スクリプト

するとエディタが表示されますね。

ここにスクリプトを作り込んでいきます。

スクリプトの中身を書く

では、スクリプトの中身を書いていきましょう。

今回は、Googleの検索結果画面にある「設定」のリンクを削除するスクリプトを作ります。

まったくもって需要が無いですね!
いいんです。「正しく動く事」を、目に見えてすぐに確認したいだけなので(笑)

スクリプトの設定をする

まずはスクリプトの設定をします。
「スクリプトの設定をする」という言い回しであってるのかはわかりませんが……

新規作成されたスクリプトを見ると、何やら上部にコメント群がありますね。

コチラを変更していきます。
こんな感じ。

// ==UserScript==
// @name         test script
// @namespace    http://www.lisz-works.com/
// @version      0.1
// @description  test.
// @author       lis
// @match        https://www.google.co.jp/search*
// @grant        none
// ==/UserScript==
項目 内容
@name スクリプト名
@namespace 自分のサイトとか入力するらしい
@version バージョン
@description このスクリプトの説明
@author 製作者
@match 対象のURL
@grant APIによってここに情報を入力する必要がある?

他の人に公開とかしないのであれば、基本的には適当で大丈夫かと思います。

ただ、自分でわかるようにする意味も込めて、ある程度ちゃんと書いた方がいいですよ!

注意するポイントとしては、

  1. @match
  2. @grant

くらいですかね。

@matchについて

「@match」は、スクリプトを実行するURLを指定します。

ぼくの書いたものは、Googleの検索結果画面のURLです。

ただ検索結果によって、URLは変わってしまいますよね?

なので、共通の箇所「https://www.google.co.jp/search」まで入力して、「*」を付けています。

この「*」が「ワイルドカード」。つまり、「任意の文字」となります。
要約すると、「https://www.google.co.jp/search」で始まるURL~となります。

@grantについて

「@grant」については、ひとまずnoneでよさそうです。

APIによっては、ここに情報を記述しないといけないケースがあるみたい?

こちらに詳しく書かれてそうです。

efcl.info

jQueryを使えるようにする

jQuery使えたら便利ですよね。
ということで、とりあえず使えるようにセットアップ!

スクリプト先頭にあるコメント部分に、このコメントを追加します。
場所はどこでもよさそう。

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

こんな感じで。

// ==UserScript==
// @name         test script
// @namespace    http://www.lisz-works.com/
// @version      0.1
// @description  test.
// @author       lis
// @match        https://www.google.co.jp/search*
// @grant        none
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
// ==/UserScript==

こちらのサイトを参考にしました。
ありがとうございました。

blog.shibayu36.org

jQueryのAPIは、コチラのサイトにまとまってます。
各APIにサンプルもついているので、超絶親切です。

semooh.jp

スクリプトの処理部分

さて続いてスクリプトの処理部分です。

前述の通り、

作成するのは

Googleの検索結果画面にある「設定」のリンクを削除するスクリプト

です。

ということコードはコチラ。

(function() {
    $("#abar_button_opt").css("display", "none");
})();

たった3行です(笑)

簡単な解説を。

処理の大枠はこのように書きます。
この枠に囲われた所を実行してくれます。

(function() {
    // ココに処理を書く
})();

で、実行している処理

$("#abar_button_opt").css("display", "none");

ですが、jQueryのセレクタ(要素)検索を使って、対象の要素を指定しています。

$("#abar_button_opt")

の箇所が、「id=abar_button_opt」の要素を指定しています。

で、後ろの

css("display", "none");

が、CSSの書換えで、「display:none」をセットしています。
要素を消すCSSですね。

で、ID指定とCSS書換えの間に「.」がいますね。

これは

「このIDのヤツ」に「この処理してね」

というような意味です。

なので

「id=abar_button_opt」の要素に対して、CSS「display:none」をセットしてね

となります。

なので、id=abar_button_optである「設定」のリンクが消えるわけですね。

あとがき

いかがでしたでしょうか。

ぼくは某サイトをいじくる為にコレを入れましたが、便利なスクリプトが沢山出回っています。

自分に合った方法で、サイト閲覧を楽チンにしてみましょう!