🕴️ 😙 🌆 UserJS。パート4：libretkiフレームワーク 👷🏻 ⏪ 👨🏼‍🏭

libretkiは、 userjsの作成を単純化し、便利な機能の既製セットを提供するように設計されたフレームワークです。

シリーズの他の記事：

コア

システムのコアはlibretki.core.jsファイルで表されます。これは、2番目の記事のloader.jsの開発です。カーネルは、いくつかの基本的な機能も提供します。必要なのが他のファイルを添付する能力だけであれば、カーネルで十分です。

libretkiを使用した典型的なスクリプト：

 if（！（ウィンドウ内の 'libretki'））{libretki = {__scripts：[]};  }
 libretki .__ scripts.push（{
    名前： 'habrahabr.example'、
    必要なもの：['libretki.utilities']、

     init：function（unsafe）{
       //いくつかのコード...

       libretki.core.namespace（ 'habrahabr.example'、{
         func：function（）{/ * ... * /}、
       }）;
     }
 }）;

func関数がhabrahabr.example.funcとして利用可能になりました。安全でないオブジェクトは、ファイルアクセスなど、userjsの外部でレンダリングするのが安全ではない関数の名前空間として使用されます。

関数ライブラリ

ユーティリティ（libretki.utilities）

主要な必需品の小さな必需品のセット：コレクション（ forEach 、 map 、 filter 、...）での作業、オプションの引数（ optional ）、オブジェクトの更新（ modifyObject ）、および特別な焦点のないその他のユーティリティ。

他のほぼすべてのスクリプトで使用されます。

例：

 var positive = libretki.utilities.filter（arr、function（item）{return item.value> 0;}）;
 libretki.utilities.forEach（positive、function（item）{item.func（）;}）;

Cookieの管理（libretki.cookies）

document.cookiesに直接アクセスして結果を解析する代わりに、cookieを使用した便利な作業により、関数set 、 getおよびdelが提供されます。

例：

 libretki.cookies.set（ 'name'、 'value'）;
 var value = libretki.cookies.get（ 'name'）;

JSON（libretki.json）

JSON形式のオブジェクトのシリアル化と逆シリアル化。

例：

 var str = libretki.json.stringify（{name： 'name'、value： 'value'、active：true}）;
 var obj = libretki.json.parse（str）;

オブジェクトをクッキーに保存する（libretki.cookies_json）

オブジェクトをクッキーに保存します。これは、CookieとJSONライブラリの単純な組み合わせであり、原則として冗長ですが、歴史的な理由から残っています。

例：

 libretki.cookies_json.set（ 'name'、{value： 'value'、active：true}）;
 var obj = libretki.cookies_json.get（ 'name'）;

XPath（libretki.xpath）

XPathを使用して要素と値を取得します。これはdocument.evaluateの上の薄いレイヤーですが、特定の定数とフィールドを覚える必要がなくなります。

例：

 var nodes = libretki.xpath.getNodes（document.body、 '// img [@ class = "adv"]'）;
 var value = libretki.xpath.getNumber（tbody、 'tr / td [@ id = "header"] / @ colspan'）;

DOM（libretki.visual.dom）を使用してドキュメントを変更する

要素をすばやく簡単に作成するための関数と、ツリーを変更する関数（「追加」、「追加」、「前」、「後」、...）、およびクラスを追加/削除する機能を提供します。

例：

 var dom = libretki.visual.dom;
 dom.before（elem、dom.html.a（{href： "http：// ..."、className： "outlink"}、[
   dom.html.img（{src： "..."}）、「リンクコンテンツ」
 ]）;

アニメーション（libretki.visual.animation）

要素のアニメーション。ツールバー用に作成されたため、現時点ではアニメーション「fadeIn」、「fadeOut」、「moveY」のみが含まれています。

例：

 libretki.visual.animation.fadeOut（elem、{time：500}）;

一般ツールバー（libretki.visual.toolbar）

各スクリプトが独自のボタンを追加できる共通のツールバー。ページの左上隅にある小さな正方形にカーソルを合わせると、ツールバーが表示されます。シンプルなボタンとトグルボタンを追加できます。見た目はあまり良くありません。私はデザイナーではありません。何らかの勾配をつけてコードに突入しました。

toolbar.png - image uploaded to Picamatic

例：

 //ボタンを追加します。
 libretki.toolbar.onShow（関数（ツールバー）{
   var group = new libretki.toolbar.ButtonsGroup（ "Example"）;
   var button = new libretki.toolbar.CommandButton（ "Alert"、 "data：image / svg + xml; base64、..."、function（）{
    アラート（「例」）;
   }）;
   group.addButton（ボタン）;
   toolbar.addGroup（グループ）;
 }）;

サービス

サービスは、XDMメッセージをリッスンして応答するコードです。あらゆるページから高度なuserjsを安全に使用するには、サービスが必要です。

裸のJavaScriptでは、サービスと使用するコードは次のようになります。

