How to write a firefox extension that reloads page automatically?

Creating a Firefox extension that automatically reloads a page can be accomplished using the WebExtensions API provided by Firefox. To write a firefox addon, you need to at least write a manifest.json file, a background js file and/or a content js script. You can also prepare some icon files for the extension(shown on the browser’s toolbar). Below is a basic example of how you can create such an extension:

Set up your extension directory: Create a directory for your extension and navigate into it.
Create a manifest file: In your extension directory, create a file named manifest.json and add the following content:

   {
     "manifest_version": 2,
     "name": "Auto Reload",
     "version": "1.0",
     "description": "Automatically reloads the current tab",
     "permissions": [
       "tabs",
       "activeTab"
     ],
     "background": {
       "scripts": ["background.js"]
     },
     "browser_action": {
       "default_popup": "popup.html",
       "default_icon": {
         "16": "icon16.png",
         "48": "icon48.png",
         "128": "icon128.png"
       }
     },
     "icons": {
       "48": "icon48.png"
     },
     "content_scripts": [
       {
         "matches": ["<all_urls>"],
         "js": ["content_script.js"]
       }
     ]
   }

This manifest file declares basic information about your extension, such as its name, version, description, permissions needed, and scripts to be loaded.

A firefox addon typically has a button on the browser’s toolbar. You click the button to wake up the addon to do some work for you. This is accomplished by the browser_action property in the manifest.json. The naming is very strange. I’d rather call it browser_button or just button. The icon specified in the browser_action property will be shown on the browser’s toolbar. If the browser_action property has a default_popup key, the html page will be popped up when you click the extension button on the toolbar. If the browser_action property has not a default_popup key, the click event will be delivered to the listener added by the background script. So, if you want to handle the click event in your background script, don’t add the default_popup key, otherwise, the listener you add in the background script won’t receive the click event.

Create the background script: Create a file named background.js in your extension directory and add the following content:

   // Listen for the browser action being clicked
   browser.browserAction.onClicked.addListener((tab) => {
     // Reload the current tab
     browser.tabs.reload(tab.id);
   });

This script listens for clicks on the extension’s browser action button and reloads the current tab when clicked.

The background script will be run once when you load the extension but never run when you load a page in a tab. You can use console.log function to print some messages, but these messages can only be seen in the console brought by clicking the “Inspect” button to the right of the extension on the “about:debugging#/runtime/this-firefox” page:

You cannot see the console output in the F12 console(page console) or Ctrl+Shif+J console(Browser Console).

Create the content script: Create a file named content_script.js in your extension directory and add the following content:

   // Listen for messages from the background script
   browser.runtime.onMessage.addListener((message) => {
     if (message.command === "reloadPage") {
       // Reload the page
       location.reload();
     }
   });

This script listens for messages from the background script and reloads the page when instructed.

The content script is run when you load/reload the addon or when a page is loaded into a tab. The console output of content script can be captured by the F12 console but not by the Ctrl+Shift+J console or by the Inspect console for the extension.

Create the popup HTML: Create a file named popup.html in your extension directory and add any content you want to display in the popup when the browser action button is clicked.
Add icons: Add icon images (icon16.png, icon48.png, icon128.png) in your extension directory. These icons will be displayed for your extension.
Zip your extension: Select all files in your extension directory and create a zip archive.
Install the extension: Open Firefox and navigate to about:debugging. Click on “This Firefox” in the left menu, then click on “Load Temporary Add-on”. Select the zip archive containing your extension files.