Проверить элемент для расширения Chrome?

Мне нужна способность более или менее выполнять элемент проверки или больше, чтобы точка могла выделять и сохранять отдельные элементы DOM при наведении курсора мыши. Это синоним вкладки "Элементы" инструментов разработчика Google Chrome или вкладки "HTML" в FireBug.

Мне не нужно показывать DOM или панель, подобную этим инструментам. Мне просто нужно знать, что такое объект XPATH или DOM, и затем иметь возможность выделить это (как эти инструменты) на самой веб-странице. Эти инструменты в настоящее время отображают затенение над элементами при их выборе.

Я хочу сделать это в Chrome. Есть ли способ добавить слушателя? Я играл с chrome.contextMenus.create, но это не дает вам доступа к странице или не говорит вам, где вы находитесь. Выбранный текст в нем бесполезен, чтобы вернуться позже к тому же элементу DOM.

Кто-нибудь знает API, который позволяет вам узнать, где находится мышь?

Примечание. У меня нет доступа к странице. то есть причина этого в качестве расширения заключается в том, что я проверяю стороннюю страницу, а не тот, который у меня есть.

Ответы

Ответ 1

Это довольно большая работа. С помощью jQuery вы можете стилизовать элемент, в котором мышь зависает так:

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

Чтобы получить xpath expresson - это то, что вам нужно было бы сделать сами, хотя вы можете найти firebug реализацию этого полезного ресурса.

Ответ 2

Вот вам очень простая реализация:

Введенный css (через манифест):

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

Инъекционный контент script:

$(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;
});

Ответ 3

Вы всегда можете использовать FireBug Lite для чего-то подобного. Это версия JavaScript, и, следовательно, не имеет значения, с какого браузера вы ее используете. Просто включите этот script в HTML <head>:

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

Надеюсь, что это поможет.