はじめに
Webブラウザで毎回同じクリックをしたり、決まった場所までスクロールしたり、見づらい画面を自分用に整えたくなることはよくあります。
そんなときに役立つのが、ユーザースクリプトを実行できる拡張機能 Tampermonkey です。Chrome拡張を一から作るより手軽で、JavaScriptを少し書くだけで「自分専用の便利機能」をブラウザに追加できます。
この記事では、初心者向けに以下をまとめます。
- Tampermonkeyとは何か
- Tampermonkeyでできること
- 導入方法
- 最低限のスクリプトの書き方
- まず試したい簡単なサンプル
- 実用的な使い方の例
- よくあるエラーと注意点
「まずは1本動かしてみたい人」と「どんな自動化に使えるのか知りたい人」の両方に向いた入門記事です。
Tampermonkeyとは
Tampermonkeyは、Webページ上で自分だけのJavaScriptを実行できるブラウザ拡張です。
ここで書くコードは ユーザースクリプト と呼ばれ、対象ページを開いたタイミングで自動実行されます。つまり、普段見ているWebサイトに対して、自分専用の機能追加や作業の自動化ができるツールです。
たとえば次のような用途に向いています。
- 毎回押しているボタンを自動でクリックする
- フォームに定型文を入れる
- よく使うリンクやボタンをページに追加する
- 不要な要素を非表示にして画面を見やすくする
- 自分だけのショートカットや補助UIを追加する
Chrome拡張との違い
Tampermonkeyは「既存のWebページに小さな機能を足す」用途に強いです。
- 軽い自動化や見た目の調整なら、Chrome拡張を自作するより早く試せる
- JavaScriptだけで始めやすい
- ページごとに対象を絞って動かせる
本格的な拡張機能開発ではなく、まずはブラウザ上の作業改善から始めたい人に向いています。
Tampermonkeyでできること
Tampermonkeyでできることを、初心者向けに整理すると以下の通りです。
ブラウザ操作の自動化
- 画面表示後に特定ボタンを押す
- 毎回同じページに移動する
- 一定位置まで自動スクロールする
入力作業の効率化
- 定型文をワンクリックで入力する
- よく使うフォーム項目を補助する
- 管理画面の入力ミスを減らす
画面の見た目改善
- 不要な広告やパネルを非表示にする
- 背景色や文字サイズを自分向けに変える
- 操作しやすい場所に自分用ボタンを置く
業務ツールの使い勝手向上
- 社内システムの面倒な手順を減らす
- 毎日触る管理画面を見やすくする
- 単純な繰り返し操作を減らす
「少し面倒」を減らす小さな改善を積み重ねられるのが、Tampermonkeyの強みです。##
Tampermonkeyの導入方法
Tampermonkeyをインストールする
Chromeウェブストアで Tampermonkeyを検索し、Chromeに追加します。
インストール後は、必要に応じて拡張機能一覧からピン留めしておくと使いやすくなります。
ユーザースクリプトの実行を許可する
Chrome系ブラウザでは、インストール後にユーザースクリプト実行の許可が必要になることがあります。
chrome://extensions/を開くTampermonkeyの詳細画面を開く- 表示される場合は
Allow User Scriptsをオンにする
- 環境によっては
デベロッパーモードを有効にする
この設定ができていないと、スクリプトを書いても動かないことがあります。
最低限のスクリプトの書き方
Tampermonkeyのスクリプトは、大きく分けると以下の2つでできています。
- メタデータ
- 実際に動くJavaScript
最小構成は次のような形です。
// ==UserScript==
// @name Sample Script
// @namespace http://tampermonkey.net/
// @version 1.0
// @description My first userscript
// @match https://example.com/*
// @grant none
// ==/UserScript==
(() => {
'use strict';
console.log('Tampermonkey is running');
})();初心者のうちは、特に次の3つを押さえれば十分です。
@name: スクリプト名@match: どのURLで動かすか@grant: 権限設定。まずは `none` でOK
まずは動かしてみる！超かんたんスクリプト
最初は「本当に動く」ことを確認するのが大事です。ここでは `example.com` を開いたときにアラートを出すだけのシンプルな例を使います。
手順
- Chrome右上のTampermonkeyアイコンをクリックする
- Create a new script… を選ぶ
- 既存コードを消して、下のサンプルを貼り付ける
- 保存する
https://example.com/を開く
// ==UserScript==
// @name Hello World Example
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Simple test script
// @match https://example.com/*
// @grant none
// ==/UserScript==
(() => {
'use strict';
alert('こんにちは。Tampermonkey が動いています。');
})();ページを開いたときにアラートが出れば成功です。
実用サンプル3つ
ここからは、Tampermonkeyでよくある使い方を3つ紹介します。
ページの背景色を変更する
画面確認用や自分用の目印として、特定ページだけ背景色を変えたいときに使えます。
// ==UserScript==
// @name Background Color Change
// @match https://www.google.com/*
// @grant none
// ==/UserScript==
(() => {
'use strict';
document.body.style.backgroundColor = 'lightyellow';
})();特定のボタンを自動クリックする
毎回押しているボタンが決まっている画面では、かなり実用的です。
// ==UserScript==
// @name Auto Click Example
// @match https://example.com/*
// @grant none
// ==/UserScript==
window.addEventListener('load', () => {
const button = document.querySelector('button');
if (button) {
button.click();
}
});自分用のボタンを画面に追加する
管理画面や社内ツールで「ここに自分用ボタンがあれば楽なのに」を形にしやすい例です。
// ==UserScript==
// @name Add My Button
// @match https://example.com/*
// @grant none
// ==/UserScript==
(() => {
'use strict';
const button = document.createElement('button');
button.textContent = '自分用ボタン';
Object.assign(button.style, {
position: 'fixed',
right: '16px',
bottom: '16px',
zIndex: '9999',
padding: '8px 12px'
});
button.addEventListener('click', () => {
alert('ここに好きな処理を書けます。');
});
document.body.appendChild(button);
})();よくあるエラーと動かないときの確認ポイント
Tampermonkey初心者がつまずきやすいポイントはだいたい決まっています。
@matchが合っていない
対象URLが一致していないと、スクリプトは実行されません。
https://example.com/*とhttps://www.example.com/*は別- テストしたいURLと
@matchの内容を必ず見比べる
スクリプトを保存していない
貼り付けただけでは動きません。保存後にページを再読み込みしてください。
スクリプトが無効になっている
Tampermonkeyの管理画面で、対象スクリプトが有効になっているか確認します。
ユーザースクリプト実行の許可が不足している
Chrome系ブラウザでは、Allow User Scripts やデベロッパーモードの設定が必要なことがあります。
ページ読み込み前に要素を取りに行っている
対象のボタンや入力欄がまだ表示されていないと、querySelectorで見つかりません。必要に応じて loadイベントや待機処理を入れます。
危険性と注意点
Tampermonkeyは便利ですが、強い権限でページを書き換えられるぶん、注意も必要です。
- ネット上のスクリプトをそのまま信用しない
- 銀行、決済、SNSなど重要サービスでは慎重に使う
- まずは
@matchを必要なURLだけに絞る - Webサイト側の画面変更で急に動かなくなることがある
- 利用規約や社内ルールに反する自動化は避ける
特に初心者のうちは、「便利そうだから全部コピペ」ではなく、短いコードを自分で理解しながら試すのがおすすめです。
次に読むと理解が深まるテーマ
Tampermonkeyは、ブラウザ自動化の入口としてかなり優秀です。慣れてきたら、次のテーマにも広げやすくなります。
- 業務自動化の考え方
- スクレイピングの基礎
- SeleniumやPlaywrightのような本格的なブラウザ自動化
- JavaScriptのDOM操作
- AIコーディングツールを使ったスクリプト作成補助
まとめ
Tampermonkeyは、ブラウザ上のちょっとした不便を、自分で改善できる便利な拡張機能です。
- 導入しやすく、初心者でも始めやすい
- JavaScriptを少し書くだけで自動化できる
- 実務や日常作業の効率化に直結しやすい
まずは短いサンプルを1本動かして、@match とDOM操作に慣れるところから始めるのがおすすめです。
コメント