UserScriptをいまさらながら語る

目次

  1. 1. UserScriptとは
  2. 2. 歴史
  3. 3. 導入手順
    1. 3.1. Chromeのデベロッパーモードを有効化
      1. 3.1.1. 設定画面を開く
      2. 3.1.2. デベロッパーモード切り替え
    2. 3.2. Tampermonkey のインストール
    3. 3.3. Tampermonkey に UserScript を追加
      1. 3.3.1. Tampermonkey を開く
      2. 3.3.2. 新しいスクリプトを作成する
      3. 3.3.3. UserScript を貼り付ける
    4. 3.4. 動作確認
  4. 4. 導入後
    1. 4.1. 保存済みスクリプトを更新したい
    2. 4.2. スクリプトを一時的にオフにしたい
  5. 5. おわりに
mv

もうかれこれ7年くらいはお世話になっている UserScript という JavaScript を使ったプログラムがあるのですが、少なくとも僕の周りではあまりメジャーではないらしく、そんな話をしているうちになんとなく気分が乗ったので今日はこの UserScript について書いてみたいとおもいます。

UserScriptとは

ブラウザ上で自前で用意した JavaScript を動かす仕組みです。Chrome 拡張機能と似たようなものです。Chrome拡張ほど複雑なことはできませんが、その代わりに追加や変更は UserScript のほうがかなりカジュアルにできます。(例えばスクリプトを修正した場合、Chrome拡張機能だとインストールのし直しになりますが、UserScriptであればスクリプトの書き換えだけですみます。)

UserScript についての詳しい説明は下記リンクを参考にしてください。

歴史

Greasemonkey という Firefox 向けのアドオンが UserScript の代表的な実行環境なんですが、Wikipediaによるとこの初版がもう21年前からある らしいです。冒頭に書いたとおり僕が使い始めたのは7年くらい前からですが、まさかこんなに歴史の長い技術とは知らなかったです。

Greasemonkey は Firefox 用のソフトウェアですが僕は普段 Google Chrome を使うことが多いため、ここでは Tampermonkey というツールを使って Google Chrome で UserScript を動作させる内容で進めます。

導入手順

Chromeのデベロッパーモードを有効化

UserScript を動かすにはまずこの設定を有効化する必要がありますので先に対応します。

設定画面を開く

まず Chrome のアドレスバーに以下を入力して拡張機能設定を開きます

chrome://extensions/

デベロッパーモード切り替え

あとは右上の「デベロッパーモード」のスイッチを有効に切り替えればOKです

デベロッパーモード

Tampermonkey のインストール

Tampermonkey は UserScript の管理・コントロールを行う Chrome 拡張機能です。

こちらからインストールします。
Chromeウェブストア - Tampermonkey

Tampermonkey

Tampermonkey に UserScript を追加

あとは Tampermonkye 上でスクリプトを追加するだけです。

Tampermonkey を開く

ブラウザ右上の Tampermonkey アイコンをクリックし、「ダッシュボード」を選択します。

Tampermonkey2

Tampermonkey3

新しいスクリプトを作成する

ダッシュボードを開いたら「＋」ボタン（新規スクリプト）をクリックします。すると UserScript の雛形が表示されます。

Tampermonkey4

UserScript を貼り付ける

例えばサンプルとしてこんなスクリプトを貼って保存してみます。これはページに UserScript 動作中 と表示させるだけのスクリプトです。

// ==UserScript==
// @name         JPSERN Sample Script
// @namespace    https://jpsern.com/
// @version      1.0.0
// @description  Sample UserScript for JPSERN.COM
// @author       TOMMY(a.k.a. Jpsern)
// @match        https://jpsern.com/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    console.log('JPSERN.COM で UserScript が実行されました！');

    const banner = document.createElement('div');
    banner.textContent = 'UserScript 動作中';
    banner.style.cssText = `
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 99999;
        padding: 8px 12px;
        background: #007acc;
        color: #fff;
        border-radius: 4px;
        font-size: 12px;
    `;

    document.body.appendChild(banner);
})();

スクリプトを貼り付けて保存したら完了です。

動作確認

実際に動きを見てみましょう。対象サイトを開いてリロードすると先ほどのスクリプトの効果がさっそく現れます。

Tampermonkey5

  • Tampermonkey アイコンの横に [1] という数字が記載されています。これはこのページで有効な UserScript の数です。UserScript は同一サイトに何個でも追加できます。ここでは先ほど追加したスクリプトが @match の条件に該当して動き出したことを意味しています。
  • スクリプトの効果で右上に「UserScript動作中」が表示されるようになりました。

導入後

保存済みスクリプトを更新したい

スクリプト追加時と同様、拡張機能の Tampermonkey アイコンをクリックし、ダッシュボードをクリックしたあと追加済みスクリプトを編集するだけです。画像のように先ほど追加したスクリプトが一覧に表示されますので、あとは右側の鉛筆マークをクリックすると新規追加時と同様にスクリプトエディタが起動しますので、あとはスクリプトを書き換えて保存すればOKです。

Tampermonkey6

スクリプトを一時的にオフにしたい

前項の「保存済みスクリプトを更新したい」と同様、拡張機能の Tampermonkey アイコンをクリックし、ダッシュボードのインストール済み UserScript 一覧まで表示したら、左側の「有効」の下にあるトグルスイッチを押せば簡単に有効と無効を切り替えられます。

おわりに

Google Chrome 拡張機能を作るほどではないけど、ある程度永続化したスクリプトを適用したいという場合はこの UserScript がけっこう便利です。覚えておくと仕事でもそこそこ役に立ちます。よかったら試してみてください。

スポンサーリンク
share