Я работаю над расширением, в котором можно использовать контекстное меню для применения форматирования к текстовому полю.
Один из форматов, которые я хочу применить, - это цвет, и я предпочел бы просто запустить встроенную палитру цветов Firefox, но она блокируется всплывающими окнами.
Если блокировка всплывающих окон отключена, этот пункт меню работает нормально, он применяет код цвета к выделенному тексту, но при включенном блокировщике всплывающих окон он блокируется.
Я знаю, что при прямом срабатывании от клика пользователя блокировщик всплывающих окон отключается, и пользователь действительно щелкает напрямую, но не по цветовой кнопке на веб-странице, а по элементу контекстного меню.
Итак, как я могу осуществлять преднамеренный и утвердительный щелчок пользователя в меню на протяжении всего процесса?
Код ниже:
В фоновом скрипте при вызове меню аргумент передается в скрипт контента:
browser.menus.onClicked.addListener((info, tab, defaultMenu) => {
if (info.menuItemId.substring(0, 6) == "bbcwbx") {
console.log(info.menuItemId);
for (i = 0; i < defMenu.length; i++) {
if (info.menuItemId == defMenu[i].menuId) {
var clickArg = defMenu[i].menuArg;
browser.tabs.sendMessage(tab.id, clickArg); // send argument to content script for execution
}
}
}
});
Сценарий содержимого прослушивает его и передает аргумент другой функции для оценки аргумента:
var clickedElement = null;
document.addEventListener("mousedown", function(event) {
//right click
if (event.button == 2) {
clickedElement = event.target;
}
}, true);
browser.runtime.onMessage.addListener(function(commandString, sendResponse) {
CommandParse(commandString);
});
Синтаксический анализатор команд представляет собой серию условных выражений, с битом о цвете:
async function CommandParse(argString) {
………
if (argString.includes("fontcol")) { // Invoke font color wheel
argString = getColor(argString);
}
clickedElement.value = firsttext + argString + lasttext;
}
Запускается всплывающее окно:
function getColor(mkColor) {
var input = document.createElement("input"); //create element
input.setAttribute('type', 'color'); //is a color input button
input.setAttribute('id','zzzcolor'); //it's ID is zzzcolor
document.body.appendChild(input); // append to body
document.getElementById("zzzcolor").click(); // click on element
}