спасибо за чтение.Я взломал эту проблему в течение месяца и не смог найти подобную проблему.Предполагается, что это расширение имитирует интерфейс симуляции слежения за глазами для разработчиков.Приложение работает в автономном режиме, но я продолжаю получать ошибку заголовка при запуске его на странице браузера разработчика расширений Chrome.Предполагается, что приложение имитирует базовый интерфейс программного обеспечения Tobii Eetracking, включая курсор, который меняет цвет и дрожит.Ошибка возникает в строках 17 и 19 на странице JS.Любая помощь приветствуется.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src='jquery-3.4.1.min.js'></script>
</head>
<body>
<img src="tnb.png" class="center">
<div id ="mousePos">
<svg width="100%" height="100%" border="1px solid black" preserveAspectRatio="xMidYMin">
<circle cx="50%" cy="50%" r="40" fill="#0000ff99" id="bluecircle" />
</svg>
</div>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: auto;
}
#mousePos {
position: fixed;
top: 100px;
left: 100px;
height: 100px;
width: 100px;
}
#bluecircle {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
margin: auto;
text-align: center;
}
img.center {
position: -webkit-sticky;
position: sticky;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
}
* {
cursor: none;
}
.shake-animation {
animation: shake 0.5s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
}
</style>
<script src="background.js"> </script>
<script src='jquery-3.4.1.min.js'></script>
</body>
</html>
Страница JS
$(document).bind('mousemove', function (e) {
$('#mousePos').css({
top: e.pageY - $("#mousePos").height() / 2, // just minus by half the height
left: e.pageX - $("#mousePos").width() / 2 // just minus by half the width
});
});
var Saccade;
var Dwell;
document.onmousemove = function () {
clearTimeout(Saccade);
clearTimeout(Dwell);
Saccade = setTimeout(
function () {
document.getElementById('mousePos').classList.add('shake-animation');
}, 50)
document.getElementById('mousePos').classList.remove('shake-animation');
console.log("pleh");
Dwell = setTimeout(
function () {
var x = document.getElementById("bluecircle");
x.style.fill = "#c4354c99";
}, 1000)
var x = document.getElementById("bluecircle");
x.style.fill = "#0000ff99";
}
manifest.json
{
"name": "plugin name",
"version": "0",
"description": "What do I do as an extension",
"background": {"page": "background.html"},
"manifest_version": 2,
"browser_action": {
"name": "Manipulate DOM"
},
"content_scripts": [ {
"js": [ "jquery-3.4.1.min.js", "background.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]
}
Еще раз спасибо.