Chrome拡張機能の要素をDevToolsと同じように強調表示するにはどうすればよいですか？

Question

私は、メニューに「id」属性を持つウェブページのすべての要素をリストするChrome拡張機能の作成に興味があります。次に、ユーザーがメニュー内の要素をクリックすると、Webページ上の対応する要素が強調表示されます。

右クリックして調べると、Chrome devtoolsが要素を強調表示していました。私は、DevToolsからアクセス可能なハイライトAPIがあるのか​​不思議です。そうでない場合、devtoolsのやり方と似た要素をどのように強調表示しますか？

Answer 1

Chrome APIでは、このようなハイライトにアクセスできません。オーバーレイでそれを自分で実装する必要があります。

たとえば、uBlock Originのelement pickerなどを調べることで、通常どのように実行されているかを調べることができます。要するに、その方法は、とりわけgetBoundingClientRect()の要素を選択してSVGオーバーレイを作成する。

Answer 2

Chrome DevToolsが使用している正確なAPIを使用できます。 debugger APIでhighlightQuadまたはhighlightNodeに電話する必要があります。あなたは色を指定することもできますし、ハイライトが正しくレンダリングされ、ウェブサイトに干渉しないようにすることができます（Xanの示唆したように「オーバーレイ」ノードを注入することは保証しません）。一方、正しく動作するのは大変手間がかかり、ユーザーはExtensionとDevToolsの両方を同時に使用することはできません（デバッガAPI接続は1つしかありません）。 This codeを起動する必要があります。