Плагин с тулбаром для Chrome

[lazKod]

Здравствуйте. Возникла необходимость создания инструмента, который бы взаимодействовал с html и отправлял сообщения на сервер. Выбрал реализацию- расширение для браузера Chrome . И столкнулся с массой проблем:
1. Нужно создать панель инструментов с кнопками, которая показывалась бы вверху и слева у каждой страницы.
2. Скрипт должен вызывать всплывающее окно с формой, которая может взаимодействовать с контентом страницы.
---
Что я сделал, это создал content.js который добавил панели к текущему документу, но с сожалению некоторые сайты своим css и js усложняют работу с панелью. Аналогично с окном формы - там много кода, происходит конфликт с сайтом, вывел её в iframe, но из iframe нельзя обратиться к функциям content.js .

Есть советы как это можно грамотно сделать? Или придётся пилить exe приложение с компонентом браузера?

[Aetae]

Писал только для ff но думаю не велика разница.
Панель и окна следует создавать на уровне браузера, а не страниц и в единичном экземпляре. Обращаться же из вышестоящего кода к элементом текущей вкладки ничего мешает. Разве что чуток длиннее будет, например не document.querySelectorAll(".class"), а (псевдокод) getCurrentTab().window.document.querySelectorAll(".class")

[lazKod]

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

Да как раз обращаться скорее всего не так сложно, а вот как создать панель на уровне браузера- не нашёл.

А в лисе как это делается?

[Aetae]

В лисе всё представление в xul(тот же xml) - там всё элементарно, пишешь свой xul файл и он встраивается в то место куда скажешь. Можно и одним скриптом обойтись, все элементы интерфейса создаются через createElement.(для сложных - есть специальные функции)

По хрому надо гуглить.
/g chrome extension custom panel
Прошёлся по первым ссылкам, вроде ничего запредельного.

[lazKod]

По хрому надо гуглить.
/g chrome extension custom panel
Прошёлся по первым ссылкам, вроде ничего запредельного.

Спасибо. Похожее находил, но это создание панели в devtool то есть в отладчике, который вызывается через ф12. Не особенно удобно именно там иметь, хотелось встроить свою панель вверх и в бок. В принципе рассматривал как вариант, но сейчас попробую лису.

[Aetae]

lazKod, раз можно в девтулз то можно и в другое место, вестимо.

Х.з. как с этим в chrome но расширение для ff можно просто скачать, разархивировать(xpi это zip) и посмотреть как там всё устроено, потому часто задача сводится к нахождению расширения с похожим на нужный функционалом.)

[lazKod]

lazKod, раз можно в девтулз то можно и в другое место, вестимо.

Не факт. Очень даже не факт)
Да, я разбирал другие расширения- как я понял либо все создают свои html теги и ими оправляют, либо пихают iframe который непосредственно обращается с расширением. Этот способ оптимальный, хотя место под ним не освобождается и приходится добавлять margin к телу.

Теперь другая проблема встала- необходимо при клике на элемент выполнять с ним действия. Всё просто, но если неа него повесели событие click ( $('.class').click(function(location = 'new url' )) - то происходит вызов этого события и переход по ссылке. Как можно либо перехватить либо удалить все события связанные с элементом?

[Aetae]

Зависит от каждого конкретного случая. Например в приведённом можно сделать так:

$('.class').unbind('click')

Более-менее универсально можно разве что подменить функцию навешивания обработчика в самом начале загрузки страницы:

window.EventTarget.prototype.addEventListener = function(old){
    return function(event, func){
        console.log('Навешиваем событие: ' + event + ', на элемент:', this, 'с обрабочиком:', func);
        old.apply(this, arguments);       
    }    
}(window.EventTarget.prototype.addEventListener);

document.addEventListener('click', function(){alert(1)},false)

Там где стоит console.log вы, соответственно, можете делать что хотите, как с самой функцией, так и с передаваемыми параметрами.
Вообще по-хорошему вам бы исследовать как работает нативный "выбор элемента" в инструментах разработчика и, возможно, даже воспользоваться им напрямую, но тут уж всё на вашей совести.

[lazKod]

unbind и подменить функцию обработчика - пробовал, но не удалось. После долгого гугления нашёл 2 пути :
1. Это компонент http://sprymedia.co.uk/VisualEvent/demo/
Как я понял там просто находятся все функции обработки, в зависимости от js движка. Достаточно много кода и муторно вытаскивать и удалять .

2. Нашёл такую функцию getEventListeners в консоли хрома. Она возвращает список событий на элементе, у которых есть функция remove(). Идеально было бы, но так и не получилось получить доступ из моего расширения.

И вариант вроде рабочий, немного изврат но ...

mouseDown = function(e) {
 
    var obj = document.createElement('div');
    obj.id = '__chm_click';
    obj.style.cssText = 'position:fixed;top:0px;left:0px;width:100%;height:100%; background-color:red; ';

    document.body.appendChild(obj);
 
};
mouseUp = function(e) {

    var elClick = document.getElementById('__chm_click');
    elClick.parentNode.removeChild(elClick);
    

};
document.addEventListener('mousedown', mouseDown);
document.addEventListener('mouseup', mouseUp);

Тупо создаём слой при нажатии на любой элемент. Вроде пока работает.