How to Open Any Website as a Frameless App on macOS - A Step-by-Step Guide

How to Open Any Website as a Frameless App on macOS

Maximizing efficiency and creating a seamless browsing experience are top priorities for any tech-savvy macOS user. Imagine having the power to transform your favorite websites into standalone applications, free from the clutter of window decorations, and claim your precious screen real estate. In this comprehensive guide, I’ll walk you through the steps to effortlessly open any website as a frameless app on macOS. Say goodbye to unnecessary tabs and welcome a clutter-free, and curate your own focused digital workspace.

In this example we will create a macOS app to open Benchling.

1) Create the “.app” Folder Structure

To begin this exciting journey towards creating your first frameless app on macOS, you’ll first need to lay the foundation. This involves creating a specific folder structure that mimics the structure of a typical macOS application. Here’s how:

1. Choose a Directory: Select or create a directory where you’d like to house your frameless app. It could be anywhere on your macOS, perhaps in your /Applications or ~/Applications/ folder.

2. Create the “.app” Folder: Inside your chosen directory, create a new folder with a “.app” extension. This is the standard extension for macOS applications. Name it whatever you’d like your app to be called.

3. Contents Folder: Inside your “.app” folder, create another folder named “Contents”.

4. MacOS Folder: Within the “Contents” folder, create a subfolder named “MacOS”.

This structure can be created with a single shell command (Fire up a terminal and type in):

mkdir -p /Applications/Benchling.app/Contents/MacOS

2) Create a Script That Opens the Website as a Frameless App

With your folder structure in place, it’s time to infuse your frameless app with functionality. This is where a script comes into play. The script will be responsible for opening the website in a frameless window. You can create the file by typing in:

nano /Applications/Benchling.app/Contents/MacOS/Benchling

Here’s a basic script you can use as a starting point. Copy and paste this into the text editor:

#!/bin/sh
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
    --kiosk \
    --app=https://benchling.com/

You can replace the URL https://gene.benchling.com/ to any app you’re trying to run. You could go into specifics and tune your parameters.

#!/bin/zsh
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome  \
    --app=https://benchling.com \
    --hide-scrollbars \
    --window-position=120,20 \
    --window-size=1024,1024

In this script, replace /Applications/Google\ Chrome.app with the path to the browser you prefer. Also, replace https://www.example.com with the URL of the website you want to open as a frameless app. The --hide-scrollbars option removes scrollbars, and you can adjust the --window-position and --window-size options as per your preference.

3) Make the Script Executable

Before your script can work its magic, it needs to be executable. Open the Terminal and navigate to your “.app” folder. Then, use the following command to grant execution permission to your script:

chmod +x /Applications/Benchling.app/Contents/MacOS/Benchling

Replace Benchling with the actual name of your script.

4) Add an Icon to Your App

Let’s make your frameless app visually appealing! An icon can give your app a unique identity. Find an image you’d like to use as an icon. I like the website https://macosicons.com by Elías Ruiz. Just search and click the icon you like, and it’ll be in your Downloads folder. Open your app in the Get Info view by pressing Cmd + I or selecting your app in Finder and clicking File -> Get Info from the menu bar. This will open a window like the one in the screenshot with a blank app icon at the top left.

Drag the app icon you downloaded onto the blank icon and it will be assigned to your app.

5) Run the App

With your script in place, the execution permission granted, and the icon ready, you’re all set to run your frameless app!

1. Double-Click: Simply double-click on your newly created “.app” folder. This will initiate the script, and your chosen website will open in a sleek, frameless window.

2. Dock It: For easy access, you can drag your “.app” folder to your macOS dock. This way, you can launch your frameless app just like any other application.

With these straightforward steps, you’ve transformed the way you interact with websites on your macOS. Enjoy a clutter-free browsing experience and a focused digital workspace that maximizes efficiency. Your favorite websites are now just a click away in their frameless glory. Happy browsing!

Stay tuned for more macOS tips and tricks, right here.