在 Chrome 中使用 Greasemonkey/用户脚本单击页面上的按钮 [英] Clicking a button on a page using a Greasemonkey/userscript in Chrome

查看：34 发布时间：2021/12/29 12:51:13 javascript automation dom-events greasemonkey userscripts

本文介绍了在 Chrome 中使用 Greasemonkey/用户脚本单击页面上的按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我将在这里尽可能地详细说明，因为我遇到了一些最终没有解决的解决方案.请记住，我不懂 Javascript.我知道基本的 HTML 和 CSS.我没有任何实际的编程背景，但我试图通过研究这样的基本任务来一点一点地学习.请像我是个白痴一样跟我说话.我在这篇文章中使用的任何术语都是我在研究这个特定问题时学到的.我正在将此用户脚本作为个人项目编写并与一些朋友分享.

我正在尝试做什么.

我正在尝试为 Chrome/Greasemonkey(Chrome 是我的目标浏览器)编写一个用户脚本，该脚本将点击战地 3 服务器浏览器上的刷新按钮.对于那些不知道的人，战地 3 使用了一个网站和一个用于 VOIP 的浏览器插件，并通过服务器浏览器实际启动游戏.大部分内容似乎是相当简单的 HTML 排列在表格中.

这个想法是，当查看已满服务器的主页时，脚本将每三秒左右点击一次Refresh按钮，直到页面报告服务器上有一个开放点，然后停止刷新循环并单击加入服务器按钮.我已经运行了脚本的一部分，用于轮询服务器当前和最大玩家数，然后将它们分配给自己的变量.

此时，我正在尝试在控制台中单击以使其工作，因此我实际上可以将其用于我的脚本中并且我的运气为零.

我试图操纵的代码.

这是从 Chrome 开发工具中拉出的我尝试单击的按钮的 div:


<div type="reset" class="common-button-medium-grey"><p style="位置:相对；"><a href="/bf3/servers/show/c7088bdc-2806-4758-bf93-2106792b34d8/">刷新</a></p>

(该链接不是静态的.它是指向特定服务器页面的链接)

我的尝试.

要真正找到我使用的按钮 getElementsByClassName.它没有唯一的 ID，但该类对于此特定页面上的元素是唯一的，因此 getElementsByClassName("serverguide-header-refresh-button")[0] 每次都拉出正确的 div.它让脚本在按钮上执行任何实际操作，这就是问题所在.

document.getElementsByClassName("serverguide-header-refresh-button")[0].click();

我现在意识到这不起作用，因为它不是传统的提交按钮.我不明白这里标准的细节，但我知道它不支持 .click() 方法.

