JavaScript simulate a mouse click not working (Chrome extension)

Question

I'm trying to simulate a mouse click on a website's object in google chrome extension.

content.js:

function simulatedClickXY(target, x, y) {
  var event = new MouseEvent("click", {
    clientX: x + 5,
    clientY: y + 5,
    bubbles: false
  });
  var el = document.elementFromPoint(x + 5, y + 5);
  target.dispatchEvent(event);
}

var cards = document.body.querySelectorAll("div[class^=card][class$=bottom]");
simulatedClickXY(cards[max_idx], card_left, card_top);

Also tried:

function simulatedClick(target) {
  var event = new MouseEvent("click", {
    view: window,
    bubbles: false,
    cancelable: false
  });
  target.dispatchEvent(event);
}

var cards = document.body.querySelectorAll("div[class^=card][class$=bottom]");
simulatedClick(cards[max_idx]);

The webpage's relevant snippet:

<div
  class="card c10 up bottom"
  style="left: 469.5px; top: 525px; z-index: 430; width: 69px; height: 94px;"
>
  <div class="facedown"> </div>
  <div class="faceup"></div>
</div>;

The code only works on buttons:

<div id="passCardsContainer" style="display: block;">
    <div id="passCards" class="left"></div>
</div>