☰

お気に入りの IDE でユーザースクリプトを開発し、毎回 Tampermonkey のエディターにコピーして貼り付ける手間を省くにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon javascript tampermonkey
お気に入りの IDE でユーザースクリプトを開発し、毎回 Tampermonkey のエディターにコピーして貼り付ける手間を省くにはどうすればよいでしょうか? 質問する

セキュリティ上の理由から、Tampermonkey スクリプトはアクセス可能なファイルではなく、プラグイン データに保存されます。それらを編集する唯一の方法は、Tampermonkey の統合エディターを使用することです。

ただし、私はすべての機能を備えた IDE を使用したいと思います。また、webpack を使用して複数のファイルからスクリプトをパックしたいと考えています。

そのためには、プログラムで Tampermonkey のスクリプトを新しいバージョンに変更する方法が必要です。これまでは、新しいスクリプトを手動でコピーして Tampermonkey のエディターに貼り付けていましたが、これは本当に面倒です。

これを自動的に行うにはどうすればよいですか?

ベストアンサー1

私は独自の方法を見つけたので、公式なものではありません。自由に調整してください。エディターでコードを記述し、煩わしさなくブラウザーに変更が反映されるのを確認できます。

設定

TM スクリプトをコードなしで作成し、ローカル ファイルを @require します。こうすることで、ローカルで編集でき、コピー アンド ペーストしなくても、ブラウザーをリロードすると変更が有効になります。

  1. Chrome -> 拡張機能（またはURLバーに「chrome://extensions」を貼り付け）に移動し、TamperMonkeyの「カード」を見つけます。クリック詳細開いたページで、ファイル URL へのアクセスを許可します。

ファイルURLへのアクセスを許可するスイッチ

  1. スクリプト ファイルをファイルシステム内の任意の場所に保存します。ヘッダーを含む全体を保存します==UserScript==。私は macOS を使用しているので、パスは次のようになります。/Users/me/Scripts/SameWindowHref.user.js

  2. 次に、ブラウザでTMのダッシュボードに移動し、問題のスクリプトをTMエディタで開き、すべてを削除します。を除外する==UserScript==ヘッダー全体

  3. @requireスクリプトの絶対パスを指すプロパティをヘッダーに追加します。

この時点で、TM のエディターは次のようになります。

ユーザースクリプトのメタデータのみを含むTMのエディター

起こりうる落とし穴:使用方法file://URI スキームパスの先頭に が@require必須になりました。Windows システムでは次のようになります:

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

macOS および *nix の場合は、3 つのスラッシュを連続して入力する必要があります。

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

実行コンテキスト

複数の JavaScript ファイルがあり、それぞれに@requireキーが指定されている場合は、各スクリプトがいつどのように実行されるかを理解することが重要です。これは、外部ライブラリ (jQuery など) を使用する場合や、スクリプトのモノリスをいくつかのファイルに分割する場合に重要です。

パスはファイルを参照することも、単にファイルを参照することも@requireできます。これらのファイル内のUserScriptスタイルのコメントヘッダーには、*.user.js*.js無効。

メインスクリプトの==UserScript==ヘッダーから、すべての@requireファイルは指定された順序でテキストを連結する、各ファイルは改行で区切られます。この統合は、1つの大きなスクリプトとして実行されます。これは、任意のファイルの最も外側のスコープで宣言された関数または変数が、すべてのファイルの最も外側のスコープで宣言されたかのように動作することを意味し、1つのファイルの特定の構文エラーが後続のファイルの解釈に影響を与える可能性があることに注意してください。さらに、厳密モードすべてのファイルで'use strict';、最初の声明の初め @require'dファイル。

すべてのファイルが実行された後@require、プライマリ UserScript (TamperMonkey のエディターによってアクセスされるもの) が別のコンテキストで実行されます。Strict モードが必要な場合は、ここでも有効にする必要があります。

このような混乱の可能性を考慮して、各ファイルですべてのコードを国際(および関数レベル'use strict';) を使用して、スコープを個々のファイルに制限します。

ワークフロー

これで、スクリプトが ( ) と一致するたびに@match、TamperMonkey は 内のパスに関係なく、ディスク上のファイルからコードを直接ロードして実行します@require。

私が使うVSコードなので、私はここでスクリプトの作業を行いますが、どのテキスト エディターでもかまいません。スクリプトは次のようになります。

ユーザースクリプトのコードを含むVSCode IDE

TMのエディタとIDE/エディタがどのように異なるかに注目してください同じヘッダー. これで TM のエディターを閉じることができます。すべてが正しければ、これ以上開く必要はありません。

これで、コードの変更はすべてこのエディタによって自動的に保存されます。自動保存が機能しない場合は、保存を忘れないでくださいブラウザでテストする前に。

最後に、ウェブサイトを再読み込みする以前と同じように、変更を確認します。

ボーナスのヒント��

使用を検討してくださいギット初心者向けではありませんが、見た目がかっこよくなり、健全な開発体験に役立ちます (変更をロールバックして、簡単に並行したアイデアを試すことができます)。また、GitHub と組み合わせると、将来のユーザーに新しいアップデートを無料でリリースできます。

GitHub での作業（またはその他のSCM）

@updateURLタグの後にURLを追加する必要があります生GitHub または選択したプロバイダーからファイルを取得します。GitHub の例:

GitHub のユーザースクリプトの updateURL

更新チェックを機能させるには、タグが必要であることに注意してください@version。大多数の開発者はタグを必要としないので@downloadURL、スクリプトに膨大なフォロワーがいない限り、 を使用してください@updateURL。

TM は設定された頻度で更新をチェックします。設定タブから:

ここに画像の説明を入力してください

外部@requireスクリプトから呼び出されるスクリプトの更新をチェックする頻度を設定します(例: jQuery)。

更新チェックを「強制」することもできます。

ユーザースクリプトの更新オプションを確認する

外部ライブラリの使用(jQueryのように)

それは存在しなければならない少なくともChrome が読み込むには、TM のエディターに表示されるヘッダーが必要です。ただし、混乱や奇妙なバグを避けるために、両方のヘッダー (TM に表示されるヘッダーとローカル ファイルに表示されるヘッダー) を同じにしておくことをお勧めします。次に、@require次のようにします。

// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

RTFM

を見てみましょうTMのドキュメントページ; 噛みつきません! 実はとても簡潔で、さっと読むだけで、あまり努力せずに何ができるかの全体像がつかめます! ��

おすすめ記事