Building Basic Web Apps with Firefox

Did you know that you can craft basic web apps using Firefox? In this blog post, we will explore the steps to build your own web app with Firefox.

1. Creating a New Profile..
The first step is to create a new profile in Firefox. Head over to about:profiles and follow the prompts to generate your new profile.

2. Launching the New Profile..
Once the profile is created, you can launch it either by clicking on the “Launch profile in a new browser” button or via the terminal using “firefox -p profilenamegoeshere”.

3. Enabling UserChrome..
Access about:config, search for toolkit.legacyUserProfileCustomizations.stylesheets, and set it to “true”.

4. Opening the Profile Folder..
Locate your profile folder by visiting about:profiles and clicking the “Open Directory” button on the Root Folder line under the new profile.

5. Creating the Chrome Folder..
Inside the opened folder, create a new folder named “chrome“.

6. Downloading the CSS..
Download my webview.css, rename it to userChrome.css, and copy it into the newly created “chrome” folder.

Please note: userChrome.css is case sensitive, so ensure to name it correctly !!

7. Testing the Downloaded UserChrome..
Close the profile and reopen it to ensure the downloaded userChrome is working as expected. Revisit step 2 above on how to launch the profile again.

8. Creating a .desktop File for Your Web App..
In /usr/share/applications/, create a new .desktop file with the following content: **

[Desktop Entry]
Version=1.0
Name=Webapp name goes here
GenericName=My awesome web app.
Comment=My awesome comment.
Keywords=Internet;WWW;Browser;Web;Explorer
Exec=/usr/lib/firefox/firefox -p web https://www.example.com/
Icon=firefox
Terminal=false
X-MultipleArgs=false
Type=Application
MimeType=text/html;text/xml;application/xhtml+xml;x-scheme-handler/http;x-scheme-handler/https;application/x-xpinstall;application/pdf;application/json;
StartupNotify=true
StartupWMClass=firefox
Categories=Network;WebBrowser;
Actions=new-window;new-private-window;

9. Enjoy Your Newly Created Web App..
With all the steps completed, you can now launch your web app from your menu system.

Related posts