Question

感谢您的阅读。我已经解决了这个问题一个月了，却找不到类似的问题。该扩展应该为开发人员模拟眼动追踪仿真的界面。该应用程序可离线运行，但在chrome扩展开发者浏览器页面中运行该应用程序时，我始终遇到标题错误。该应用程序应该模拟Tobii眼动追踪软件的基本UI，包括改变颜色和抖动的光标。在JS页面的第17和19行触发该错误。任何帮助表示赞赏。

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://*/*"]
 }]
}

再次感谢。

未被捕获的TypeError：无法在Chrome扩展程序中读取null的属性“ classList”

0 个答案: