為什么我的Chrome擴展程序無法單擊Google文檔中的“新建評論”按鈕？

Question

直到最近，我的Chrome擴展程序都可以通過內容腳本找到並以編程方式單擊在Google文檔中突出顯示文本后（在“編輯”模式下）出現的“新評論”按鈕。

突出顯示以下是出現的按鈕：

<div id="docs-instant-button-bubble" class="docs-material docs-instant- 
button-bubble-transformation-ltr docs-instant-button-visible" instant- 
role="button" tabindex="-1" aria-hidden="true" aria-label="Add a instant- 
comment" data-tooltip="Add a comment" style="top: 352.8px; opacity: 1; instant- 
background-color: red;"><div class="docs-instant-button-bubble-icon-instant- 
container"><span class="docs-instant-button-bubble-icon docos-icon-img instant- 
docos-icon-img-hdpi docos-instant-icon-img docos-icon-instant-docos-ltr instant- 
docos-instant-button-bubble-icon"></span></div></div>

我的代碼仍然“看到”該元素-如果需要，我可以將其變為紅色。

但是我用來創建“點擊”的Click處理程序不再起作用。 這是簡單的js：

document.getElementById("docs-instant-button-bubble").click();

Google文檔（對此元素）進行了哪些更改，導致我的程序化點擊失敗？

預先感謝您的任何指導/幫助！

Answer 1

從這個答案 ：

嘗試使用此代碼； 它通過快速連續的mousedown，mouseup和在按鈕中心觸發的click事件模擬在元素上的鼠標左鍵單擊：

var simulateMouseEvent = function(element, eventName, coordX, coordY) {
  element.dispatchEvent(new MouseEvent(eventName, {
    view: window,
    bubbles: true,
    cancelable: true,
    clientX: coordX,
    clientY: coordY,
    button: 0
  }));
};

var theButton = document.querySelector('ul form button');

var box = theButton.getBoundingClientRect(),
    coordX = box.left + (box.right - box.left) / 2,
    coordY = box.top + (box.bottom - box.top) / 2;

simulateMouseEvent (theButton, "mousedown", coordX, coordY);
simulateMouseEvent (theButton, "mouseup", coordX, coordY);
simulateMouseEvent (theButton, "click", coordX, coordY);