Shortlet

 _______      __                    _ __  __     _      __    __       _ __
/_  __(_)__  / /_____ ____  _    __(_) /_/ /    | | /| / /__ / /  ___ (_) /____ ___
 / / / / _ \/  \_/ -_) __/ | |/|/ / / __/ _ \   | |/ |/ / -_) _ \(_-</ / __/ -_|_-<
/_/ /_/_//_/_/\_\\__/_/    |__,__/_/\__/_//_/   |__/|__/\__/_.__/___/_/\__/\__/___/

Shortlet is a framework to configure and launch small hacks for the web. Ease your day-to-day by:

• Create keyboard shortcuts
• Multiple actions with one click
• Webpage manipulation without coding

Shortlet comes as a Chrome and Firefox extension, providing automatic webpage injection, a command palette and a settings UI.

Contents

• Usage
• Examples
  • Basic
  • Advanced
• Details
• Actions overview
• List of Actions
  • Element interaction
  • Element visibility
  • Styling
  • Form interaction
  • Create elements
  • Events
  • Browser interaction
  • Script control and Utilities
• Settings
• Code building-blocks

- ❧ -

Usage

1. Install from Firefox Add-ons or download and load the folder src as an unpacked extension in Chrome.
2. Open Shortlet settings by clicking on the extension icon, or trigger the Shortlet command palette with the default shortcut ctrl+space.
3. Add your first shortlet and save the settings.
4. Navigate to, or reload, the webpage and launch the shortlet.

- ❧ -

Examples

Basic

A simple shortlet to click a button, added within the shortlets wrapper object.

{
  "shortlets": [
    {
      "id": "example_click_button",
      "title": "Click a button",
      "conditions": {
        "url": "example.com"
      },
      "shortcut": "ctrl+g",
      "actions": [
        {
          "do": "click",
          "on": "div.button"
        }
      ]
    }
  ]
}

A shortlet with several actions. Start with "blur" to exit possible input fields, check all checkboxes, click save, what half a second and then return the the previous page.

{
  "shortlets": [
    { "id": "example_click_button", "title": "Click a button", "conditions": { "url": "example.com" }, "shortcut": "ctrl+g", "actions": [{ "do": "click", "on": "div.button" }] },
    {
      "id": "exmaple_check_all_checkboxes",
      "title": "Check all checkboxes and go back",
      "conditions": {
        "url": "example.com"
      },
      "actions": [
        {
          "do": "blur"
        },
        {
          "do": "check",
          "for": "each",
          "on": "input[type=checkbox]",
          "value": true
        },
        {
          "do": "click",
          "on": "button",
          "text": "save"
        },
        {
          "do": "goto",
          "history": "back",
          "delay": 500
        }
      ]
    }
  ]
}

Advanced

A shortlet activating a delete dialog and click confirm, repeated 5 times.

{
  "id": "example_delete_multiple",
  "title": "Delete 5 objects ⚠️",
  "conditions": {
    "url": "example.com"
  },
  "shortcut": "shift+alt+backspace",
  "repeat": 5,
  "actions": [
    {
      "do": "blur",
      "delay": 900
    },
    {
      "do": "keypress",
      "key": "Backspace",
      "options": {
        "altKey": true
      }
    },
    {
      "do": "click",
      "on": "button.confirm-delete"
    }
  ]
}

- ❧ -

Details

Shortlet

A shortlet is a custom command. You configure it to perform the hack you desire. Each shortlet contains one or more actions, conditions and other properties. Shortlets are run from the command palette aka. the launcher.

Action

An action is a predefined piece of code that is performed when you run the shortlet. It has a set of defined input values. There are different types of actions, most of them does something with the DOM.

Conditions

Conditions decide if a shortlet should be available for a certain webpage. Currently, only URL conditions are supported.

More properties

Other shortlet properties are id, title, shortcut, and repeat.

- ❧ -

Actions overview

Each action is written as a JSON object with the following key-value pairs:

Mandatory properties

• "do": "action code" What action to run. Mandatory.

Element selection properties

• "on": "selector" Almost always needed. Defines the list of elements to apply the action to by running querySelectorAll with the provided selector, then filter by text, if, and for.
• "text": "regex" Filters the selected list of elements by the value of their property innerText.
• "if": "in view|frontmost" Filters the list of selected elements by one/both of "in view" and "frontmost". Useful to avoid manipulating elements not currently visible.
• "for": "FIRST|last|each|but_last|but_first|random" Applied last, selecting elements based on position in the remaining list.

Optional properties

• "delay": 123 Wait the given amount of milliseconds before running the action.

Properties depending on action

See each action below.

- ❧ -

List of Actions

Most actions require one or several elements to be selected, see Element selection properties on/text/if/for above.

Element interaction

Action	Description	Properties
click	Click on the selected elements	on/text/if/for
blur	Remove focus from all elements	on/text/if/for
focus	Focus the selected elements	on/text/if/for
select	Select the selected elements	on/text/if/for
copy	Copy the selected elements' innerText to the clipboard, joined by a delimiter	on/text/if/for "delimiter": "\n"
set_text alias: write	Change the innerText of the selected elements	on/text/if/for "value": "text"
append	Not yet implemented
replace	Not yet implemented	regex, all/one, only in inputs, on full page, always traverse children
set_attribute alias: set	Change the selected elements HTML attribute	on/text/if/for "attribute": "alt" "value": "text"

Element visibility

Action	Description	Properties
show	Show the selected elements by changing the display and opacity properties	on/text/if/for "as": "BLOCK|flex|inline|..." "opacity": 1
hide	Hide the selected elements with display:none	on/text/if/for
toggle	Toggle visibility for the selected elements. Visible is achieved by changing the display property	on/text/if/for "as": "BLOCK|flex|inline|..."

Styling

Action	Description	Properties
style	Change the selected elements style property	on/text/if/for "property": "color" "value": "#f9c"
add_class	Add a list of space separated classes to the selected elements	on/text/if/for "class": "class-one class-two"
remove_class	Remove a list of space separated classes from the selected elements	on/text/if/for "class": "class-one class-two"
toggle_class	Toggle a list of space separated classes on the selected elements	on/text/if/for "class": "class-one class-two"
stylesheet	Add the given css code to the page in a style tag	"css": "code"

Form interaction

Action	Description	Properties
input	Input a value into the selected elements. By default, trying to trigger data-binding code. Alternatively use simple assignment.	on/text/if/for "value": "text" "use": "ADVANCED|simple"
check	Change the selected checkbox elements. By default, trying to trigger data-binding code. Alternatively use simple assignment.	on/text/if/for "value": TRUE|false" "use": "ADVANCED|simple"
input_from	Add the selected elements matching innerText to the selected inputs.	text/if/for "from": "selector" "match": "regex" "to": "selector"

Create elements

Action	Description	Properties
duplicate	Clone the selected elements and add new after them themselves. Optionally append the new elements id with a code.	on/text/if/for "id": "-code"
reveal_data	Create span elements with the matching text from the selected elements dataset attribute. Optionally style the span and define a target parent for the span.	on/text/if/for "data": "dataSetNameCamelCase" "match": "regex" "target": "PARENT|selector" "style": "inline style"
reveal_attribute alias: reveal	Create span elements with the matching text from the selected elements html attribute. Optionally style the span and define a target parent for the span.	on/text/if/for "attribute": "name" "match": "regex" "target": "PARENT|selector" "style": "inline style"
tooltip	Not yet implemented.

Events

Action	Description	Properties
dispatch aliases: trigger, keypress, mouse	Trigger an event on the selected elements.	on/text/if/for "event": "KEYDOWN|click|mousedown|input|..." "options": "{ bubbles: true, cancelable: true, view: window }" "key": "SPACE|Enter|..."
listen	Add an event listener to the selected elements and run the shortlet's actions when it is triggered.	on/text/if/for "event": "click|keydown|..." "actions": [{action1}, {action2}]

Browser interaction

Action	Description	Properties
goto	Navigate to an url, append the current url or go back/forward in the browser history.	"url": "https://" or "history": "back|forward" "append": FALSE|true
scroll	Scroll to the selected element into view, by a delta, or to a fixed position.	on/text/if/for "to": "top,left" "by": "delta top,delta left" "options": "{ behavior: 'auto', block: 'nearest', inline: 'nearest' }"

Script control and Utilities

Action	Description	Properties
wait	Wait the given amount of milliseconds.	"delay": 123
log	Print selected elements in console.log.	on/text/if/for
highlight	Not yet implemented.

- ❧ -

Settings

Command palette shortcut

Keyboard shortcut to show the shortlet launcher command palette. command-pal uses the hotkeys-js package to capture keyboard input. hotkeys-js documentation explains what keys you can use for this setting.

Shortlets

The JSON object where you define your shortlets.

Advanced settings

• Trigger in inputs: If keyboard shortcuts should be triggered within input, textarea and select elements.
• Developer mode: Add 'Developer tools' to the command palette and activate logging.

command-pal Theme

Not yet implemented.

- ❧ -

Code building-blocks

ShortletAPI.js

Exposes the shortlet actions described in the section Actions. In addition, there are internal functions doing the heavy lifting.

MiniQueue.js

Allows you to setup and run a list of actions, one at a time. Supports queuing, start and delay between steps.

CommandPal.js

A slightly modified copy of the command-pal project.

Shortlet.js

The main injection script that bootstraps Shortlet by fetching the shortlets from settings and loading them into CommandPal. Also, when needed, keeps track of elements inside and outside of the viewport.

background.js

The extension backend, handling local storage and open the settings page.

settings.html/.js/.css

Provide the extension settings page with HTML/CSS and code to access the persistant storage of the settings.

- ❧ -

You scrolled all the way down!

Previous art

Nothing exists in vaccum. Shortlet is built from ideas I got when using the brilliant Shortkeys browser extension. Alfred app has been an inspiration for the command palette interface. ASCII art from patorjk.com

Guiding principles

Queues are cool, use natural language, have fun.

---

Pontus Sundén, 2025 - [email protected]