Transforming Firefox to make web apps feel native

I use a lot of web applications in my daily life, including Desmos, Google Calendar, Outlook Mail, Discord, and Slack. I use these applications so frequently that I would like to improve my user experience accessing these sites. How can I do this?

Why not Electron?

Discord and Slack both bundle their web applications as native Electron executables. Electron runs a Chromium instance with a more stripped-down user interface and more limited access to the internet. Additionally, the executable is added to the operating system's launcher (Start menu on Windows, Applications directory on MacOS, and an XDG Desktop entry on Linux). Packaging other web applications into Electron could provide the same benefits that Discord and Slack enjoy.

In fact, this is exactly what the Nativefier project does. However, Nativefier presents some downsides that I would like to avoid.

• Some applications require workarounds to package correctly. While popular apps are documented in the Nativefier catalog, any website that relies on Widewine DRM, User Agents, or even complex authentication flows can be difficult to package.
• Each application requires creating a new Electron executable, which is hundreds of megabytes.
• Nativefier isolates session information for each application. This is definitely good for security, but makes logging in to many applications more difficult.

Instead of using Electron, I would like to customize my browser to get a similar experience.

Customizing Firefox

Creating a profile

On Firefox, you can make multiple profiles, which are independent browser instances and configurations. No data (including settings, extensions, and history) is shared across profiles. Since I use Firefox as my default browser, I would like to create a new profile that does not interfere with my preferred internet browsing settings.

To create a new profile:

1. Visit about:profiles.
2. Click Create a New Profile.
3. Enter a descriptive name for your profile. For example, I named my profile app.
4. Finish making the profile.
5. Launch your newly created profile.

Settings

I recommend changing the following settings in about:preferences to make the browser experience more convenient.

• In General, disable "Open links in tabs instead of new windows". Eventually, we will hide the tab bar to increase vertical space. Disabling this option will create windows instead of tabs, keeping the tab bar out of sight.
• In General, enable "Always ask you where to save files". Eventually, we will hide the URL bar to increase vertical space. Disabling this option will remind you where your downloaded files are stored.
• In Privacy and Security, under "Browser Privacy" choose the Custom protection and block all types of trackers and scripts.
  • In Cookies, do not block all cookies unless you want to log in every time any application opens.
  • In Tracking content, ensure it is blocked in all windows, not just private windows.

I recommend changing the following settings in "Hamburger Menu > More tools > Customize toolbar..." for better visual consistency.

• Under "Toolbars" (bottom-left corner), disable the menu bar. You can access the menu bar even when hidden by pressing Alt.
• If you are on MacOS, enable the "Title bar". After hiding the tab bar and URL bar, the net vertical area gained will be positive.

Custom styles

Firefox can be customized using userChrome.css, a file that lets you style the user interface using CSS. We will first enable this feature, then add styles to hide the URL bar and tab bar.

1. Look for your profile in about:profiles and open the Root Directory.
2. Create a directory named chrome.
3. Inside that directory, create a file named userChrome.css.
4. Copy the styles from this Gist. The stylesheet does the following.

• Hides the URL bar.
• Repositions the URL field so that it is readable when selecting Ctrl + L.
• Hides the tab bar when only one tab is open (from the contributors of MrOtherGuy/firefox-csshacks).

Adding to the system launcher

It would be very convenient to be able to visit applications from the Start menu, Launchpad, or application list. While the steps for each operating system are different, they run on the same underlying command:

firefox -P app --new-window https://www.example.com

This command starts firefox, chooses the -Profile app, opens a --new-window, and visits the desired URL.

Windows

1. Right-click on your desktop and create a new shortcut. Give your shortcut a readable name.

2. Set the target of the shortcut to be similar to the example below.

   firefox.exe -P app --new-window https://www.example.com
   

3. This shortcut should now open the target web application.

4. Go to %AppData%\Microsoft\Windows\Start Menu\Programs.

5. Create a folder with a name like My Web Apps.

6. Copy your shortcut to the folder you just created.

7. Open the Start menu. You should be able to find your folder the contained web apps. These can be pinned to Start or the taskbar.

Linux

1. Visit ~/.local/share/applications.

2. Create a file with a name like firefox-example.desktop. Notice the extension.

3. Open the file in your favourite text editor and set the contents to be similar to the example below.

   [Desktop Entry]
   Name=Example App
   Exec=/usr/bin/firefox -P app --new-window https://example.com
   Icon=firefox
   Type=Application
   Categories=Education;Math;
   

   This XDG Desktop entry should be accessible from GNOME and KDE.

MacOS

1. Open Script Editor. Create a new AppleScript file.

2. Set the contents of the file to be similar to the example below.

   do shell script 'firefox -P app --new-window https://www.example.com'
   

3. Save the file to the Applications folder. Give your file a readable name.

4. Open the Launchpad. You should be able to find your web app. This can be added to the dock.