- Откуда брать информацию о структуре интерфейса
- Контекстное меню
Ознакомившись с работой с файловой системой, буфером обмена, реестром и тому подобными вещами, можно уже делать много чего. Однако код с chrome-привилегиями может гораздо больше. И одной из таких возможностей является возможность взаимодействия с интерфейсом самого Firefox. Мы видели, что для создания меню кнопки требуются базовые знания DOM, но и все остальные элементы интерфейса браузера работают по тому же принципу, таким образом, используя те же приемы можно легко добавлять, удалять или изменять элементы интерфейса браузера по своему усмотрению. Вот этим мы сейчас и займемся.
Откуда брать информацию о структуре интерфейса
Для того, чтобы иметь возможность воздействовать на интерфейс необходимо знать его структуру, поскольку искать элементы интерфейса программно возможно только если знаешь что-то об элементе, на который собираешься воздействовать. Так откуда же все-таки черпать знания о том, как там все устроено?
Для того, чтобы сохранить документ нам доступна простая функция saveDocument, которая принимает объект документа, показывает пользователю окно сохранения файла, и сохраняет документ. Обычно она используется для сохранения HTML-документа активной страницы, но можно передать этой функции ссылку на XUL-документ и сохранить его.| JavaScript | 1
| saveDocument(document); |
|
| JavaScript | 1
| loadURI("view-source:" + document.location.href); |
|
Но такой подход не всегда дает нужный результат. Например, когда мы видим какой-то текст - те же надписи пунктов меню - разумно предположить, что в документе мы найдем menuitem у которого атрибут label будет иметь значение именно такое каким мы его видим в интерфейсе программы. Но в полученном вышеописанным способом документе текста на русском языке нет вообще. Лейблы просто имеют ссылку на ресурс, файл ресурса выбирается в зависимости от локализации. Но когда мы видим работающую программу, все эти надписи уже загружены и хотелось бы просмотреть XML-код именно того окна, которое мы видим. Для решения этой проблемы можно воспользоваться такой штукой, как XMLSerializer.| JavaScript | 1
2
3
| var serializer = new XMLSerializer();
var code = serializer.serializeToString(document);
gClipboard.write(code); |
|
Если мы немного пройдемся по коду страницы, то можно найти там элемент popupset. Внутри этого элемента есть уже, знакомые нам по меню кнопки, элементы menupopup, наполненные элементами меню. О назначении каждого такого элемента можно судить по значению атрибута id, обычно оно достаточно информативно. Например первый элемент имеет id="tabContextMenu". Нетрудно догадаться, что это контекстное меню, появляющееся в области вкладок. Нас сейчас больше интересует меню с id="contentAreaContextMenu". Как нетрудно догадаться, это контекстное меню области содержимого. В принципе, его код можно получить вышеописанным способом, если поискать menuitem с каким-нибудь значением label, которое мы видим в этом контекстном меню
| JavaScript | 1
2
3
4
| var serializer = new XMLSerializer();
var menuel = document.querySelector("menuitem[label='Исходный код страницы']").parentElement
var code = serializer.serializeToString(menuel);
gClipboard.write(code); |
|
Сейчас мы будем добавлять новый элемент в контекстное меню области содержимого. Понадобится это может в тех случаях, когда некоторые действия надо выполнить над конкретным элементом страницы и лучшим способом указать такой элемент является как раз контекстное меню. Например: некоторые сайты, предоставляют ссылки, оставленные пользователями, в виде ссылок на свою специальную страницу, где адрес конечной ссылки передается как параметр. Таким образом сайты фильтруют ссылки, предупреждая пользователя о переходе на "ненадежный сайт". Иногда предупреждения бывают ну уж очень навязчивыми, то есть возможности перейти по этой ссылке сайт не дает. Например подобным образом ведет себя вконтактик. Ссылки там даются в таком виде
Причем не нравятся вконтактику зачастую совершенно безобидные, например новостные, сайты и он туда не пускает. Вот мы и создадим меню, исправляющее ссылку.
| JavaScript | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| function addMenu()
{
var menu = document.getElementById("contentAreaContextMenu");
var item = document.createElement("menuitem");
item.setAttribute("label", "Исправить ссылку vk");
item.onclick = function (evt)
{
var ctx = menu.triggerNode;
ctx = ctx.tagName == "A" ? ctx : ctx.parentElement
var href = ctx.href;
var startHref = "https://vk.com/away.php?to=";
if (ctx.tagName == "A" && ctx.href.startsWith(startHref))
{
var startLen = startHref.length;
var url = ctx.href.substring(startLen, ctx.href.indexOf("&"));
ctx.href = decodeURIComponent(url);
}
}
item.id = "correct_vk_outer_link";
menu.appendChild(item);
}
function removeMenu()
{
var menu = document.getElementById("contentAreaContextMenu");
menu.removeChild(document.getElementById("correct_vk_outer_link"))
}
var myitem = document.getElementById("correct_vk_outer_link");
if (myitem)
{
removeMenu();
}
addMenu(); |
|
Полагаю, большая часть кода здесь понятна без пояснений, пояснить надо только два момента| JavaScript | 1
| var ctx = menu.triggerNode; |
|
| JavaScript | 1
| ctx = ctx.tagName == "A" ? ctx : ctx.parentElement |
|
Можно обработать событие menupopup, которое называется popupshowing, выполнить все необходимые проверки там и, если элемент не подходит для нашего меню, то сделать меню недоступным или даже скрытым (атрибуты disabled и hidden соответственно). Примерно так| JavaScript | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
| /*Initialization Code*/
function addMenu()
{
var menu = document.getElementById("contentAreaContextMenu");
var item = document.createElement("menuitem");
item.setAttribute("label", "Исправить ссылку vk");
item.onclick = function (evt)
{
var ctx = menu.triggerNode;
ctx = ctx.tagName == "A" ? ctx : ctx.parentElement
var startHref = "https://vk.com/away.php?to=";
if (ctx.tagName == "A" && ctx.href.startsWith(startHref))
{
var startLen = startHref.length;
var url = ctx.href.substring(startLen, ctx.href.indexOf("&"));
ctx.href = decodeURIComponent(url);
}
}
item.id = "correct_vk_outer_link";
var onPopupShowing = function (evt)
{
var corItem = document.getElementById("correct_vk_outer_link");
if (corItem)
{
var menu = document.getElementById("contentAreaContextMenu");
var ctx = menu.triggerNode;
ctx = ctx.tagName == "A" ? ctx : ctx.parentElement;
var startHref = "https://vk.com/away.php?to=";
if (ctx.tagName == "A" && ctx.href.startsWith(startHref))
{
corItem.setAttribute("hidden", "false");
}
else
{
corItem.setAttribute("hidden", "true");
}
}
}
menu.addEventListener("popupshowing", onPopupShowing, false);
menu.appendChild(item);
menu.correctVkOuterLink_OnPopupShowing = onPopupShowing;
}
function removeMenu()
{
var menu = document.getElementById("contentAreaContextMenu");
menu.removeChild(document.getElementById("correct_vk_outer_link"))
menu.removeEventListener("popupshowing", menu.correctVkOuterLink_OnPopupShowing);
}
var myitem = document.getElementById("correct_vk_outer_link");
if (myitem)
{
removeMenu();
}
addMenu(); |
|
>>
|
