UserScriptをお気に入りのエディター/IDEで編集する方法 @Tampermonkey

前回も書いたが、最近はUserScriptを書いている。実行環境はだいたいTampermonkeyなのだが、この拡張内のJavaScriptエディターがやや貧弱な点が気になった。設定からいくらか利便性を向上させることはできるが、やはり使い慣れたツールには敵わない。

klim0824.hatenablog.com

そこでUserScriptを使い慣れたエディターやIDEで書きたいと感じたのだが、その方法が分かったのでブログにまとめておくことにする。

TL;DR

Tampermonkeyの ファイルの URL へのアクセスを許可する のチェックを入れる。
TampermonkeyにラッパーとなるUserScriptをインストールし、ローカルにあるUserScriptを@requireする。
ローカルにあるUserScriptを、好きなエディター/IDEで編集する。

動作確認

拡張機能画面の設定で `ファイルの URL へのアクセスを許可する` にチェック

Chrome 拡張機能の管理画面から Tampermonkey → 詳細 と進む。

f:id:klim0824:20180805051658p:plain

ファイルの URL へのアクセスを許可する にチェックを入れる。

f:id:klim0824:20180805051718p:plain

Tampermonkeyの設定で `スクリプトによるローカルファイルへのアクセスを許可する:` の項目を確認

Google Chromeの拡張機能ボタンにある Tampermonkeyアイコン → ダッシュボード → 設定 とクリック。

f:id:klim0824:20180805004424p:plain

f:id:klim0824:20180805004523p:plain

全般 カテゴリーの 設定のモード を 新参者 から、 上級者 に変更（初心者 はダメ）。

f:id:klim0824:20180805004551p:plain

セキュリティ カテゴリーが現れるので、上から3行目の スクリプトによるローカルファイルへのアクセスを許可する が Externals (@require and @resource) となっていることを確認する（すべてのローカルファイル でも目的は果たせるが、不必要にガバガバ設定にする理由はない）。

f:id:klim0824:20180805051747p:plain

設定を変更したら、保存ボタンを忘れずにクリックすること！

f:id:klim0824:20180805051838p:plain

下拵えはここまで。

TampermonkeyにラッパーとなるUserScriptをインストール

いよいよ本題。

Tampermonkeyに以下のコードをインストールする。ここにはメタ情報しか記述されていないが、これは単なるラッパーなので本体は別に存在させる。

// ==UserScript==
// @name         wrapper_script_in_tempermonkey
// @namespace    wrapper_script_in_tempermonkey
// @version      0.1
// @description  wrapper in tempermonkey
// @author       You
// @match        http://*/*
// @grant        none
// @require      https://code.jquery.com/jquery-3.3.1.slim.min.js
// @require      file:///Users/[account]/your/project/path/script_in_local.js
// ==/UserScript==

// メタ情報以外は不要

@require の箇所が本コードの肝である。 @require 部分の最後に file:/// で始まる、ローカル内に保存する（した）UserScriptのパスを記述する。また、jQueryといった外部ライブラリをCDN経由で利用したい場合、ローカルのUserScriptのパスよりも先に読み込んでおく。

ローカル内にUserScriptを用意

Tampermonkeyにインストールしたコード内の @require のパスに合わせて、ローカルにUserScriptを配置する。これがUserScriptの本体であり、このファイルをお気に入りのエディター/IDEで編集するとOK！

// ==UserScript==
// @name         script_in_local
// @namespace    script_in_local
// @version      0.1
// @description  local
// @author       You
// @match        http://*/*
// @grant        none
// ==/UserScript==

// メタ情報は無くても構わない

(function () {
    'use strict';

    console.log('hoge');
    $('p').css('color','red');

})();

サンプルHTMLとUserScriptを発動させた結果

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>sample-html</title>
</head>
<body>
    <p>Sample HTML</p>
</body>
</html>