One way to create a single web page "web app" with Pale Moon on Linux

Post your tutorials for using applications or performing related tasks here.
Note: Not for "how do I...?" Questions!
Forum rules
Tutorials and Howtos should only relate to developed software, and not to third party applications. e.g.: Don't post a generic Howto for configuring a firewall.
If you have a question how to do something, you should use one of the support boards, not this board. It is meant for people to document and post instructions.
User avatar
andyprough
Astronaut
Astronaut
Posts: 688
Joined: 2020-05-31, 04:33

One way to create a single web page "web app" with Pale Moon on Linux

Unread post by andyprough » 2022-07-23, 01:23

This is in case you want to create an instance of Pale Moon on your system that is separate from your default instance, and that is only for opening one page, such as a dedicated instance of Pale Moon for your webmail. In this how-to, I'm going to use my new webmail account with Tutanota.com as an example. I'm going to make a dedicated Pale Moon profile just for opening the Tutanota webmail page, theme it, and then I'm going to go through some of the steps to "install" it on my system. These steps should work on nearly all Linux distros that have a normal file structure. I made this on antiX Linux, which is derived from Debian, and has a very normal Linux file structure. These steps won't be the only way to do this, but it's a good conversation starter I think.

Here's what my minimial "web app" of Tutanota webmail looks like on my system:
2022-07-22_20-07.png
1. Make sure that all instances of Pale Moon are closed. Start a new instance of Pale Moon and create a new profile for it with the following command:
palemoon --ProfileManager
Select 'Create Profile', then 'Next', then name your new profile. In this case I'll name my new one "Tutanota"
Select 'Finish', then select 'Start Pale Moon'

2. Set up your new instance of Pale Moon the way you want, just for the one website - in this case, only for accesing Tutanota webmail for me.
a. I will change the home page to mail.tutanota.com/login, so that anytime I start this instance of Pale Moon I am taken to the Tutanota login page
Tools - Preferences - General tab - write the URL of your web page in the 'Home Page' box
b. Uncheck the 'Always check to see if Pale Moon is the default browser on startup' box.
This will always be used just to check my mail. I will use an instance of Pale Moon with the 'Default' profile to be my default browser
c. On the 'Tabs' preferences tab, uncheck 'Always show the tab bar'. Change 'When opening a new tab, show' to 'My home page'. I want this browser to automatically go to webmail whenever possible.
d. On the 'Security' preferences tab, check the boxes for 'Remember passwords for sites', and 'Automatically fill in log-in details'. As much as possible, I want to stay logged in to my webmail account so that as soon as I open the Tutanota instance of Pale Moon, it goes directly to my inbox. I'll take additional steps to save Tutanota's cookies to help this process along.
e. Sync tab - either do NOT sync this with my default Pale Moon profile, in order to keep only the Tutanota preferences and setup in use. OR, start a new Tutanota sync, and sync this with other Pale Moon instances on other devices that are also going to be specially used to sign into my webmail.
f. 'Advanced' tab of preferences - set the User Agent Mode to be the best one for accessing your web page. Here, I'm going to stay with the default 'Firefox Compatibility' mode

3. Set any "about:config" options that are required to run your web page at its best
a. For tutanota, I have to enable the 'dom.webcomponents.enabled' setting, or Tutanota will not show me the content of my emails:
dom.webcomponents.enabled = true
b. I am also going to increase my useragent mode version from Firefox 68.0 to Firefox 102.0, because I think I've been getting better results on Tutanota with the larger version number:
general.useragent.compatMode.version = 102.0

4. sign into your web page, and save the login and password information, and check any boxes that say "Remember me" in order to set a cookie so that (hopefully) you don't have to sign in each time
a. I'll check the Tutanota 'Store password' box on the login screen
b. Pale Moon also offers for webmail pages an option near the top of the page to "Add Tutanota as an application for mailto links?" I'll check "Add Application" to allow this. That way, if I hit a link for an email address and I have my Tutanota instance of Pale Moon open, hopefully it will know to start a new outgoing email in Tutenota webmail.
c. Pale Moon asks me if I want to show notifications for Tutenota, since it recognizes that this is a webmail page. I check 'Always show notifications'

