Chrome拡張機能の要素を確認しますか？

マウスオーバーで特定のDOM要素をハイライトして保存できるようにするには、inspect要素以上を多かれ少なかれ実行する必要があります。これは、Google Chromeデベロッパーツールの[Elements]タブやFireBugの[HTML]タブと同義です。Chrome拡張機能の要素を確認しますか？

これらのツールのようなDOMやペインを表示する必要はありません。私はXPathオブジェクトやDOMオブジェクトが何であるかを知り、Webページ自体でそのようなツールを強調表示するだけで済みます。これらのツールは現在、選択されたときに要素の上に陰影を表示します。

私はこれをChromeで行うことをおすすめします。リスナーを追加する方法はありますか？私はchrome.contextMenus.createで演奏しましたが、これはあなたにページへのアクセスを与えたり、あなたがどこにいるかを教えてくれません。そこのselectedTextは、後で同じDOM要素に戻っても役に立たない。

マウスがどこにあるかを知るAPIを知っている人はいますか？

注：私はページにアクセスできません。つまり、これが拡張機能である理由は、私が管理しているものではなく、サードパーティのページを調べているからです。

出典

2011-06-30 Mech Software

入力していただきありがとうございましたが、私がメモしていないことを編集します。ページを制御できません。これが拡張機能としてこれを行う理由です。私はページ自体でこれを行うことはできません。私は内容を管理していないので、 "火かき棒"のように動作する必要があります。 –

これはページ自体で行うことができます。これはコンテンツスクリプトと呼ばれます：http://code.google.com/chrome/extensions/dev/content_scripts.html – serg

非常に大きな仕事です。あなたはfirebug's implementation of it有益なリソースを見つけるかもしれませんが、XPathなどをexpressonはあなた自身をしなければならない何かである

$("*").not("body, html").hover(function(e) { 
    $(this).css("border", "1px solid #000"); 
    e.stopPropagation(); 
}, function(e) { 
    $(this).css("border", "0px"); 
    e.stopPropagation(); 
});

を取得するには：jQueryのを使用すると、マウスがこのようにホバーされていることを要素のスタイルを設定することができます。ここで

出典

2011-06-30 16:20:31 bcoughlan

はあなたが始めるために非常に基本的な実装である：（マニフェストを通じて）

注入CSS：

.el-selection {outline: 1px solid blue;}

注入コンテンツスクリプト：

$(window).mouseenter(function(event) { 
    $(event.target).addClass("el-selection"); 
}); 

$(window).mouseleave(function(event) { 
    $(event.target).removeClass("el-selection"); 
}); 

$(window).click(function(event) { 
    console.log("selected: ", event.target); 
    return false; 
});

出典

2011-06-30 16:22:15 serg

あなたはいつものFirebug Liteは使用することができますこのようなもののために。これはJavaScriptのバージョンなので、どのブラウザーから使用しているかは関係ありません。このスクリプトをHTMLに含めるには<head>：

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

希望するものがあります。

出典

2011-06-30 17:49:41

Chrome拡張機能の要素を確認しますか？

答えて

関連する問題