Chrome DevTools拡張のpreprocessorScriptの代替手段はありますか？

Question

JavascriptのカスタムプロファイラをChrome DevTools Extensionとして作成したいとします。そうするためには、ウェブサイトのすべてのJavaScriptコードを計測しなければなりません（ASTの解析、フックの挿入、新しいソースの生成）。これはchrome.devtools.inspectedWindow.reload()とそのパラメータpreprocessorScriptをここで説明すると簡単に可能であったはずです：https://developer.chrome.com/extensions/devtools_inspectedWindow。

残念ながら、この機能は誰も使用していないため削除されました（https://bugs.chromium.org/p/chromium/issues/detail?id=438626）。

Chrome拡張機能で同じことを達成できる方法は他にもありますか？入ってくるJavascriptソースを変更したバージョンに置き換えることができる他の方法はありますか？この質問はChrome拡張機能（他のブラウザへの拡張機能）に固有のものですが、別のルート（例：専用アプリ）を使用する前に、これを最後の手段として尋ねています。

Answer 1

Chromeデバッギングプロトコルを使用します。

最初に、DOMDebugger.setInstrumentationBreakpointとeventName: "scriptFirstStatement"をパラメータとして使用して、各スクリプトの最初のステートメントにブレークポイントを追加します。

第2に、デバッガドメインには、scriptParsedというイベントがあります。それを聞いて、もし呼び出されたらDebugger.setScriptSourceを使ってソースを変更してください。

最後に、setScriptSourceのソースファイルを編集した後で、毎回Debugger.resumeと呼び出してください。半擬似コードで

例：

// Prevent code being executed 
cdp.sendCommand("DOMDebugger.setInstrumentationBreakpoint", { 
    eventName: "scriptFirstStatement" 
}); 

// Enable Debugger domain to receive its events 
cdp.sendCommand("Debugger.enable"); 

cdp.addListener("message", (event, method, params) => { 
    // Script is ready to be edited 
    if (method === "Debugger.scriptParsed") { 
    cdp.sendCommand("Debugger.setScriptSource", { 
     scriptId: params.scriptId, 
     scriptSource: `console.log("edited script ${params.url}");` 
    }, (err, msg) => { 
     // After editing, resume code execution. 
     cdg.sendCommand("Debugger.resume"); 
    });   
    } 
}); 

上記実装が理想的ではありません。おそらく、ブレークポイントイベントを聞いて、関連付けられたイベントデータを使ってスクリプトに行き、スクリプトを編集してから再開するべきです。 scriptParsedを聞いてデバッガを再開することは、一緒にはならない2つのことです。問題が発生する可能性があります。それはより単純な例になります。

Answer 2

HTTPでは、chrome.webRequest APIを使用して、JSコードのリクエストを処理済みのJavaScriptコードを含むデータURLにリダイレクトできます。

ただし、これはインラインスクリプトタグでは機能しません。データURLは安全でないとみなされるため、HTTPSでも動作しません。また、データURLはChromeでは2MBを超えることはできませんので、大きなJSファイルにリダイレクトすることはできません。

各スクリプトの実行順序が重要でない場合は、スクリプトの要求を取り消し、後でそのスクリプトの内容のメッセージをページに送信できます。これはHTTPS上で動作するようになります。

両方の問題に対処するために、HTMLページ自体をデータURLにリダイレクトして、より多くの制御を得ることができます。それはしかし、いくつかの負の影響を持っています

1. URLが
2. は必ずスタイルシート/画像URLが正しいURLに行くように追加しますか<base>タグを更新する必要があるデータのURLに固定されているため、ページをリロードすることはできません
データのURL

ない、これが動作するかどうか確認の上、クッキー/認証（これは固定することが可能かどうかわからない）

にのlocalStorageはサポートを必要としない

ブレークのAjaxリクエスト：＃1を固定するため、＃4 yのChrome拡張機能内でHTMLページを設定し、データURLではなくベースページとして使用することを検討することができます。

もう1つ考えても問題ありません：chrome.debuggerを使用してソースコードを変更してください。