Chrome 扩展内容脚本 - .click() 不起作用

Question

我已经尝试了几个小时，但无法正常工作。我编写了一个内容脚本，该脚本在用户加载页面时执行。当我尝试单击一个元素时，click() 方法根本不起作用。我尝试了多种方法，它总是可以在控制台上运行，但在加载页面时却不行。

\n\n

我要点击的元素：

\n\n

<a id="startButton" href="javascript: popupHand.showPopup(\'popupLoginV2\',\'loginHand.init()\',\'\',\'\',true);" class="buttonGreen1 buttonSize1">Megp\xc3\xb6rgetem</a>\n

\n\n

manifest.json - 内容脚本部分

\n\n

{\n  "content_scripts": [\n    {\n      "matches": ["*://*.bonuszbrigad.hu/bonuszkerek"],\n      "js": ["plugin/jquery-3.2.0.min.js", "js/page_wheel.js"],\n      "run_at": "document_end"\n    }\n  ],\n}  \n

\n\n

page_wheel.js

\n\n

function spinWheel() {\n    var spinButton = $("#startButton");\n\n    if (spinButton.text() === "M\xc3\xa1r p\xc3\xb6rgett\xc3\xa9l") {\n        return "wait";\n    }\n\n    else if (spinButton.text() === "Megp\xc3\xb6rgetem") {\n        console.log("spin is available");\n\n        spinButton.on("click",\n            function () {\n                console.log("inside click action");\n\n                var popupLogin = $("#popup_login");\n                console.log(popupLogin);\n\n                if (popupLogin === null) {\n                    return "login"\n                } else {\n                    return "success";\n                }\n            }\n        );\n\n        spinButton.trigger("click");\n    }\n}\n

\n\n

当我加载页面时，控制台日志显示它已成功进入

\n\n

\n
• spinButton.on("点击", function (){...});
\n

\n\n

但网站上没有任何实际点击。当我在控制台中测试 click 方法时，以下两种解决方案都有效：

\n\n

\n
• $("#startButton").click()
\n
• document.getElementById("startButton").click();
\n

\n\n

我还看到相同的控制台日志 - 当从控制台执行 click 方法时 - 但这样它实际上可以工作。

\n\n

有谁知道问题是什么？:/

\n

Answer 1

我遇到这个问题了。就我而言，我意识到 HTML DOM 和脚本加载是同步的。因此，当您调用单击事件时，它仍然是已完成加载的。因此，我添加了调用单击事件的脚本，并且window.load它起作用了。

我的脚本如下所示：

window.onload = function () {
  const btn = document.getElementById('J_LinkBuy')

  if (btn !== null) {
    btn.dispatchEvent(new MouseEvent('click'))
  }
}