サービス：

 if（location.href == 'http://0.0.0.0/'）{
   window.addEventListener（ 'message'、function（ev）{
     var fields = ev.data.split（ '|'）;
     if（フィールド[0] == 'set'）{
       // ...
       ev.source.postMessage（ 'ok'）;
     } else if（フィールド[0] == 'get'）{
       // ...
       ev.source.postMessage（値）;
     }
   }、true）;
 }

使用法：

 window.addEventListener（ 'message'、function（ev）{
   //サービスからの応答を処理します。
 }）;
 var frame = document.createElement（ 'iframe'）;
 frame.onload = function（）{
   //ここで、サービスを使用できます。
   frame.contentWindow.postMessage（ 'get | key'）;
 };
 frame.src = 'http://0.0.0.0/';
 frame.style = 'display：none;';
 document.documentElement.appendChild（フレーム）;

ご覧のとおり、このケースは面倒であり、いくつかの欠点があります。

文字列のみを渡すことができるため、それらを手動で解析する必要があります
各サービスは、異なるアドレスを持つ個別のフレームをアップロードする必要があります。
複数のサービスを使用する場合、応答を処理することは困難です。
おそらく同じアドレスで複数のフレームを誤って作成する可能性があります。
サービスはページからスクリプトにアクセスできる場合がありますが、これは安全ではありません。

Libretkiはこれらすべての困難を処理します。

クロスドメインメッセージング（libretki.xdm）

XDMの安全で便利な使用。同じアドレスで複数のサービスを整理し、名前で区別することができます。オブジェクトを渡すためにJSONによって使用されます。ページからサービススクリプトへのアクセスを禁止します。

クラス：

サーバー-メッセージを受け入れ、それらに応答できます。
クライアント-メッセージを送信しますが、返信を受信できません。
チャネル-1人のクライアントとサーバーは、メッセージを送信し、それらへの返信を受信できます。
SeqClient、SeqServerはそれぞれChannelとServerに類似していますが、前者がリクエストとレスポンスの対応を追跡しない場合、これらはリクエストに対する回答を知らせます。欠落メッセージも検出します。

サーバー/チャンネルのサービス例：

 if（location.href == 'http://0.0.0.0/'）{
  新しいサーバー（「habrahabr.example」、関数（msg、クライアント）{
    スイッチ（msg.command）{
    ケース「get」：
       client.post（{コマンド： 'get'、キー：msg.key、値：get_value（msg.key）}）;
      休憩;
    ケース「セット」：
       set_value（msg.key、msg.value）;
       client.post（{コマンド： 'set'、キー：msg.key、成功：true}）;
      休憩;
     }
   }
 }

顧客：

 load_page（ 'http://0.0.0.0/'、関数（win）{
   var channel = new Channel（win、 'habrahabr.example'、function（msg）{
    スイッチ（msg.command）{
       case 'get'：データ[msg.key] = msg.value; 休憩;
       case 'set'：if（msg.success）written [msg.key] = true; 休憩;
     }
   }
   channel.post（{コマンド： 'get'、キー： 'some'}）;
   channel.post（{コマンド： 'set'、キー： 'some'、値： 'bla'}）;
 }）;

SeqServer / SeqClientでも同じ：

 new SeqServer（ 'habrahabr.example'、function（msg）{
    スイッチ（msg.command）{
    ケース「get」：
       return get_value（msg.key）;
    ケース「セット」：
       set_value（msg.key、msg.value）;
       trueを返します。
     }
 }）;

 load_page（ 'http://0.0.0.0/'、関数（win）{
   var client = new SeqClient（win、 'habrahabr.example'）;
   client.post（{コマンド： 'get'、キー： 'some'}、関数（結果）{
    データ['some'] =結果;
   }）;
   client.post（{コマンド： 'set'、キー： 'some'、値： 'bla'}、関数（結果）{
     if（result）written ['some'] = true;
   }）;
 }）;

リモートプロシージャコール（libretki.xdm.rpc）

サービスを作成するタスクを簡素化します。書くだけ：

 unsafe.libretki.xdm.rpc.service（ 'http://0.0.0.0/'、 'habrahabr.example'、{
   get：function（key）{return data [key];  }、
  設定：function（key、value）{data [key] = value;  }、
 }）;

使用：

 var ex = unsafe .__ services.habrahabr.example;
 //戻り値の結果が返されるだけでなく、呼び出す必要がある関数
 //結果を取得します。 これは、例外が渡されることを保証するためです。
 ex.get（ 'key'、function（res）{data ['key'] = res（）;}）;
 ex.set（ 'key'、 'value'、function（res）{res（）; written ['key'] = true;}）;

初期バージョンと比較して大幅に少ないコードですよね？これで、便利なサービスの作成を開始できます。

共有データウェアハウス（libretki.xdm.storage）

任意のページからアクセス可能なデータを保存できます。「http://0.0.0.0/」ページにCookieを保存することにより実装されます。