function addJQuery(callback) {var script = document.createElement("script");script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");script.addEventListener('load', function() {var script = document.createElement("script");script.textContent = "(" + callback.toString() + ")();";document.body.appendChild(script);}， 错误的);document.body.appendChild(script);}//这个用户脚本的内容函数主(){unsafeWindow.jQuery('.serverguide-header-refresh-button')[0].click();}//加载jQuery并执行main函数添加JQuery(主)；

这只是包裹在一些代码中的unsafeWindow.jQuery('.serverguide-header-refresh-button').click(); 为用户脚本加载jQuery.这是我在其他地方学到的一点，但被告知它只有在页面上加载了 jQuery 时才有效.我觉得值得一试.这是其中之一我不知道我在做什么在黑暗中拍摄，但没有用.我在下面用我捡到的另一段 jQuery 代码尝试了同样的事情:

function addJQuery(callback) {var script = document.createElement("script");script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");script.addEventListener('load', function() {var script = document.createElement("script");script.textContent = "(" + callback.toString() + ")();";document.body.appendChild(script);}， 错误的);document.body.appendChild(script);}//这个用户脚本的内容函数主(){var evObj = document.createEvent('事件');evObj.initEvent("点击", true, false);document.getElementsByClassName('serverguide-header-refresh-button')[0].dispatchEvent(evObj);}//加载jQuery并执行main函数添加JQuery(主)；

这两个都在 Chrome 和 Firebug 控制台中返回 Undefined.

那么，有没有好心人帮我为这个脚本创建一些代码来按下这个页面上的刷新按钮?

解决方案

注意:

jQuery .click() 在最初不是通过 jQuery 设置的点击事件上不能可靠地工作.
您需要创建正确类型的事件；createEvent('Events') 不是这样的.
正如 Jim Deville 指出的那样，链接伪按钮未被选中.
你不需要 jQuery(到目前为止).
确保为测试代码静态加载刷新"控件，如问题所示.如果是 AJAX，则点击尝试可能会触发得太快.

综合起来，下面的代码应该可以工作.但请注意，某些网站(如某些 Google 应用)使用时髦的、状态敏感的设计——这需要一系列事件.

var refreshBtn = document.querySelector (div.serverguide-header-refresh-button div[type='reset'] a");var clickEvent = document.createEvent('MouseEvents');clickEvent.initEvent('click', true, true);refreshBtn.dispatchEvent(clickEvent);

I'm going to be as absolutely verbose here as possible as I've run into a few solutions that didn't end up panning out. Please keep in mind that I don't know Javascript. I know basic HTML and CSS. I don't have any actual programming background but I'm trying to learn bit by bit by researching basic tasks like this. Please talk to me like I'm an idiot. Any lingo I throw around in this post I learned while researching this specific issue. I'm writing this userscript as a personal project and to share with some friends.

What I'm trying to do.

I'm trying to write a userscript for Chrome/Greasemonkey (Chrome is my target browser) that will click the Refresh button on the Battlefield 3 server browser. For those of you that don't know, Battlefield 3 uses a web site paired with a browser plugin for VOIP and actually launching the game via a server browser. The bulk of it seems to be fairly straight forward HTML arranged in tables.

The idea is that when viewing the main page for a server that is full, the script will click the Refresh button every three seconds or so until the page reports an open spot on the server, then stop the refresh loop and click the join server button. I've already got the part of the script running that polls the server current and maximum players then assigns them to their own variables.

At this point I'm trying to get a click to work in the console so I can actually put it to some use in my script and am having zero luck.

The code I'm trying to manipulate.

This is the div for the button that I'm trying to click pulled from the Chrome dev tools:

<div class="serverguide-header-refresh-button alternate show"> 
<div type="reset" class="common-button-medium-grey">
<p style="position: relative;">
<a href="/bf3/servers/show/c7088bdc-2806-4758-bf93-2106792b34d8/">Refresh </a>
</p>
</div>
</div>

(That link is not static. It's a link to a specific server page)

What I've tried.

To actually find the button I'm using getElementsByClassName. It doesn't have a unique ID but the class is unique to that element on this particular page so getElementsByClassName("serverguide-header-refresh-button")[0] is pulling the proper div each time. It's getting the script to perform any actual action on the button that's the problem.

document.getElementsByClassName("serverguide-header-refresh-button")[0].click();

I now realize this didn't work because it's not a conventional submit button. I don't understand the specifics of the standard here but I get that it doesn't support the .click() method.

function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

// the guts of this userscript
function main() {
  unsafeWindow.jQuery('.serverguide-header-refresh-button')[0].click();
}

// load jQuery and execute the main function
addJQuery(main);

This is simply unsafeWindow.jQuery('.serverguide-header-refresh-button').click(); wrapped in some code to load jQuery for userscripts. It was a bit I picked up elsewhere but was told it would only work if jQuery was loaded on the page. I figured it was worth a try. This is one of those I have no idea what I'm doing shots in the dark and it didn't work. I tried the same thing below with another snippet of jQuery code I picked up:

function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

// the guts of this userscript
function main() {
   var evObj = document.createEvent('Events');
      evObj.initEvent("click", true, false);
      document.getElementsByClassName('serverguide-header-refresh-button')[0].dispatchEvent(evObj);
}

    // load jQuery and execute the main function
addJQuery(main);

Both of these return Undefined in the Chrome and Firebug consoles.

So, would anyone be so kind as to help me create a bit of code for this script to press the Refresh button on this page?

解决方案

Note:

jQuery .click() does not work reliably on click events that were not set via jQuery in the first place.
You need to create the right kind of event; createEvent('Events') is not the way.
As Jim Deville pointed out, the link pseudo-button was not being selected.
You do not need jQuery for this (so far).
Make sure that the "Refresh" control is loaded statically for the test code as shown in the question. If it's AJAXed in, the click attempt may fire too soon.

Putting that all together, the following code should work. But beware that some sites (like certain Google apps) use funky, state-sensitive designs -- which require a sequence of events.

var refreshBtn = document.querySelector (
    "div.serverguide-header-refresh-button div[type='reset'] a"
);
var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent ('click', true, true);
refreshBtn.dispatchEvent (clickEvent);

这篇关于在 Chrome 中使用 Greasemonkey/用户脚本单击页面上的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

在 Chrome 中使用 Greasemonkey/用户脚本单击页面上的按钮 [英] Clicking a button on a page using a Greasemonkey/userscript in Chrome

问题描述

我正在尝试做什么.

我试图操纵的代码.

我的尝试.

What I'm trying to do.

The code I'm trying to manipulate.

What I've tried.

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

在 Chrome 中使用 Greasemonkey/用户脚本单击页面上的按钮 [英] Clicking a button on a page using a Greasemonkey/userscript in Chrome

问题描述

我正在尝试做什么.

我试图操纵的代码.

我的尝试.

What I'm trying to do.

The code I'm trying to manipulate.

What I've tried.

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