'inject javascript on a program (Slack) with --remote-debugger-port open

I can open Slack from Terminal using this command:

open -a /Applications/Slack.app/Contents/MacOS/Slack --args "--remote-debugging-port=9222"

I can then open Chrome and go to chrome://inspect/#devices, see my app on the list, click "inspect", and inject JavaScript from the Console.

The question is, how can I do the same programmatically via CLI or cURL to reach port 9222?

TL;DR:

I have tried to call curl i localhost:9222 and this does indeed reach the port with this page:

HTTP/1.1 200 OK
X-Frame-Options:DENY
Content-Length:1485
Content-Type:text/html; charset=UTF-8

<html>
<head>
<title>Content shell remote debugging</title>
<style>
</style>

<script>
function onLoad() {
  var tabs_list_request = new XMLHttpRequest();
  tabs_list_request.open("GET", "/json/list?t=" + new Date().getTime(), true);
  tabs_list_request.onreadystatechange = onReady;
  tabs_list_request.send();
}

function onReady() {
  if(this.readyState == 4 && this.status == 200) {
    if(this.response != null)
      var responseJSON = JSON.parse(this.response);
      for (var i = 0; i < responseJSON.length; ++i)
        appendItem(responseJSON[i]);
  }
}

function appendItem(item_object) {
  var frontend_ref;
  if (item_object.devtoolsFrontendUrl) {
    frontend_ref = document.createElement("a");
    frontend_ref.href = item_object.devtoolsFrontendUrl;
    frontend_ref.title = item_object.title;
  } else {
    frontend_ref = document.createElement("div");
    frontend_ref.title = "The tab already has active debugging session";
  }

  var text = document.createElement("div");
  if (item_object.title)
    text.innerText = item_object.title;
  else
    text.innerText = "(untitled tab)";
  text.style.cssText = "background-image:url(" + item_object.faviconUrl + ")";
  frontend_ref.appendChild(text);

  var item = document.createElement("p");
  item.appendChild(frontend_ref);

  document.getElementById("items").appendChild(item);
}
</script>
</head>
<body onload='onLoad()'>
  <div id='caption'>Inspectable WebContents</div>
  <div id='items'></div>
</body>
</html>

From that AJAX request I can derive this link:

http://localhost:9222/devtools/inspector.html?ws=localhost:9222/devtools/page/DBFD8076D61F935064C59203FB7F89E6

The remaining question is, how to do the equivalent of manually pasting javascript code into the Console? Thanks for your assistance



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source