Full Screen Browser - with login

Help
2

Yes. That’s possible with using the scripting option.

Update 2024 The following description is mostly outdated today: Instead of creating JSON files containing your script, just add a new script configuration in the “Auto run scripts” section and paste your JavaScript code into the “JavaScript to activate on page load” text field.

But that’s really clunky: Basically you can assign a JSON asset with the following structure:

[
    [
         "http://.*foo.com/login",
         "alert('hello world')"
    ], ...
]

For every page/frame/iframe loaded, the service looks if one of the urls regexes match. If so it runs the JS part in the context of that page. It’s really challenging to debug.

Example code

As an example of what a JS snippet might look like:

(function() {
  var USERNAME = "foo", PASSWORD = "bar";
  var logged_in = false;
  function try_login() {
    if (logged_in)
      return
    
    // Set username value
    var username = document.getElementById("UserName");
    if (username.type != "text")
      return;
    username.value = USERNAME;
  
    // Set password value
    var password = document.getElementById("UserPassword");
    if (password.type != "password")
      return;
    password.value = PASSWORD;
  
    // Click the login button
    document.getElementById('loginButton').click()
    logged_in = true;
  }

  setInterval(try_login, 100);
})();

Managing your snippets

For a single snippet

Create a new empty encode.html file and paste in the following code:

<html>
  <body>
    Regex:<br/><input id='regex'><br/>
    Code:<br/><textarea id='code' rows=40 cols=80></textarea><br/>
    <button id='encode'>Encode (in the popup, select all the text and copy it into a JSON file)</button>
    <script>
      document.getElementById('encode').addEventListener('click', () => {
        let regex = document.getElementById('regex').value
        let code = document.getElementById('code').value
        alert(JSON.stringify([[regex, code]]))
      })
    </script>

Then open the encode.html in a browser and fill in the regex value and JavaScript code into the textarea. Clicking on the Encode button opens up a popup with encoded JSON file you can then copy into a JSON file.

Advanced: Using multiple snippets

Here’s how managing the scripting JSON file can be made a bit easier. Here’s an example of a script that just clicks an element on example.com:

// ^https://example.com/.*
document.getElementById("element").click()

The first line is the commented regex of where the script should be active. The following little Python script then takes JS code like this (with their first line being the escaped regex) and converts it to the JSON the package expects. Here’s the script:

import re, sys, json
scripts = []
for fname in sys.argv[1:]:
    with open(fname) as f:
        url_pattern = f.readline().lstrip("//").strip()
        re.compile(url_pattern)
        script = "(function() {\n" + f.read() + "\n})();"
        scripts.append([url_pattern, script])
sys.stdout.write(json.dumps(scripts))

Converting is then as simple as:

python mkjson.py example.js  > /tmp/example.json

If you have multiple script files, just specify all of them as arguments to the mkjson.py script.

1 Like