How to create a Firefox custom Start Page

Overengineering.

This is my takeaway after learning how to add a local addon to Firefox in order to have a custom start page on each new tab.

A while back I came across this subreddit called StartPages where users post their custom browser start pages. I thought it was very cool and wanted to try coding my own.

The thing is, doing this with Firefox is so over complicated it makes 0 sense. I'm a big fan of Firefox but I gotta give it to Chrome, Chrome allows you to do this way easier.

πŸ‘¨β€πŸ’» What do I want to achieve?

  1. When I open a new page I want to load an HTML file (show a message, time, day, maybe weather?)
  2. I want my cursor to be placed on the address bar, not on the HTML page.

πŸ€” Why not use Firefox's existing settings?

You can't really do that for new tabs. You can add a URL for the home, which is not what's opened when you do hit Cmd+T

You can install an add-on to customize the URL for new tabs, but that's the issue. If you set a URL for new tabs that URL is shown in the address bar. So the flow would look like:

  1. Hit Cmd+T
  2. Remove the URL that's in the address bar.
  3. Perform the search or type the URL you want to visit.

You tried to improve your experience but in fact, you just added a new step to the process. No good.

πŸ’‘ How can this be solved?

The only way is to create a Web Extension.

To create a Firefox Web Extension there's this fantastic NPM package that needs 0 configuration and allows you to develop and build the extension package. It's called web-ext.

Here's a quick outline of the minimal setup:

  • index.html Which can have anything you want. Be aware of the Content Security Policies, it's better to put your JavaScript in a file rather than inline (should you need JavaScript for your start page).
  • manifest.json The file which tells Firefox the information it needs to know about your Web Extension.

Here's the content of my manifest.json

{ "manifest_version": 2, "name": "Rick's Start Page", "short_name": "Rick's Start Page", "version": "2.0.0", "description": "My Start Page", "applications": { "gecko": { "id": "what@is.this", "strict_min_version": "54.0" } }, "chrome_url_overrides": { "newtab": "index.html" }, "icons": { "32": "icons/32.png", "48": "icons/48.png", "96": "icons/96.png", "128": "icons/128.png" }, "permissions": ["storage"] }
Code language: JSON / JSON with Comments (json)

Now, we're not done yet πŸ™„ Creating an unsigned/unverified Web Extension will not work in Firefox stable πŸ€¦β€β™‚οΈ It won't let you drag and drop the file to the add-ons settings page. You need to download Firefox Developer Edition πŸ€·β€β™‚οΈ

βœ‹ Deactivate add-on signing validation

After you get your Firefox Developer Edition up and running you have to do the following:

  • Go to about:config
  • Search for xpinstall.signatures.required and set it to false.

With this it won't complain as you drag and drop your locally built Web Extension.

Couldn't you do this for Firefox Stable? No, it doesn't work for the stable channel πŸ˜‘

Finally, on Firefox Developer, here's how my add-on looks like:

My custom Start Page

There's nothing fancy yet in my Start Page, still if you want to check it out here's the repo.

πŸ’¬ Final thoughts

This is bonkers 🀯 It's overkill. I'm sure those responsible for making this so overly complicated had their reasons. Hard to tell if they were good reasons. I understand not wanting Firefox to install unsigned extensions, from the internet. But locally? Why not? If I've gone to the Firefox config and set any flag, why not let me do it with the stable channel? At this point, I don't know if it's a design decision or a bug. Honestly, it doesn't matter.

Do you know of a better way to achieve this?

In any case, I have now my custom start page up and running.

Any ideas on what can I put in there?

Here's my v3, using the WordPress REST API to fetch my To-Do list of items 🀩

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*