Javascript

OpenUserJsリポジトリへの自動展開を使用して、実際のIDEでTampermonkeyスクリプトを開発します



Develop Tampermonkey Scripts Real Ide With Automatic Deployment Openuserjs Repo



解決：

私は別の質問でこれに答えました。私は誰かがそれらをマージする必要があると思います。それまでの間、これについてはあまり情報を見ていないので、助けを求めている次の人のためにここに置きます。

インスタントアップデートへのコーディング‍

エディターでコーディングして、煩わしさなしにブラウザーに反映された変更を確認できるように、いくつかの構成を行います。



  1. Chromeに移動=> 拡張機能 TamperMonkeyの「カード」を見つけます。クリック 詳細 。開いたページで、ファイルURLへのアクセスを許可します。

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

  1. スクリプトファイルをファイルシステムの好きな場所に保存します。を含むすべてのものを保存します== UserScript ==ヘッダー。これはすべてのデスクトップOSで機能しますが、macOSを使用しているため、パスは次のようになります。/Users/me/Scripts/SameWindowHref.user.js



  2. 次に、TM拡張機能のダッシュボードに移動し、問題のスクリプトをエディターで開いて、すべてを削除します。 それ外 全体== UserScript ==ヘッダー

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

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



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

アップデート： を使用しているようですパスの先頭にあるfile：// URIスキームが必要になりました。 Windowsシステムでは次のようになります。

// @require file：// C： path  to  userscript.user.js
macOSと* nixの場合、3つのスラッシュを続けて必要とします。
 
// @require file：///path/to/userscript.user.js
 
実行コンテキスト
 
で呼び出される複数のJavaScriptファイルがある場合@require（jQueryのように、またはより良いエクスペリエンスのために大規模なスクリプトを小さな断片に断片化する場合）、この部分をスキップしないでください。
 
NS@requireパスは参照できます* .user.jsまたは直接* .jsファイル、およびこれらのファイル内のUserScriptスタイルのコメントヘッダーには、 無効 。
 
メインスクリプトから== UserScript ==ヘッダー、すべて@requireファイルは テキスト-指定された順序で連結されます 、各ファイルを区切る1つの改行。この統合は、1つの大きなスクリプトとして実行されます。これは、ファイル内のグローバル関数または変数がすべてのユーザースクリプトのファイルでもグローバルになることを意味しますが、これは理想的ではありません。 1つのファイルのエラーは、後続のファイルの実行方法に影響を与える可能性があります。さらに、すべてのファイルで厳密モードを有効にするには、'厳密に使用';である必要があります 最初のステートメント の 最初のファイル でリストされています@必須。
 
結局@requireファイルが実行されると、メインのUserScript（TamperMonkeyのエディターによってアクセスされるもの）が別のコンテキストで実行されます。厳密モードが必要な場合は、ここでも有効にする必要があります。
 
ワークフロー
 
これで、そのスクリプトが一致するたびに（@match）アクセスしているWebサイトの場合、TamperMonkeyは、ディスク内のファイルから直接コードをロードして実行します。@requireフィールド。
 
私はVSCodeを使用しています（おそらく 最高の これまでのマルチプラットフォームコードエディタ。そして無料）、それで私はスクリプトに取り組んでいますが、どんなテキストエディタでもかまいません。次のようになります。
 
 ここに画像の説明を入力してください
 
TMのエディターとIDE /エディターのヘッダーが同じであることに注目してください。
 
コードのすべての変更は自動的にVSCodeに保存されるため、そうでない場合は 保存することを忘れないでください 。その後、あなたはする必要があります ウェブサイトをリロードする 変更を確認できますが、browser-syncのCLIのワンライナーを使用してこれを簡単に自動化することもできます。1つのツールについて言及すると、すばらしいエクスペリエンスが得られます。
 
gitを使用していない場合は、唯一の開発者であっても、ユーザースクリプトでの使用を検討する必要があります。それはあなたの進歩を追跡し、同時に異なる機能に正気に取り組み、間違いをロールバックし、そしてあなたがあなたのユーザーに新しいアップデートを自動的にリリースするのを助けるでしょう！
 
そして、こことここであなたのすべての作品を共有してください
 
  
 
ボーナスのヒント！
 
  GitHubの操作 または他のSCM
 
追加する必要があります@updateURLタグの後に、GitHubまたは選択したプロバイダーからの生ファイルを含むURLが続きます。 GitHubの例：
 
 ここに画像の説明を入力してください
 
注意してください更新チェックを機能させるには、@ versionタグが必要です。大多数のユーザーは必要ありません@downloadURLタグなので、スクリプトに大規模なフォロワーベースがない限り、@updateURL。
 
TMは、[設定]タブから構成されている更新を確認します。
 
 ここに画像の説明を入力してください
 
  外観 スクリプトがスクリプトから呼び出される頻度を設定します@requireは更新するためにチェックされます（たとえば、jQuery）。
 
更新チェックを「強制」することもできます。
 
 ここに画像の説明を入力してください
 
  外部ライブラリの使用 （jQueryのように）
 
存在している必要があります 少なくとも Chrome用のTMのエディターでロードします。ただし、混乱を避けるために、両方のヘッダー（TMとディスクのヘッダー上のファイル）を同じに保つことをお勧めします。単に@これを使用するには、次のように要求します。
 
// @require https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
RTFM
 
TMのドキュメントページをご覧ください。噛まない！それは非常に簡潔であり、簡単に読むことで、あなたは多くの努力なしであなたが何ができるかについての全体像を得るでしょう！
  
 
 
アルファ/ベータリリースを公開したい[...]
 
 
あなたは使用することができます@updateURL userscriptタグを使用してWebURL [1]を指摘し、それをgitと一緒に使用して必要性を実現します。
 
 
これが私がそれを実装する方法です：
 
     
  • 私のGitlabインスタンスでhttps://foo.com/user/project/raw/develop/main.user.jsは、の生のユーザースクリプトファイルを指摘していますブランチを開発します。
    •  
  • プロジェクトの説明には、開発およびその他の重要な機能ブランチへのリンクが用意されているため、マスターバージョンではなく開発バージョンに従うことを選択できます[2]。
    •  
  • そして私は共有のためにこのテンプレートを使用します：
    •  
 
// == UserScript == // @name New Userscript // @namespace foo.com // @version 0.3 // @description世界を乗っ取ろう！ // @author user // @match https://bar.org/* // @grant none // @updateURL https://foo.com/user/project/raw/develop/main.user.js // == / UserScript ==（function（）{'use strict'; //ここにコードを...}）（）;
     
  • 次にトリガーすると ユーザースクリプトの更新を確認する GreasemonkeyまたはTempermonkeyのボタンをクリックすると、このURLで利用可能なスクリプトがインストールされます。
    •  
 
 
[1]インストールしたい場所からアクセスできるもの。パーソナルコンピューターからのパブリックGithubリポジトリ、または仕事用コンピューターからの会社のプライベートGitlabインスタンス
 
[2]リンクをクリックしてインストールできるようにするには、ファイルの名前がで終わる必要があることに注意してください.user.js