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

【问题标题】：Chrome extension content script - .click() not workingChrome 扩展内容脚本 - .click() 不起作用
【发布时间】：2017-04-09 21:37:26
【问题描述】：

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

我要点击的元素：

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

manifest.json - 内容脚本部分

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

page_wheel.js

function spinWheel() {
    var spinButton = $("#startButton");

    if (spinButton.text() === "Már pörgettél") {
        return "wait";
    }

    else if (spinButton.text() === "Megpörgetem") {
        console.log("spin is available");

        spinButton.on("click",
            function () {
                console.log("inside click action");

                var popupLogin = $("#popup_login");
                console.log(popupLogin);

                if (popupLogin === null) {
                    return "login"
                } else {
                    return "success";
                }
            }
        );

        spinButton.trigger("click");
    }
}

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

spinButton.on("click", function (){...});

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

$("#startButton").click()
document.getElementById("startButton").click();

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

有人知道问题出在哪里吗？：/

【问题讨论】：

另外，我刚刚测试了是否有任何冲突的扩展。禁用除当前此之外的所有内容。还是没有成功
我可能发现了问题所在——内容脚本的执行环境。 developer.chrome.com/extensions/…
我没有在您的内容脚本中看到对 .click() 的调用。
该元素可以在页面加载完成后由页面代码动态添加。在这种情况下，使用 setInterval 检查或 MutationObserver。

标签： javascript jquery google-chrome-extension

【解决方案1】：

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

我的脚本如下所示：

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

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

【讨论】：

【解决方案2】：

解决方案 1：您可以在任何 HTML 标签上使用 onclick 属性，并使用它来调用 JavaScript 函数。

<a onclick="sayHi('Hi')"> Click me </a>
<script>function sayHi(message){alert(message)}</script>

解决方案2：使用jquery点击事件函数。

记住，jquery click 应该只在目标 html 之后调用元素生成。点击调用将不起作用，否则

$(css_selector).click();

【讨论】：