Я пишу расширение Chrome, которое будет выполняться, когда пользователь просматривает панорамное изображение в Картах Google, и у меня возникают проблемы с передачей движений колес в Карты Google.Я хочу, чтобы это распространялось, чтобы пользователь мог увеличить изображение из моего расширения.
Я пытался полностью игнорировать событие в моем сценарии внедрения, но это не работает.Затем я попытался зафиксировать событие, а затем передать его через JavaScript, но это тоже не сработало. Событие всегда фиксируется, но его передача не работает.
Когда курсор выходит за рамки моего Расширения (потому что мышь быстро перемещается за пределы моего «div»)событие колеса передается в Google Maps правильно.
Я пробовал захват с
expandingBox = document.createElement('div');
expandingBox.addEventListener('wheel', mouseWheel, false);
и
expandingBox = document.createElement('div');
expandingBox.addEventListener('wheel', mouseWheel, true);
и
$(document).addEventListener('wheel', mouseWheel, true);
и
$(document).addEventListener('wheel', mouseWheel, false);
Функция захвата очень проста:
function mouseWheel( e ) {
// alert("Wheel was moved");
$(document).trigger("wheel", e);
return true;
}
Я также пробовал с «return false», с «$ (window)» и «$».(window.parent) 'в функции mouseWheel.Все безрезультатно.
Можно ли вообще сделать то, что я пытаюсь сделать?
Минимальная реализация, которая проверяет эту функциональность:
manifest.json
{
"name": "Wheel Test",
"version": "0.3",
"description": "See if I can read and pass a Wheel event",
"background": {
"persistent": false,
"scripts": ["background.js", "jquery-3.3.1.min.js" ]
},
"default_locale": "en",
"permissions": [
"activeTab",
"notifications",
"<all_urls>"
],
"browser_action":{
"default_icon": {
"20": "data/icons/QRC-Ninja-20.png"
}
},
"manifest_version": 2
}
background.js
"use strict";
function injectCode( tab ){
chrome.tabs.insertCSS(tab.id, { file: 'data/inject/inject.css' } );
chrome.tabs.executeScript(tab.id , { file: 'jquery-3.3.1.min.js'});
chrome.tabs.executeScript(tab.id , { file: 'data/inject/inject.js'});
}
// Listen for a click on the icon. On that click, inject the necessary code and get going.
chrome.browserAction.onClicked.addListener( injectCode );
inject.css
.expanding-box {
box-sizing: border-box;
position: fixed;
z-index: 2147483645;
border: 0px solid;
width: 0;
height: 0;
}
inject.js
'use strict';
var guide = window.guide;
var expandingBox = null;
try {
guide.remove();
} catch (e) {}
guide = (function () {
function stop(){
guide.remove();
}
function mouseWheel( e ) {
// alert("Wheel was moved");
var result = expandingBox.dispatchEvent( e );
return true;
}
return {
install: function () {
expandingBox = document.createElement('div');
expandingBox.setAttribute('class', 'expanding-box');
expandingBox.setAttribute('id', 'expandingBox');
document.body.appendChild(expandingBox);
//
// Initial position is the top left of the window
//
expandingBox.style.borderWidth = '4px';
expandingBox.style.borderColor = 'red';
expandingBox.style.width = '200px';
expandingBox.style.height = '200px';
expandingBox.addEventListener('wheel', mouseWheel, false);
document.addEventListener('mouseup', stop, false);
},
remove: function () {
expandingBox.removeEventListener('wheel', mouseWheel, false);
document.removeEventListener('mouseup', stop, false);
if (expandingBox && expandingBox.parentNode) {
expandingBox.parentNode.removeChild(expandingBox);
}
}
};
})();
guide.install();
По вопросу "Что такоецель?"Целью кода является анализ интересующей области, на которую указывает пользователь.
Заранее спасибо за вашу помощь!
Тем временем я обнаружил, что fotijr предоставил ответ, который работал.