Tampermonkeyのテンプレートを編集する方法

Chrome ロゴ

Tampermonkeyのテンプレートを編集する方法をご紹介します。

エディタを開くと、予め「==UserScript==」等が入力されていますよね？

あの事前に入力されるヤツを、編集する方法です。

毎回編集しないといけない箇所を減らせるので、作業を楽にできますよ！
作業時間も軽減しますしね！

やり方
デフォルト設定(バックアップ)
UserScriptのカスタマイズ
スクリプト記述箇所のカスタマイズ
あとがき

やり方

全般の設定のモードを「上級者」に変更。

UserScript欄が、新規作成時に先頭に書かれるUserScriptのテンプレート

ECMAScript 5
ECMAScript 6
CoffeeScript

とあるが、通常時はECMAScript 5と思われます。

デフォルト設定(バックアップ)

デフォルト設定はこんな感じです。バックアップを兼て。

ECMAScript 5

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        <$URL$>
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();

ECMAScript 6

// ==UserScript==
// @name         New ES6-Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  shows how to use babel compiler
// @author       You
// @require      https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.2/babel.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.js
// @match        <$URL$>
// ==/UserScript==

/* jshint ignore:start */
var inline_src = (<><![CDATA[
/* jshint ignore:end */
    /* jshint esnext: false */
    /* jshint esversion: 6 */

    // Your code here...

/* jshint ignore:start */
]]></>).toString();
var c = Babel.transform(inline_src, { presets: [ "es2015", "es2016" ] });
eval(c.code);
/* jshint ignore:end */

CoffeeScript

// ==UserScript==
// @name         New Coffee-Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  shows how to use coffeescript compiler
// @author       You
// @require      http://coffeescript.org/extras/coffee-script.js
// @match        <$URL$>
// ==/UserScript==
/* jshint ignore:start */
var inline_src = (<><![CDATA[

    // Your code here

]]></>).toString();
var compiled = this.CoffeeScript.compile(inline_src);
eval(compiled);
/* jshint ignore:end */

UserScriptのカスタマイズ

この部分が共通となります。
毎度自分で入力するのは面倒なので、テンプレートを変更しちゃいましょう。

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        <$URL$>

ぼくはこんな感じで変更しました。

// ==UserScript==
// @name         NewUserscript
// @namespace    http://www.lisz-works.com/
// @version      0.1
// @description  description
// @author       lis
// @match        <$URL$>
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

@nameと@descriptionは、ダブルクリックで即編集できるようにスペースをなくしました。
なので文言にあまり意味はありません。

@namespaceと@authorは、自分用に変更しました。
このブログをURLと、自分の名前ですね。

また@requireを追加しました。
毎回jQueryを導入するのに、いちいち書くの面倒だと思っていた所だったので(笑)

スクリプト記述箇所のカスタマイズ

UserScript下の、スクリプト記述箇所。

ココも毎回消すのが面倒なのでデフォルトの

(function() {
    'use strict';

    // Your code here...
})();

この状態から

(function() {
    
})();

こうしちゃいましょう。

「毎回これは書く」っていうのがあれば、入れちゃうと楽ですね！

あとがき

テンプレートがあるとかなり作業のストレスが低減されますね。

「大した作業じゃないから別にいいじゃん」

と思うかもしれませんが、これがなくなることで

面倒の解消
間違いの防止
ストレスの低減
めんどくさくない
めんどくさくない

といいことづくめです！

他のアプリでもテンプレート機能等、作業簡略化できるものがあったらゴリゴリ試していきましょう！

lisz-works

プログラミングと興味を貴方に