/dev/null / Projects

Setup Firefox App Mode

Note: These steps are for Firefox versions 76 and older.  This is now a native feature of Firefox v77+.

If you’re here, then you already know about Google Chrome’s App mode and you want to duplicate that in Mozilla Firefox.  Unfortunately, Firefox does not make the process as easy as Chrome does, as least not as of version 70.  Therefore, here’s what you’ll need to do:

  1. You’ll want to create a separate profile for this, so that you don’t mess up your existing default profile. So, launch a new instance of Firefox with by running the following command in a Windows Run window or Linux terminal. I’m sure that this same works in Mac, but I’m unable to test it. 
    firefox -P profile-manager --new-instance
  2. Create a new profile by clicking “Create Profile…”
    Firefox Profile Manager 
  3. Select “Next”.
  4. For the “Enter new profile name:” field, enter whatever you want. I called mine “app”.
  5. Click “Finish”.
  6. Make sure you click on “default” before you click on “Exit” as whatever is selected when you close this window will become the default.
  7. Now, to start the new profile run: 
    firefox -P app

    Change “app” to whatever you named your profile to.

  8. Go to the Profile folder. There are many ways to do this, but the easiest is to use Firefox’s Troubleshooting Information page at Firefox -> Hamburger Menu -> Help -> Troubleshooting Information.  You can also use about:profiles in the Firefox address bar.  Locate the “Profile Directory” (“Root Directory” if you chose the ‘about:profiles’ route) entry and then click “Open Directory.”
  9. Here, you’ll need to create a new folder called chrome.  Then open the “chrome” folder.
  10. Create a file here called userChrome.css and add the following contents:

    Linux

    /*
* Custom App Mode Settings for Firefox.
* This duplicates the effects of Chrome App mode.
*
*/
/* Hide the tabs bar. */
#TabsToolbar {
visibility: collapse !important;
}
/* Hide main toolbar contents EXCEPT Address bar */
#nav-bar toolbarbutton, #search-container, #stop-reload-button {
display: none !important;
}
#nav-bar {
min-height: 0px !important;
}
/* Hide Address bar when NOT focused (e.g., F6) */
#urlbar:not([focused]), #urlbar:not([focused]) * {
min-height: 0 !important;
max-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}

    Windows

    
/*
* Custom App Mode Settings for Firefox.
* This duplicates the effects of Chrome App mode.
*
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Hide the Toolbars. */
#TabsToolbar,
#PersonalToolbar,
#BookmarksToolbar,
#MenuToolbar,
#tabbrowser-tabs {
visibility: collapse !important;
}

/* Hide main toolbar contents EXCEPT Address bar */
/* leaves space for the window buttons */
#search-container,
#stop-reload-button {
display: none !important;
}

#nav-bar {
margin-top: -32px !important;
margin-bottom: -4px !important;
}

/* Hide Address bar when NOT focused (e.g., F6) */
#urlbar:not([focused]),
#urlbar:not([focused]) * {
min-height: 0 !important;
max-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
  11. Save and close the file.
  12. We need to enable the legacy options for Firefox so that it actually looks at the userChrome.css file.  Therefore, in Firefox, go to about:config by typing that into the address bar and click on “I accept the risk!” to see all of your options.  Search for toolkit.legacyUserProfileCustomizations.stylesheets and double-click it to set the value to true or right-click and choose “toggle”.
  13. Now, close and re-launch your Firefox “app” profile to see if the settings have taken effect.

Create your Desktop Launcher

To create the Desktop launcher, you’ll need to setup the file as follows.

Linux

  1. Create a new file on the Desktop and name it whatever app you’ll be running in your new App Mode window.  I called mine “Google Play Music” because Google doesn’t have a Desktop app for Linux systems.
  2. Create the file contents: 
    [Desktop Entry]
Name=Google Play Music
GenericName=Google Play Music
Comment=Google Play Music Desktop Player
Exec=firefox -P app -new-instance https://play.google.com/music/listen?u=1#/home
Icon=/home/hummdis/Pictures/GooglePlayMusic.png
Terminal=false
Type=Application
#MimeType=text/html;text/xml;application/xhtml+xml;application/vnd.mozilla.xul+xml;text/mml;x-scheme-handler/http;x-scheme-handler/https;
StartupNotify=true
#Categories=Network;WebBrowser;
Keywords=Music,Google,Play,Desktop

    The ones that you need to pay attention to and change as needed are the following lines:
    Name
    GenericName
    Comment*
    Exec
    Icon*
    Keywords*

  3. The ones above marked with an asterisk (*) are optional as you don’t have to have to set a value to them, but you’ll want to have them in the file, just leave anything to the right of the equals sign (=) blank.  The others, adjust as needed.  The Exec option contains the URL of the site that will be launched when you connect.  Note that you won’t have the address bar in the new App Mode, so you can’t change this once launched.  The Icon entry allows you to use the icon of your choice.  Mine just so happens to be the orange round Google Play icon.
  4. Save the file and make sure you add the executable bit… 
    chmod +x ~/Desktop/GooglePlayMusic.desktop

That should be it. Your Desktop shortcut and Firefox App Mode should be all setup and look like this on Linux:

Firefox App Mode

Windows

Under Windows, the steps to create the desktop launcher are a bit different, but the concept is the same.

  1. If you have an existing Firefox icon on your Desktop, copy it.  If not, then you’ll need to make one by just adding the shortcut to the Desktop.  The steps to do this are outside the scope of this tutorial.
  2. Rename your Desktop shortcut to your liking, I chose “Google Play Music” of obvious reasons.
  3. Right-click on the Firefox shortcut and choose “Properties…”
  4. Change your icon now, if you want. I chose to do so.
  5. Change the Target field to the following: 
    "C:\Program Files\Mozilla Firefox\firefox.exe" -P app --new-instance https://play.google.com/music/listen?u=0#/home

    Make sure the path to your Firefox installation is correct.  Really, you’re just adding -P app --new-instance <your_url> to the end of the existing path.

  6. Click OK.

Double-click on the Desktop shortcut and you should have a window that looks like this, with the URL you entered loaded, of course:

Firefox App Mode on Windows

Resources

https://superuser.com/questions/977912/firefox-hide-everything-except-content-area-of-the-browser
https://askubuntu.com/questions/487936/how-do-i-open-fixed-window-in-firefox-like-chrome-app-mode