Automating Front-End Development Environment with Alfred Workflows and AppleScript

Alfred is a popular macOS utility that can launch apps, perform full‑text file searches, and run custom workflows. This article shows how to use Alfred Workflows together with AppleScript to create a one‑click solution for starting a front‑end development environment.

Problem & Idea

Typical manual steps for starting a front‑end project include opening WebStorm, launching iTerm and cd-ing to the project, starting the Whistle proxy, enabling Chrome extensions (proxy, React/Vue devtools, etc.), and opening the Chrome inspect page. The whole process takes about half a minute and is error‑prone.

The goal is to replace these steps with a single Alfred command that automatically performs all actions.

What are Alfred Workflows?

Alfred Workflows provide a drag‑and‑drop visual interface that links triggers, system actions, and scripts. They support several scripting languages such as Bash, Python, PHP, JavaScript (osacript), and AppleScript.

Choosing the right language depends on the scenario: Python is pre‑installed on macOS and offers convenient HTTP and file APIs, while JavaScript via osacript has limited capabilities unless Node.js is installed.

AppleScript Basics

AppleScript is a simple, highly readable language for controlling macOS applications. The basic syntax is:

tell application "Google Chrome"
    activate
end tell

Key commands include tell to enter an application’s scope, activate to launch it, get to retrieve properties, and set to modify them.

Example that opens Chrome and navigates to a URL:

tell application "Google Chrome"
    activate

    get front window's active tab

    set front window's active tab's URL to "https://kg.qq.com"
end tell

AppleScript can be edited and debugged with the built‑in Script Editor.app, which provides syntax highlighting, formatting, and error messages.

Initializing the Development Environment

To automatically enable Chrome extensions, two prerequisites are needed:

The Chrome extensions page ( chrome://extensions ) exposes a JavaScript API for toggling extensions.

Chrome’s AppleScript dictionary allows execution of arbitrary JavaScript in the active tab.

In the Chrome console the following command enables an extension by its ID:

chrome.management.setEnabled("padekgcemlokbadohgkifijomclgjgif", true)

The full AppleScript that opens Chrome, navigates to the extensions page, and enables a list of extensions is:

to splitString(aString, delimiter)
    set retVal to {}
    set prevDelimiter to AppleScript's text item delimiters
    set AppleScript's text item delimiters to {delimiter}
    set retVal to every text item of aString
    set AppleScript's text item delimiters to prevDelimiter
    return retVal
end splitString

# List of extension IDs, separated by commas
set extensionID to "padekgcemlokbadohgkifijomclgjgif,lmhkpmbekcpmknklioeibfkpmmfibljd,nhdogjmejiglipccpnnnanhbledajbpd"
set tmp to splitString(extensionID, ",")

tell application "Google Chrome"
    activate
    try
        get front window's active tab
    on error
        make new window with properties {visible:true}
    end try
    tell front window
        make new tab at after (get active tab) with properties {URL:"chrome://extensions"}
        delay 0.5
        repeat with anItem in tmp
            set js_code to ("chrome.management.setEnabled('" & anItem & "', true);")
            execute active tab javascript js_code
        end repeat
        close active tab
    end tell
end tell

After testing the script in Script Editor, copy it into an Alfred workflow and bind it to a keyword such as wwon . Running the workflow launches Chrome, opens the extensions page, enables the specified extensions, and then closes the page.

Further Automation Ideas

Use the find command to list projects and let Alfred present a selection menu.

Open the selected project in WebStorm.

Launch a terminal window and cd to the project directory.

Start the Whistle proxy.

Open Chrome’s Inspect and Whistle configuration pages, checking for existing tabs to avoid duplicates.

Automatically close development‑related Chrome extensions when the work session ends.

Conclusion

Alfred workflows provide a powerful yet simple way to automate both trivial and complex tasks on macOS. By combining Alfred with AppleScript, developers can create custom shortcuts that launch applications, run system commands, and manipulate browsers, greatly improving productivity.