私は、とりわけ、クロム devtools の要素パネルで要素にフォーカスできるようにするクロム拡張機能を開発しようとしています。
今日これを機能させるために髪を引っ張ってきましたが、これまでのところ運がありません.
必要なものを解読するための鍵の一部がここにあると思います
eval() メソッドと chrome.tabs.executeScript() メソッドの主な違いは次のとおりです。
- eval() メソッドは、評価されるコードに分離された世界を使用しないため、検査されたウィンドウの JavaScript 状態にコードからアクセスできます。検査対象ページの JavaScript 状態へのアクセスが必要な場合は、このメソッドを使用します。
- 評価されるコードの実行コンテキストには、開発者ツール コンソール API が含まれます。たとえば、コードでは inspect() と $0 を使用できます。
- 評価されたコードは、拡張コールバックに渡される値を返す場合があります。返される値は、有効な JSON オブジェクトでなければなりません (プリミティブな JavaScript 型と、他の JSON オブジェクトへの非循環参照のみが含まれる場合があります)。検査されたページから受け取ったデータを処理するときは、特に注意してください — 実行コンテキストは基本的に検査されたページによって制御されます。悪意のあるページは、拡張機能に返されるデータに影響を与える可能性があります。
しかし、これが機能するためにメッセージを送信したり、コマンドを実行したりする正しい場所を見つけることができません。次のように繰り返し言われます。
'undefined' のイベント ハンドラーのエラー: $ が定義されていません/ftDev.js:16:7 at chrome.Event.dispatchToListener (event_bindings:387:21) at chrome.Event.dispatch_ (event_bindings:373:27) at chrome.Event.dispatch (event_bindings:393:17) at miscellaneous_bindings: 166:35 で chrome.Event.dispatchToListener (event_bindings:387:21) で chrome.Event.dispatch_ (event_bindings:373:27) で chrome.Event.dispatch (event_bindings:393:17) で Object.chromeHidden.Port.dispatchOnMessage (miscellaneous_bindings:254:22) event_bindings:377 chrome.Event.dispatch_
$() メソッドではなく、Chrome コンソールの inspect() メソッドを使用するのが理想的です。
マニフェスト.json
{
"name": "XXXXX Ad and Spotlight Debugger",
"version": "0.1",
"manifest_version": 2,
"description": "A tool to help you identify and debug XXXXXX ads and spotlights in Chrome",
"devtools_page": "ftDev.html",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "XXXXXX Debug Tool"
},
"background": {
"persistent": false,
"page": "background.html",
"js": ["background.js"]
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["getFTContent.js"],
"all_frames": true
}],
"permissions": ["tabs","cookies","<all_urls>","devtools"]
}
次に、popup.js、background.js、および devtools.js ファイルに同様のコードがあり、基本的には次のようになります。
processMsg: function(request, sender, sendResponse) {
switch(request.type) {
case "inspect":
$(request.msg);
sendResponse(request.msg + "successfully inspected");
break;
default:
break;
}
} /*other cases removed for sake of brevity*/
実行すると、上記のエラーが発生します。間違ったコンテキストでコマンドを実行しようとしていると確信していますが、それを適用する方法がわかりません。popup.js ファイルで、以下のように $ メソッドも実行しようとしました
chrome.tabs.executeScript(tabId, {code: 'function(){$("#htmlID");}'}, function(){});
必要に応じてコードをさらに提供できますが、これで問題はほぼ解決したと思います。