Снимок экрана с javascript рисованием изображения и расширением chrome

Question

Я хочу создать расширение chrome, которое захватывает скриншот предпочтительной части веб-страницы. У меня есть изменяемый размер div с тем, как я выбираю часть веб-страницы и где будет снимать скриншот этой части в контенте. js и в фоновом режиме. js Я создал холст, который получает изображение, используя drawimage. Я хочу поместить параметры изменяемого размера div в параметры drawImage, а затем получить изображение детали, которое помещается в изменяемый размер div. Мой код работает отдельно. Когда я установил любое заданное число c в параметрах drawImage, он делает снимок экрана, который находится в этих параметрах, но вместе он не работает. Я хочу, чтобы он сделал снимок экрана, помещенный в изменяемые параметры div, которые выбрал пользователь. Как я могу получить параметры x и y из скрипта содержимого и установить их в параметрах drawImage в фоновом скрипте? Или вы можете предложить мне другой способ сделать это?

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)
      // Listen for selection
     .on('mousedown', function($event) {

        isSelecting = true;
        $('#selection').removeClass('complete');
         startx =   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) {
        // Ignore if we're not selecing
        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) {

        isSelecting = false;
        $('#selection').addClass('complete');
        // Display data in UI
        $('#end').text('(' + end.x + ',' + end.y + ')');
        chrome.runtime.sendMessage({ chromeAction: "screenshot"})
    });           
  }

});

background. js

chrome.browserAction.onClicked.addListener(function (){
 chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {message: "click"})

});
})




function createImage(dataURL) {
    var canvas = createCanvas(500, 500);
    var context = canvas.getContext('2d');
    var croppedImage = new Image();

    croppedImage.onload = function() {


        context.drawImage(croppedImage, 10, 23, 300, 300, 0, 0, 500, 500);

        console.log(canvas.toDataURL());
    };
    croppedImage.src = dataURL; 
}


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);
}


chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if (request.chromeAction === "screenshot") {
        createScreenshot(function (dataURL) {
            createImage(dataURL);
        });
        return true;
    }
});