How to automate the code that requires the click of a button in javascript in chrome developer tools

Question

I have this game environment made by third party. It has a play button such that every time I click on it certain things happen and a bunch of json data is generated. Right now I am trying to collect this data but I don't want to have to keep clicking the play button. I looked up How to auto click an input button, but I believe the solutions provided there all work only at the start of loading the window. My problem is that I only have the ability to modify the javascript from the chrome developer tools and I don't believe that the changes that are made in the source's tab persists once I refresh the page (I could be wrong but based on what I have observed so far that's what's happening). How can I get the code below to run multiple times (say just 10 for now) without clicking the Start Game button while only modifying the code in the chrome developer tools?

console.log("loading...")

$(() => {

  $("#start-game-btn").click(event => {
    console.log("start-game")
    $("#errors").text("")
    event.preventDefault()
    const height = parseInt($("#height").val())
    const width = parseInt($("#width").val())
    const food = parseInt($("#food").val())
    let MaxTurnsToNextFoodSpawn = 0
    if ($("#food-spawn-chance").val()) {
      MaxTurnsToNextFoodSpawn = parseInt($("#food-spawn-chance").val())
    }
    const snakes = []

    $(".snake-group").each(function() {
      const url = $(".snake-url", $(this)).val()
      if (!url) {
        return
      }
      snakes.push({
        name: $(".snake-name", $(this)).val(),
        url
      })
    })
    if (snakes.length === 0) {
      $("#errors").text("No snakes available")
    }
    fetch("http://localhost:3005/games", {
      method: "POST",
      body: JSON.stringify({
        width,
        height,
        food,
        MaxTurnsToNextFoodSpawn,
        "snakes": snakes,
      })
    }).then(resp => resp.json())
      .then(json => {
        const id = json.ID
        fetch(`http://localhost:3005/games/${id}/start`, {
          method: "POST"
        }).then(_ => {
          $("#board").attr("src", `http://localhost:3009?engine=http://localhost:3005&game=${id}`)
        }).catch(err => $("#errors").text(err))
      })
      .catch(err => $("#errors").text(err))
  })
  console.log("ready!")
})

I tried doing a while loop at the start like,

$(() => {
  var count = 0
  while(count <= 10) {
    count++
    console.log("start-game")
    $("#errors").text("")
    event.preventDefault()
    .........

but nothing changed.

Also I have no experience with jQuery and bare minimum knowledge on javascript so do bear with me. Thanks in advance.

MiK · Answer 1 · 2020-02-12T08:29:42.113

Assuming the play button has a unique ID or class that makes it reliably selectable on every refresh, you should use a browser addon such as TamperMonkey to inject your JS into the target site. Use the Browser document event DOMContentLoaded to start your script at the appropriate time.

(function() {
    document.addEventListener('DOMContentLoaded', (event) => {
       /*your code here*/
    });
})();

How to automate the code that requires the click of a button in javascript in chrome developer tools

1 Answers1