为什么我的 Chrome 扩展程序无法单击 Google 文档中的 'New Comment' 按钮？

Question

直到最近，我的 Chrome 扩展才能够通过内容脚本找到并以编程方式单击 Google 文档中突出显示文本后出现的 'new comment' 按钮（在编辑中模式）。

这是突出显示时出现的按钮：

<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>

我的代码仍然是 'sees' 这个元素 - 如果我愿意，我可以把它变成红色。

但是我用来创建 'Click' 的 Click 处理程序不再起作用。这是简单的js：

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

Google 文档（对此元素）的更改导致我的程序化点击失败？

提前感谢您的任何 guidance/help！

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

为什么我的 Chrome 扩展程序无法单击 Google 文档中的 'New Comment' 按钮？

Why can't my Chrome Extension click the 'New Comment' button in Google Docs?

javascript

google-docs

google-chrome-extension