TampermonkeyでjQueryを使用する方法

TampermonekyでjQueryを使用する方法を記載します。

requireでjQueryのパスを指定する

TampermonkeyでjQueryを使用するにはUserScript欄のrequireでjQueryのパスを指定します。

新規作成した直後のスクリプトが以下だとします。

// ==UserScript==
// @name         __TEST__
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.google.com/
// @icon         https://www.google.com/s2/favicons?domain=google.com

// @grant        none
// ==/UserScript==

そして、TampermonekyでjQueryを使用するためには以下のコードをUserScriptに追加します。

@require      https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js

@requireで指定したライブラリはスクリプトの動作前に読み込まれることなります。
よって、ここでjQueryのパス(上記ではGoogleのCDNのパス)を指定してやれば、TampermonekyのスクリプトでjQueryを使用することができます。

つまり、最終的には以下のようなコードになります。

// ==UserScript==
// @name         __TEST__
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.google.com/
// @icon         https://www.google.com/s2/favicons?domain=google.com
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @grant        none
// ==/UserScript==

$(function() {
   alert("ok");
});

このスクリプトを実行して(= googleのトップページを開いて)、空のアラートが表示されれば、jQueryが動作しています。