13

マウスオーバーで特定のDOM要素を強調表示して保存できるようになるまで、多かれ少なかれ要素の検査を実行する機能が必要です。これは、GoogleChromeデベロッパーツールの[要素]タブまたはFireBugの[HTML]タブと同義です。

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

できればChromeでこれを実行したいと思います。リスナーを追加する方法はありますか？chrome.contextMenus.createで遊んだのですが、これではページにアクセスしたり、現在の場所を教えたりすることはできません。そこにあるselectedTextは、後日同じDOM要素に戻るのに役に立ちません。

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

注：ページにアクセスできません。つまり、拡張機能としてこれを行う理由は、私が管理しているページではなく、サードパーティのページを検査しているためです。

4

3 に答える 3

7

It's quite a big job. With jQuery you can style the element that the mouse is hovered over like this: 

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

To get the xPath expresson is something you would have to make yourself, though you might find firebug's implementation of it a useful resource.

于 2011-06-30T16:20:31.023 に答える
2

始めるための非常に基本的な実装は次のとおりです。

注入された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-30T16:22:15.120 に答える
1

You can always use FireBug Lite for something like this. It is a JavaScript version, and thus, it doesn't matter what browser you're using it from. Just include this script in the HTML <head>:

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

Hope that helps.

于 2011-06-30T17:49:41.740 に答える