GreaseMonkeyスクリプトでjQueryを使用する

GreaseMonkeyバージョン0.8の便利で不当に使用頻度の低いイノベーションについてお話したいと思います。これは1年以上前から利用できます。 カスタムスクリプトをよりモジュール化するのに役立ちます。最も重要なことは、トリックを使わずにjQueryを使用できるようにすることです。 ユーザースクリプトの新しいメタパラメーター@resource@requireについて話します。



小さな例を考えてみましょう: habratest.user.js 。 このスクリプトは、GreaseMonkeyロゴをHabrahabrメニューに追加します。クリックすると、外部ファイルから取得したテキスト「Hello、world!」が表示されます。

// ==Userscript==<br>// @name habratest<br>// @namespace habratest<br>// @include http://habrahabr.ru/*<br>// @include http://*.habrahabr.ru/*<br>// @resource gm_logo http://veg.slutsk.net/habr/greasemonkey.png<br>// @resource hello http://veg.slutsk.net/habr/hello.txt<br>// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js<br>// ==/Userscript== <br><br>$( document ).ready( function ()<br>{<br> $( "ul.panel-nav-top" ).append( '<li style="float: right;" id="habratest"></li>' );<br> $( "#habratest" ).append( '<img src="' +GM_getResourceURL( "gm_logo" )+ '">' );<br> $( "#habratest img" ).click( function ()<br> {<br> alert(GM_getResourceText( "hello" ));<br> });<br>});





@resourceを使用すると、ユーザースクリプトに外部ファイル(画像、テキストファイルなど)を添付できます 。 -実行時に必要なものすべて。 この例では、gm_logoはリソースの名前です。 GM_getResourceURL関数は、ファイル(たとえば、写真)へのローカルリンク、GM_getResourceText-ファイルからテキストを取得することを目的としています(ファイルには、たとえば、大きなHTMLを含めることができます)。 両方の関数は、リソース名をパラメーターとして受け入れます。 サーバーへの直接リンクの代わりにリソースを使用する利点は、指定したファイルがスクリプトのインストール中に1回ダウンロードされ、将来ローカルマシンから常に取得されることです。



さらに興味深いのは@requireで 、外部ライブラリをスクリプトに接続できます。 もちろん、スクリプトタグを動的に作成してコードをフェンスし、重要なメソッドを使用してロードを期待できます。 ただし、この場合、ブラウザで新しいページを開くたびに、ライブラリファイルがサーバーから要求されます。 @Requireにはこれらの欠点がありません-ファイルはインストール中に1回だけ要求され、最も重要なこと-ユーザースクリプトの実行が開始される前に実行されることが保証されます。



便利な例として、 yandexru.user.jsスクリプトコードを参照することをお勧めします 。これは、検索結果ページで「例外なしで検索」オプションをリクエストフォーム、「サイトで検索」フィールドに追加し、インストールされた地域が検索結果に影響を与えたかどうかも表示します。



残念ながら、これらのことは今日のFirefoxでしか行えません。 他のブラウザ用のGreaseMonkeyアナログの開発者にヒントを与えるのは理にかなっているので、そのような便利な機能のサポートについて考えます。 ただし、個人用のスクリプトを作成している場合は、今日これらの機会を利用することはかなり可能です。



All Articles