Open Chrome/Chromium from command line and send javascript action to chrome/chromium console

Question

On Ubuntu 18.04 , I'm trying to create an alert to remember me to track my worklog everyday.

Create sh file put_hours.sh

#!/bin/bash

zenity \
    --forms \
    --title="TIME TRACKING" \
    --text="Please track your time" \
    --add-entry="¿ What have you done ?" \
    --ok-label "GO"

case $? in
    0) chromium-browser http://site/that/I/want/to/open
    ;;
    1)
   ;;
esac

Make it executable

chmod +x put_hours.sh

Run it

./put_hours.sh

As you can see this works but my question is:

How can I send a javascript command to the chrome/chromium console in the opened url?

I need to run a simple command like:

document.getElementById("my_id").value = 'nothing to do'

the value to send as string 'nothing to do' should be the value passed by the window opened by Zenity.

I use Zenity to make the window but I'm not forced to use this software.

Answer 1

First, Get the value

Zenity will print the amount of hours the user entered to stdout after you click GO .

The first step would be to modify your script to capture the result and assign it to a variable:

hours=$(zenity \
    --forms \
    --title="TIME TRACKING" \
    --text="Please track your time" \
    --add-entry="¿ What have you done ?" \
    --ok-label "GO")

---

Options

What you can do next depends on the type of access and control you have over the website. Some options are hacks.

For each of the following options pass the $hours variable to the website as a query param, eg:

case $? in
    0) chromium-browser "http://site/that/I/want/to/open?hours=$hours"

Option A - Website supports populating the field by query param

You may get lucky and the above will just work. If it doesn't work first go you may have the wrong query param name.

To determine what the correct query param name is, examine the source code and how it behaves when you submit the form manually.

Eg https://www.google.com?q=pre+populate+the+search+bar

Option B - Write a user script to do it in the browser

Use the Tamper Monkey tool to run a user script when the page loads, that pulls the query param and sets the field.

// ==UserScript==
// @name         Set Hours
// @match        http://site/that/I/want/to/open*
// ==/UserScript==
(function() {
    var urlParams = new URLSearchParams(window.location.search); // Reference: https://stackoverflow.com/a/47566165/241294

    if (urlParams.has('hours')) {
        var hours = urlParams.get('hours');

        document.getElementById("my_id").value = hours;

        alert('well done ad3luc you did ' + hours + ' hours today');
    }
})();

A downside of course is now the logic is in two places, your script and in your the browser.

It is a hack, but I do like the separation of concerns. The script sends the value to the website. The website, sets the field value.

You would also need to ensure the param you choose doesn't clash with any of the existing query params the site uses.

Option C - Modify the website

Change the website's source code so that it supports Option A.