DEV Community

Cover image for Creating a Simple Firefox Extension

Posted on

Creating a Simple Firefox Extension


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


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
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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.


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.


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


Top comments (0)