Techの手帖

IT技術に関する小ネタを見つけたときに書くブログ

Tampermonkeyのユーザースクリプトを外部エディタで編集&同期する方法

Tampermonkeyとローカル環境を同期させて、普段使っているエディタでコードを書けるようにする方法を調べました。

やりたいこと

  • 内蔵エディタではなくVSCodeを使ってコードを書きたい
  • gitでバージョン管理したい
  • テストを書いたり、外部ツールを使えるようにしたい

要約

2つの方法を試しました。
できることは大体同じですが、セキュリティ面が気になる場合は方法2のほうが良さそうです。

方法1 (ファイルへのアクセス許可)

  1. Tampermonkeyの権限を変更し、ファイルの URL へのアクセスを許可する
  2. ローカルのjsファイルを@requireで読み込む

方法2 (TamperDAV)

  1. TamperDAVの環境を作成
  2. TampermonkeyのUserScript 同期を有効にする
  3. TamperDAVが自動起動するよう設定

方法1 (ファイルへのアクセス許可)

こちらの回答を参考にしました。

stackoverflow.com

今回は例として「Twitterトレンドを非表示にするユーザースクリプト」を同期させてみます。
スクリプトは現在、Tampermonkeyの「インストール済み UserScript」の中に置いてあるものとします。

Step 1: Tampermonkeyの権限を変更し、ファイルの URL へのアクセスを許可する

Google Chrome拡張機能chrome://extensions)を開き、Tampermonkeyの「詳細」ボタンをクリック。

「サイトへのアクセス」を「すべてのサイト」、「ファイルの URL へのアクセスを許可する」を有効にします。

f:id:moknoi:20211226213739p:plain f:id:moknoi:20211226213741p:plain

Step 2: ローカル環境に .user.js ファイルを作成する

好みの場所にユーザースクリプトの本体となるファイルを作成します。
(自分はmac環境で /Users/ユーザー名/userscript/RemoveTwitterTrend.user.js に作成)

そこにTampermonkeyのエディタからコピーしてきた内容を貼り付けます。

// ==UserScript==
// @name         Remove Twitter Trend
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Twitterトレンドを非表示にするユーザースクリプト
// @author       You
// @match        https://twitter.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function () {
  "use strict";
  GM_addStyle(`div[aria-label="タイムライン: トレンド"], div[aria-label="タイムライン: "], aside[aria-label="おすすめユーザー"] { display:none; }`);
})();

Step 3: Tampermonkey側からローカルファイルを読み込めるようにする

Tampermonkeyのほうのスクリプト==UserScript== ヘッダだけが残る形にして、コード部分を全て削除します。

そこに @require タグを追加して、ローカルファイルの絶対パスを指定します。

こんな感じ。

// ==UserScript==
// @name         Remove Twitter Trend
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Twitterトレンドを非表示にするユーザースクリプト
// @author       You
// @match        https://twitter.com/*
// @require       file:///Users/ユーザー名/userscript/RemoveTwitterTrend.user.js
// @grant         GM_addStyle
// ==/UserScript==

ちなみにfile URIの記法は以下。

Windows:

// @require      file://C:\path\to\userscript.user.js

macOS, *nix:

// @require      file:///path/to/userscript.user.js

正しく指定できていれば、Tampermonkeyがローカルのファイルを読みに行きます。

試しにローカルのファイルを変更してブラウザを更新すると、変更が反映されています。 これで普段使っているエディタを使って開発できるようになりました。

方法2 (TamperDAV)

ここからは別の方法の説明です。

1の方法では、すべてのサイトの読み取りと変更を許可する必要があります。
特定のサイトで使うだけなのに、すべてのサイトの権限を与えるというのは何となくやり過ぎな気がします。

調べてみると、公式のFAQで言及されているTamperDAVが良さげだったので試してみました。

github.com

この方法なら、設定で「サイトへのアクセス」を「特定のサイト」、「ファイルの URL へのアクセスを許可する」を無効にしても動作します。

Step 1: 環境を用意する

git と Node.js (>= v4.9) が必要です。先にインストールしておきます。

その上で、以下を実行して環境を作成。

git clone https://github.com/Tampermonkey/tamperdav.git

Step 2: ユーザー名、パスワードを設定

config.json を開いて以下を記入。

{
    "path": "dav",
    "username": "任意のユーザー名を入力",
    "password": "任意のパスワードを入力",
    "port": "7000",
    "host": "localhost",
    "meta-touch": true,
    "open-in-editor": true
}

Step 3: サーバーを起動

Windowsの場合:

TamperDAV.bat を実行

macOSの場合

ターミナルで以下を実行

$ ./tamperdav.sh

Step 4: TamperDAV上のデータへのアクセスを許可する(「サイトへのアクセス」を「特定のサイト」にしている場合)

Google Chrome拡張機能chrome://extensions)を開き、Tampermonkeyの「詳細」ボタンをクリック。

http://localhost:7000/*」へのアクセスを許可します。

f:id:moknoi:20211226213754p:plain

Step 5: TampermonkeyのUserScript 同期を有効にする

Tampermonkeyの設定画面で以下を行う。

  • 設定のモードを「上級者」にする
  • UserScript 同期を有効にする」をチェック
  • 種類「WebDAV」を選択
  • 設定した URLhttp://localhost:7000)、ユーザー名パスワードを入力して「保存」をクリック
  • 最下部の「Tampermonkey を再起動」をクリック

f:id:moknoi:20211226213744p:plain f:id:moknoi:20211226213749p:plain f:id:moknoi:20211226213752p:plain

「インストール済み UserScript」のタブを開いて、操作列に雲のマーク(f:id:moknoi:20211226213746p:plain)がついていたら同期ができています。

davディレクトリ以下のファイルを書き換えると、Tampermonkey側のスクリプトも書き換わるようになります。

スクリプト名の確認方法について

ファイル名がuuidになる仕様のようです。スクリプト名を知りたいときは find_script_in_meta.js で確認できます。

node find_script_in_meta.js

Step 6: TamperDAVがOS起動時に自動起動するように設定

Windowsの場合

スタートアップフォルダにショートカットを置く。

support.microsoft.com

macOSの場合

Automatorを開いて「アプリケーション」を選択。 「シェルスクリプトを実行」をドラッグ&ドロップし、以下のコマンドを入力して保存します。

osascript -e 'tell application "Terminal" to do script "cd /Users/ユーザー名/tamperdav && ./tamperdav.sh"'

システム環境設定 > ユーザーとグループ > ログイン項目で「+」ボタンを押して、作成したアプリケーションを追加します。

参考

javascript - How can I develop my userscript in my favourite IDE and avoid copy-pasting it to the Tampermonkey's editor every time? - Stack Overflow

Tampermonkey • Documentation

Tampermonkey • FAQ

GitHub - Tampermonkey/tamperdav: A WebDAV-like server to sync Tampermonkey scripts and edit them with an external editor