ドキュメントとサンプルからこれを理解しようとしてきましたが、まだ十分ではありません (または、何か不足している可能性があります)。
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 ページはどこにログを記録しますか?