4

ブラウザ拡張機能の開発を始めました。私は、拡張機能が現在のブラウザタブにJSコードを挿入できるという一般的な概念に気づきました。

私はそれが定期的に問題を引き起こさない方法に少し戸惑っています。

つまり、バージョンyのJQueryが既に含まれているページにバージョンxのJQueryを（ブラウザー拡張機能を介して）挿入した場合、どのように機能するのでしょうか。機能の競合はありません$()か？

どうしてそんなにスムーズに進むことができるのでしょうか？このような競合が発生しないようにするために開発者が採用する必要のある特定の手法はありますか、またはブラウザがすべてを処理しますか？

4

3 に答える 3

4

ほとんどnoConflict()の場合、jQuery では機能する可能性がありますが、拡張機能の場合は依然として悪い考えであり、他のほとんどのライブラリやユーティリティには適用されません。

賢明なことは、コードをまったく挿入しないことです (1 つの例外を除いて1 )。拡張機能には、必要なライブラリを含めることができ、そうすることには多くの利点があります。

  1. ページの JavaScript と競合する可能性はありません。

  2. 予告なしに変更されるページの JS に依存することはありません。拡張機能が壊れる頻度は少なくなります。

  3. ライブラリを注入するときは、外部サーバーから取得する必要があります。これにより、拡張機能が遅くなり、制御できないクラッシュに対して脆弱になります。

    拡張機能にライブラリを含めると、(a) 常に存在し、(b) 常に既知の適切なバージョンであり、(c) 遠く離れたサーバーではなく、ローカル マシンからほぼ瞬時に読み込まれます。

  4. ページの JavaScript が無効になっている場合でも、拡張機能を実行できます。

  5. 拡張機能は、ライブラリと拡張 API を同時に利用できます。


拡張機能を使えば、jQuery などのライブラリを簡単に組み込むことができます。たとえば、Chrome の場合:

  1. ライブラリ ファイルを拡張機能フォルダーにコピーします。

  2. ライブラリをファイルに追加しmanifest.jsonます。

    jQuery を組み込んだ単純なマニフェストは次のようになります。

    {
    "content_scripts": [ {
        "exclude_globs":    [  ],
        "include_globs":    [ "*" ],
        "js":               [ "jquery.min.js", "myJS.js" ],
        "matches":          [ "http://stackoverflow.com/*"
                            ]
    } ],
    "description":  "Hello world with jQuery",
    "name":         "Hello world with jQuery",
    "version":      "1"
}


このメカニズムは、Firefox やその他のブラウザーでも同様です。





1唯一の例外は? 拡張機能の場合、次の条件がすべて満たされている場合にのみ、コードを挿入します。

  1. 拡張機能は、特定の 1 つのサイトのみを対象としています。
  2. 絶対に、積極的に、ターゲット ページが作成するオブジェクト/関数を使用する必要があります。
  3. 拡張機能で機能を簡単に複製するには複雑すぎます。
  4. サイトのデザインを少し変更するたびに、拡張機能を書き直したり調整したりする必要はありません。
  5. すべてのユーザーがサイトの JavaScript を有効にしていることを確認できます。
  6. ライブラリを提供するサイトがかなり高速であり、頻繁にオフラインにならないことを確認できます。
于 2012-07-17T02:16:07.313 に答える
2

この問題の一般的な解決策は、jQuery.noConflict() を使用して jQuery を別の変数にエイリアスし、ページの と競合しないようにすること$です。

于 2012-07-16T17:47:41.377 に答える
0

jQuery には、名前空間を使用して他のもの (jQuery の別のインスタンスなど)noConflict()から jQuery を分離するために使用できる関数があります。$

名前空間の前方汚染を回避するためのより一般的なアプローチは、クロージャー内で JavaScript を実行することを検討することです。

(function () {
    // Your Code Here
})();

これにより、クロージャーの範囲内にあるものはすべて、独自のコードの外部で使用できなくなります。

于 2012-07-16T17:56:07.813 に答える