例：

 var storage = unsafe.__services.libretki.storage;
 storage.set（ 'habrahabr_auth'、{login： 'login'、password： '123qwe'}）;
 storage.get（ 'habrahabr_auth'、function（res）{
   var data = res（）;
  ログイン（data.login、data.password）;
 }）;

クリップボード（libretki.xdm.clipboard）

Javaが必要です。

例：

 var clipboard = unsafe .__ services.libretki.clipboard;
 clipboard.set（ 'text'）;
 clipboard.get（function（res）{
   var text = res（）;
   alert（ 'クリップボードの内容：' +テキスト）;
 }）;

ファイルシステム（libretki.xdm.io.file）へのアクセス

ファイルとフォルダーの作成、削除、名前変更、フォルダーのスキャンができます。 Javaが必要です。

例：

 var file = unsafe .__ services.libretki.io.file;
 file.exists（ '/ some / path'、function（res）{alert（res（））;}）;
 //最大10行を読み取ります。
 file.readLines（ '/ another / path'、 'utf-8'、10、function（res）{
   var lines = res（）;
 }）;

クロスドメインXMLHttpRequest（libretki.xmlhttprequest）

XMLHttpRequestの使用例は示しません。すべては通常通りで、「libretki.xmlhttprequest.XMLHttpRequest」を使用する必要があるだけです。

XMLHttpRequestエミュレーションは、他の人のコードの適応を簡素化するために作成されています。 userjsをゼロから作成する場合、「フェッチ」関数の方がはるかに便利です。

 libretki.xmlhttprequest.fetch（ 'http：//some.url/path'、{
  ユーザー名： 'user'、
  メソッド： 'POST'、コンテンツ： 'blabla'、
   onOpened：関数（）{}、
   onDone：関数（ステータス、ヘッダー、応答）{}、
   onError：関数（）{}、
 }）;

キャッシュのみを表示モードで画像をダウンロードするためのスクリプトのセット（libretki.imaginate）

この一連のスクリプトは、個別のアーカイブにパッケージ化されています。個々のスクリプトについては説明しませんが、キャッシュされた画像を表示するモードで作業するときに役立つとしか言えません。チャンネルが狭いため、常にこのモードを使用します。個々の画像をさまざまな方法でアップロードできます。マウスをその上に置いたり、キーを押したり、画面上の領域を選択したり、テキストを強調表示したり、ウィンドウに表示されている画像を読み込んだりします。

ツール

libretki / toolsフォルダーには、HTMLページとして実行されるいくつかのツールがあります。

カスタマイズ（libretki / tools / libretki.settings.html）

スクリプトパラメータを設定するためのインターフェイス。

必要なパラメータを設定し、「保存」ボタンをクリックすることを忘れないでください。 Javaがなくても動作しますが、設定ファイルを手動で保存する必要があります。

settings.png - Picamatic - upload your images

スクリプト管理（libretki / tools / libretki.scripts.html）

オンとオフを切り替えることができるインストール済みのuserjsのリスト。ブラウザのサイドバーとして使用できます。 Javaが必要です。

scripts.png - Picamatic - upload your images

ボタンの作成（libretki / tools / libretki.bookmarklets.html）

さまざまなチームのブックマークレットの作成を自動化します。コマンドを選択し、引数を設定し、コマンドに名前を付けて、結果のリンクをツールバーまたはブックマークにドラッグします。

bookmarklets.png - image uploaded to Picamatic

入手先

libretki.kriomant.netでlibretkiをダウンロードできます。

設置

インストールはまだ非常に複雑です：

アーカイブの内容をユーザースクリプトフォルダーに解凍します。
ファイルアクセスまたはクリップボードを使用する場合は、Javaをインストールします。
Javaポリシーファイルの場所を見つけ（「opera：config＃Java | SecurityPolicy」）、どこかにコピーし、 libretki / opera.policyのサンプルを使用して権限を追加し、設定で新しいファイルへのパスを指定します。
libretki / tools / libretki.settings.htmlを開いて[保存]をクリックします。これは、XDMに使用される一意のコードを生成するために必要です

例

「libretki / examples」フォルダには、いくつかの機能の使用例があります。一部の機能はページ上のスクリプトから特別に隠されているため、対応するサンプルを機能させるには、スクリプトフォルダーにファイル「libretki / examples / libretki.allow-unsafe.js」を配置する必要があります。

計画

執筆中は、WindowsおよびLinux用のインストーラーです。

問題

最初のフィードバックが必要です。彼はOperaFanでlibretkiを発表しました。多くの人がダウンロードしたようですが、 レビューは1つも残していません。あなたの態度を表現してください：

それは役に立たないものです。
インストールが難しすぎる。
重すぎる。
ドキュメントの欠如;
別の。

第二に、 libretkiにはロゴとウェブサイトのデザインが必要です。私自身はこのビジネスに足を踏み入れていません。場所とドメインはすでに存在しています。

UserJS。 パート4：libretkiフレームワーク

コア