当网页滚动Chrome扩展程序

Question

我有chrome扩展程序，可以捕获网页中所选部分的屏幕截图。我的代码运行良好。问题是，当我向下滚动我通过捕获屏幕快照获取的网页图像时，它与我在content.js中可调整大小的div的边框不匹配。它比需要的少。有人可以帮我吗？

background.js

function createCanvas(canvasWidth, canvasHeight) {
    var canvas = document.createElement("canvas");
     canvas.width = canvasWidth;
     canvas.height = canvasHeight;

    return canvas;
}


function createScreenshot(callback) {

    chrome.tabs.captureVisibleTab(null, { format: "png" }, callback);
}
 createScreenshot(function (dataURL) {
            createImage(dataURL);
        });
        return true;
        }
    });

content.js

chrome.runtime.onMessage.addListener(
  function({message}, sender, sendResponse) {
    if (message === "click"){



      let html = `<strong></strong><span id="start"></span>
                  <strong></strong><span id="end"></span>
                  <div id="selection"></div>
                  `;

       document.body.innerHTML += html;


      var start = {};
      var end = {};
      var isSelecting = false;

    $(window)
     .on('mousedown', function($event) {
        isSelecting = true;
        $('#selection').removeClass('complete');
        start.x = $event.pageX;
        start.y = $event.pageY;
        $('#start').text('(' + start.x + ',' + start.y + ')');

        $('#selection').css({
            left: start.x,
            top: start.y
        });
    })
    .on('mousemove', function($event) {
        if (!isSelecting) { return; }

        end.x = $event.pageX;
        end.y = $event.pageY;


        $('#selection').css({
            left: start.x < end.x ? start.x : end.x,
            top: start.y < end.y ? start.y : end.y,
            width: Math.abs(start.x - end.x),
            height: Math.abs(start.y - end.y)
        });
    })

    .on('mouseup', function($event) {
      var width = Math.abs(start.x - end.x);
      var height  = Math.abs(start.y - end.y);
      var xa = start.x < end.x ? start.x : end.x;
      var ya =  start.y < end.y ? start.y : end.y;
      console.log(ya)
       chrome.runtime.sendMessage({
                        handle: 'background',
                        points: [width, height, xa, ya]
                    });
        isSelecting = false;
        $('#selection').addClass('complete');

        $('#end').text('(' + end.x + ',' + end.y + ')');

    });           
  }

});