Осмотреть элемент для расширения Chrome? - PullRequest
Новая
       5

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

12 голосов
/ 30 июня 2011

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

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

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

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

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

Ответы [ 3 ]

7 голосов
/ 30 июня 2011

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

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

Чтобы получить выражение xPath, вы должны сделать это сами, хотя его реализация *1005* может оказаться полезным.

2 голосов
/ 30 июня 2011

Вот очень базовая реализация, с которой можно начать:

Внедренный 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;
});
1 голос
/ 30 июня 2011

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...