在 Chrome 中使用 Greasemonkey/用戶腳本單擊頁面上的按鈕

Question

我將在這里盡可能地詳細說明，因為我遇到了一些最終沒有解決的解決方案。 請記住，我不知道 Javascript 。 我知道基本的 HTML 和 CSS。 我沒有任何實際的編程背景，但我正在嘗試通過研究這樣的基本任務來一點一點地學習。 請像我是個白痴一樣跟我說話。 我在這篇文章中使用的任何術語都是我在研究這個特定問題時學到的。 我正在將此用戶腳本作為個人項目編寫並與一些朋友分享。

我正在嘗試做的事情。

我正在嘗試為 Chrome/Greasemonkey（Chrome 是我的目標瀏覽器）編寫一個用戶腳本，它將單擊戰地 3 服務器瀏覽器上的刷新按鈕。 對於那些不知道的人，《戰地風雲 3》使用一個網站和一個用於 VOIP 的瀏覽器插件，並通過服務器瀏覽器實際啟動游戲。 它的大部分似乎是相當簡單的 HTML 排列在表格中。

這個想法是，當查看已滿服務器的主頁時，腳本將每三秒左右單擊一次刷新按鈕，直到頁面報告服務器上有一個開放點，然后停止刷新循環並單擊加入服務器按鈕. 我已經運行了腳本的一部分，它輪詢服務器當前和最大玩家，然后將它們分配給自己的變量。

在這一點上，我正在嘗試單擊以在控制台中工作，因此我實際上可以在我的腳本中使用它並且我的運氣為零。

我試圖操縱的代碼。

這是從 Chrome 開發工具中拉出的我嘗試單擊的按鈕的 div：

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

（該鏈接不是靜態的。它是指向特定服務器頁面的鏈接）

我試過的。

要真正找到我使用的按鈕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);
  }, 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);

這只是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);
  }, 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);

這兩個都在 Chrome 和 Firebug 控制台中返回Undefined 。

那么，有人會幫助我為這個腳本創建一些代碼來按下這個頁面上的刷新按鈕嗎？

Answer 1

所以，你在正確的軌道上，但你一直在抓住DIV而不是A標簽。 要單擊“按鈕”（在本例中為鏈接），您必須單擊實際鏈接，因為它不會向下傳遞到DIV包含的元素。

document.querySelector('serverguide-header-refresh-button a')

應該讓你點擊A元素。 來自 jQuery $('serverguide-header-refresh-button a').click(); 應該管用。

Answer 2

筆記：

1. jQuery .click()在最初不是通過 jQuery 設置的點擊事件上不能可靠地工作。

2. 您需要創建正確的事件類型； createEvent('Events')不是這樣的。

3. 正如 Jim Deville 指出的那樣，鏈接偽按鈕未被選中。

4. 為此（到目前為止）您不需要 jQuery。

5. 確保為測試代碼靜態加載“刷新”控件，如問題所示。 如果它是 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);