5. Now set up the look and feel of Pale Moon. This will include a unique theme, so that I can always tell I'm in the Tutanota webmail instance just by a quick glance at the browser (if any of the navigation bar or menu bar or tab bar is showing). Also, I want to minimize all the stuff on the page - get rid of all as many menus and bars as I can possibly live without.
a. Go to addons.palemoon.org/themes, and pick a theme that you aren't using for any other instance of Pale Moon. Maybe one that goes naturally with the theme for your web page. In my case, Tutanota uses red on a white background, so I am going to use the 'In the Dark (Bloodmoon Edition)' as my red-colored theme.
b. I'm going to turn off the Bookmarks bar, the Status bar, and the Menu bar in order to minimize the space used by the browser components in keeping with my "single use web app" concept. If you are feeling a bit more bold, you can turn off the Navigation toolbar as well, and go ultra-minimal as I did in the picture above.

6. Set some extensions from https://addons.palemoon.org/extensions/. For my Tutenota webmail, I'm going to use an adblocker with some built-in security features, and an extension to delete all cookies except for my Tutenota cookies (which keep me logged in)
a) I'm installing my preferred adblocking/security extension, ηMatrix. It's a bit advanced, so others may prefer a simpler ad blocker, such as uBlock or Adblock latitude
b) My cookie deleting extension is the classic "Crush Those Cookies". I just need it to do one thing - delete cookies, except for my Tutanota login cookies. So once I've installed it, I am going to navigate to mail.tutanota.com and click on the 'Crush Those Cookies' icon and tell it to 'Add mail.tutanota.com to the whitelist'
c) add other extensions to your heart's content - but keep in mind you only want the minimum number of them to run this one particular web page. You are NOT going to be using this instance of Pale Moon as your default web browser. Keep reminding yourself of that. Pure URL is another security extension I'm going to use.

7. Now, create a shell script to call up this one 'web app' instance of Pale Moon.
a) I like to create a special directory for each of my scripts, usually under the ~/git/ directory, as that's just a good place for me to remember them
mkdir ~/git/tutanota/
cd ~/git/tutanota/
b) create a shell script with the following information (change the name of the profile to fit with your 'web app' profile name):
nano tutanota.sh
c) paste this info into the shell script:
#!/bin/sh
palemoon -P Tutanota
d) ctrl-o and ctrl-x to save and exit nano
e) add executable permission to your new shell script:
chmod +x tutanota.sh
f) test it out, to see if your shell script will start your special instance of Pale Moon in the correct profile:
./tutanota.sh

8. Link the shell script in your system so that it can be run with a single command
sudo ln -s /home/USER-NAME-HERE/git/tutanota/tutanota.sh /usr/local/bin/tutanota

9. Find an image for Tutanota to make into an icon you can use on your system
a) search duckduckgo for "tutanota png"
b) filter for "small images"
c) select a small, simple icon image for your web page, and right click on it and select 'Save image as'. Put it in your Downloads folder or Pictures folder
d) copy the image to one of your icon folders. I found a 170x170 png file, I'm going to move it to one of my 192x192 icon folders:
sudo mv ~/Downloads/tutanota.png /use/share/icons/hicolor/192x192/apps/

10. create a .desktop file so that your desktop menu can launch this web app easily
a) create a new tutanota.desktop file (or the file name for your web app):
sudo nano /usr/share/applications/tutanota.desktop
b) paste in the following information to the file (change to be the name for your web app):
[Desktop Entry]
Name=Tutanota
Comment=Tutanota webmail web app
Exec=tutanota
Terminal=false
Type=Application
Icon=/usr/share/icons/hicolor/192x192/apps/tutanota.png
Categories=Network;WebBrowser;
MimeType=text/html;text/xml;application/xhtml+xml;application/vnd.mozilla.xul+xml;text/mml;x-scheme-handler/http;x-scheme-handler/https;x-scheme-handler/ftp;
StartupNotify=false
StartupWMClass=Pale moon
c) ctrl-o and ctrl-x to save and exit nano

That's it - should be ready for full use now as a single page web app. You should have a Tutanota menu item in your XFCE or whatever desktop menu, or you can bring it up in a terminal with 'tutanota'. You should be able to bring it up at the same time that you have your default version of Pale Moon open.

Locked