29

UI ウィジェットを埋め込むために顧客がサイトに含める JavaScript ライブラリに取り組んでいます。コードに変更を加えることなく、顧客のサイトでライブ ライブラリの開発バージョンをテストする方法が必要です。これにより、問題のデバッグと新しいバージョンのテストが容易になります。

これを行うには、スクリプト インクルードを変​​更して開発サーバーを指すようにし、ページで呼び出される load() メソッドをオーバーライドして、リモート呼び出しを行うときにどのサーバーを指すかを指定する追加のパラメーターを追加する必要があります。

Chrome 拡張機能を使用して JS をページに追加できるようですが、ロードされる前にページを変更する方法がわかりません。欠けているものはありますか、それともクロム拡張機能はこの種のことを許可されていませんか?

4

6 に答える 6

36

私はかなりの量の Chrome 拡張機能の開発を行ってきましたが、ブラウザーによってレンダリングされる前にページ ソースを編集する方法はないと思います。最も近い 2 つのオプションは次のとおりです。

  • コンテンツ スクリプトを使用すると、追加の JavaScript および CSS ファイルを追加できます。これらのスクリプトを使用して、ページ内の既存のスクリプト タグを書き換えることができるかもしれませんが、DOM を介してスクリプトに表示されるスクリプト タグは既に読み込まれているか、読み込まれているため、うまくいくかどうかはわかりません。

  • WebRequestを使用すると HTTP リクエストを乗っ取ることができるため、拡張機能でlibrary.jsへlibrary_dev.js。

サイトが www.mysite.com で、スクリプトを /js ディレクトリに保持しているとします。

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        if( details.url == "http://www.mysite.com/js/library.js" )
            return {redirectUrl: "http://www.mysite.com/js/library_dev.js" };
    },
    {urls: ["*://www.mysite.com/*.js"]},
    ["blocking"]);

HTML ソースは同じように見えますが、取り込まれたドキュメントは<script src="library.js"></script>別のファイルになります。これはあなたが望むものを達成するはずです。

于 2012-04-09T17:00:10.493 に答える
4

WebRequest APIを使用してページに読み込まれる前にコンテンツを変更する方法を次に示します。これには、onBeforeRequest リスナーが戻る前に、コンテンツを文字列変数にロードする必要があります。この例は JavaScript 用ですが、他の種類のコンテンツでも同様に機能するはずです。

chrome.webRequest.onBeforeRequest.addListener(
    function (details) {
        var javascriptCode = loadSynchronously(details.url);
        // modify javascriptCode here
        return { redirectUrl: "data:text/javascript," 
                             + encodeURIComponent(javascriptCode) };
    },
    { urls: ["*://*.example.com/*.js"] },
    ["blocking"]);

loadSynchronously() は、通常の XMLHttpRequest で実装できます。同期読み込みはイベント ループをブロックし、XMLHttpRequest では推奨されませんが、残念ながらこのソリューションで回避することは困難です。

于 2016-02-12T21:53:06.823 に答える
1

Opera ブラウザで利用できるフックに興味があるかもしれません。Opera には *非常に強力なフックがあり、ユーザー JavaScript ファイル (単一ファイルのもので、作成と展開が非常に簡単) と拡張機能の両方で使用できます。これらのいくつかは次のとおりです。

外部スクリプトの前:

このイベントは、src 属性を持つスクリプト要素が検出されたときに発生します。src 属性を含む要素を調べたり、変更したり、より具体的なイベント リスナーを追加したり、読み込みを完全にキャンセルしたりできます。

良いトリックの 1 つは、読み込みをキャンセルし、AJAX 呼び出しで外部スクリプトを読み込み、テキスト置換を実行してから、スクリプト タグとして、または eval を使用して Web ページに再挿入することです。

window.opera.defineMagicVariable:

このメソッドは、通常のスクリプトで定義されたグローバル変数をオーバーライドするために、ユーザー JavaScript で使用できます。オーバーライドされるグローバル名への参照は、提供された getter および setter 関数を呼び出します。

window.opera.defineMagicFunction:

このメソッドは、ユーザー JavaScript で使用して、通常のスクリプトで定義されたグローバル関数をオーバーライドできます。オーバーライドされるグローバル名の呼び出しは、提供された実装を呼び出します。

*: Opera は最近 Webkit エンジンに切り替え、これらのフックの一部を削除したようです。ただし、Opera 12 は Web サイトでダウンロードできます。

于 2013-12-22T11:48:34.773 に答える
0

アイデアはありましたが、試しませんでしたが、理論的にはうまくいきました。

ドキュメントが読み込まれる前に実行された content_script を実行し、ServiceWorker を登録して、ページの要求されたファイル コンテンツをリアルタイムで置き換えます。(ServiceWorker は、DOM から直接開始されたものを含め、ページ内のすべての要求をインターセプトできます)

于 2020-05-14T03:58:54.643 に答える