2

ドキュメントとサンプルからこれを理解しようとしてきましたが、まだ十分ではありません (または、何か不足している可能性があります)。

devtools パネルを作成したいのですが、コンテンツ スクリプトのように、検査対象のウィンドウの dom にアクセスしたいです。現在、私のオプションは、検査されたウィンドウのコンテキストで何かを評価することですが、それを避けることができれば、実際にはそうしません。devtools ページ/スクリプトと一緒にコンテンツ スクリプトを使用することはできますが、期待どおりに機能していないようです。バックグラウンド ページを使用してメッセージを送信することはできません。私の devtools ページと私のコンテンツ スクリプト。

また、これらのクールな dom サブツリーを要素パネルやコンソールで表示するように、素晴らしいホバー/ハイライト機能と共に表示する方法はありますか?

アップデート

そのため、検査対象のウィンドウのタブ ID を転送し、それをバックグラウンド ページで引き出すことで、パネル ページからコンテンツ スクリプトに接続できます。だから私はこれをしなければならない

// devtools.js
chrome.extension.sendMessage({ 
    'to': chrome.devtools.inspectedWindow.tabId, 
    'message': 'whatever'
});

と

//background.js
chrome.extension.onMessage.addListener(function(message,sender,callback) {
    message.from = sender.tab.id;
    chrome.tabs.sendMessage(message.to, message, callback);
});

そして、私の content.js スクリプトはメッセージをうまく受け取ります...そして、送信者のタブIDがコンテンツスクリプトから物事を送り返すために機能すると思いましたが、そうではありません。バックグラウンド スクリプトはメッセージを取得しますが、devtools ページはメッセージを取得しません。

devtools 拡張機能も適切にデバッグする方法を理解するのに少し苦労しています。コンテンツ スクリプトはページのコンソールにログを記録でき、バックグラウンド スクリプトは拡張機能ページから検査できるバックグラウンド ページにログを記録できますが、devtools ページはどこにログを記録しますか?

4

2 に答える 2

0

私が最初にテストしていたコードは、Chrome 26 以降で正常に動作するようになりました...動作するはずだったのに、その時点では動作しなかったことを行っていたため、表示されていた動作が発生しませんでした。

@Konrad Dzwinel のコメントは、devtools のデバッグに非常に役立ち、このメソッドが実際に機能するはずであり、実際に機能するという事実に注目しました。ありがとう！

于 2013-04-28T18:31:19.563 に答える
0

DevTools 拡張機能のデバッグに苦労している可能性がある人のために、2016 年 (および Chrome 54 以降) から簡単に更新します。

カスタム DevTools ペインを正常に追加し、そこに Angular2 アプリを表示した後、拡張機能がページの DevTools コンソールとソースに接続されていないことがわかりました。上記のようにページ DevTools ウィンドウ F12 を押しても機能しません (私のシステムに問題があるのが Chrome 自体であるかどうかはわかりません)。ページ DevTools ウィンドウは閉じられます。しかし、DevTools ウィンドウのページで Ctl+Alt+I を押すと、カスタム ペイン アプリケーション ソースとコンソールが接続されたもう 1 つの DevTools ウィンドウが開きました。

于 2016-11-28T17:44:28.940 に答える