Creating a Simple Firefox Extension

About

This will be short overview what steps it takes and how code looks of very simple browser extension.

Goal

Extension will have simple background script which creates loop and shows native notification with static content every 30 second.

File Structure

For minimal extension setup only manifest.json file is required but without including some scripts it would not do much, thus just-sample.js is added with main extension code.

Extension Folder
  + icons
  - manifest.json
  - just-sample.js

File Content

Here manifest.json content. Long lived scripts should be added to background section and since this extension would use notification feature it needs to be defined in permissions array.

{
  "manifest_version": 2,
  "name": "Annoying-Notifications",
  "version": "1.0",

  "description": "Sample browser extension to annoy user with useless notifications :)",

  "icons": {
    "48": "icons/notification_black_48dp.png"
  },

  "background": {
    "scripts": ["just-sample.js"]
  },

  "permissions": ["notifications"]
}

Based on documentation only manifest_version, name, and version, are mandatory.

Main script is simple and can be split into following parts:

1. There is createNotification function which act as notifications factory.
2. Another function mainLoop calls to itself recursively to avoid blocking thread. Function goal is call createNotification and wait for 30 seconds and then repeat same thing.
3. Script body only calls mainLoop once (when extension is initialized). However, since mainLoop calls to itself endlessly notification shows up after 30 seconds repeatable.

Demo

Short demo video to demonstrate extension in action. Please note that video is trimmed thus testing extension locally it will take more time for notification to show up.

Conclusion

While this sample does not do much it demonstrate how to get started and what to expect when developing Firefox extension.

References

• Source code: https://github.com/struggzard/firefox-extension-sample
• Documentation: https://developer.mozilla.org
• Cover image: https://unsplash.com/photos/4xmVvHRioKg