loading...

Nativefier is bonkers

daveparr profile image Dave Parr ・1 min read

I made an electron app in 4 lines...

nativefier "http://musicforprogramming.net/" -n "musicforprogramming"
cd musicforprogramming-linux-x64/
sudo chmod +x musicforprogramming
./musicforprogramming

Motivation

I like music, but don't like music in browser tabs. Basically because i have it open all the time, I want to find and control it easily, and I don't want it cluttering up an area that might be soley focused on work.

I discovered some neat apps for google play, and wanted to see if there was one for my other go to, musicforprogramming. There wasn't, so I just casually googled how to convert a page into an electron app and OMFG!

Solution

GitHub logo jiahaog / nativefier

Make any web page a desktop application

Nativefier

Build Status npm version

Dock

You want to make a native wrapper for WhatsApp Web (or any web page).

nativefier web.whatsapp.com

Walkthrough animation

You're done.

Table of Contents

Introduction

Nativefier is a command-line tool to easily create a desktop application for any web site with succinct and minimal configuration. Apps are wrapped by Electron in an OS executable (.app, .exe, etc.) for use on Windows, macOS and Linux.

I did this because I was tired of having to ⌘-tab or alt-tab to my browser and then search through the numerous open tabs when I was using Facebook Messenger or Whatsapp Web (relevant Hacker News thread).

Changelog. Developer docs.

Features:

  • Automatically retrieves the correct icon and app name.
  • JavaScript and CSS injection.
  • Many more, see the API docs or nativefier --help

Installation

  • macOS 10.9+ / Windows / Linux
  • Node.js >= 10
  • Optional dependencies
    • …

This post and this one helped iron out some kinks and now I can launch programming music right from my VS code terminal!

vs code and an electron app of musicforprogramming made with nativefier

Extra credit

alias musicforprogramming="~/Dev/musicforprogramming-linux-x64/musicforprogramming

Discussion

pic
Editor guide