ページのスクリプトを変更するためのChrome拡張機能が含まれています。JS

Question

ユーザーがUIウィジェットを埋め込むために自分のサイトに組み込んでいるjavascriptライブラリを使用しています。私は、コードを変更することなく、顧客のサイトにあるライブラリーの開発版をテストする方法を望んでいます。これにより、問題のデバッグや新しいバージョンのテストが容易になります。

これを行うには、スクリプトのインクルードをmy devサーバーをポイントするように変更し、ページで呼び出されたload（）メソッドをオーバーライドして、リモートの作成時にポイントするサーバーコール。

クロムエクステンションを使用してページにJSを追加できるようですが、ロードする前にページを変更する方法はありません。私は行方不明のものがあるのか​​、この種のことをすることが許されていないクロムエクステンションですか？

Answer 1

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

• Content scriptsあなたは余分なJavaScriptとCSSファイルにトスすることができます。これらのスクリプトを使用してページ内の既存のスクリプトタグを書き直すことは可能かもしれませんが、DOMを介してスクリプトに表示されるスクリプトタグが既にロードされているかロードされているため、うまくいかないかどうかはわかりません。

• WebRequestあなたはHTTPリクエストをハイジャックすることができますので、あなたは、拡張子がlibrary_dev.jsからlibrary.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>意志によって引き込ま今は別のファイルになります。これはあなたが望むものを達成するはずです。

Answer 2

Operaブラウザで利用できるフックに興味があるかもしれません。 Operaは以前は* very powerful hooksを使用していましたが、これはユーザーJavaScriptファイル（シングルファイルのもの、書き出しと展開が非常に簡単）と拡張機能の両方に利用できます。これらのいくつかは以下のとおりです。

BeforeExternalScript：

src属性を持つscript要素に遭遇したときに、このイベントが発生します。 src属性を含む要素を調べたり、変更したり、より特定のイベントリスナーを追加したり、ロードを完全に取り消したりすることができます。

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

window.opera.defineMagicVariable：

この方法は、通常のスクリプトで定義されたグローバル変数を上書きするユーザーJavaScriptで使用することができます。オーバーライドされるグローバル名への参照は、提供されているgetter関数とsetter関数を呼び出します。

window.opera。defineMagicFunction：

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

---

*：Operaは最近のWebkitエンジンに切り替え、そして彼らがこれらのフックの一部を削除したようです。 Opera 12をWebサイトからダウンロードすることは可能です。

Answer 3

これはChromeの拡張機能ではありませんが、Fiddlerは開発サーバーを指すようにスクリプトを変更できます（this answerはFiddlerの作成者の設定手順をご覧ください）。また、Fiddlerを使用すると、必要な追加パラメータを追加するために検索を設定して置き換えることができます。

Answer 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でdeprecatedですが、残念ながらこの解決策を避けるのは難しいです。