mkdir time-usage-extension
cd time-usage-extension

npm install -g web-ext

{
  "manifest_version": 2,
  "name": "Website Time Usage Tracker",
  "description": "Tracks the amount of time spent on different websites",
  "version": "1.0",

  "permissions": [
    "tabs"
  ],

  "background": {
    "scripts": ["background.js"]
  },

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content_script.js"]
    }
  ]
}

const visitedWebsites = {};

browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (tab.active && changeInfo.status === "complete") {
    const hostname = new URL(tab.url).hostname;
    if (!visitedWebsites[hostname]) visitedWebsites[hostname] = 0;
    visitedWebsites[hostname] += 1;
  }
});

const hostname = window.location.hostname;
browser.runtime.sendMessage({
  type: "addUsage",
  hostname: hostname
});

browser.runtime.onMessage.addListener((message, sender) => {
  if (message.type === "addUsage") {
    const hostname = message.hostname;
    if (!visitedWebsites[hostname]) visitedWebsites[hostname] = 0;
    visitedWebsites[hostname] += 1;
  }
});

web-ext build

   "browser_action": {
     "default_popup": "popup.html"
   }
   

mkdir firefox-website-monitor
cd firefox-website-monitor

npm init -y

npm install --save-dev web-ext ff-utils

{
  "manifest_version": 2,
  "name": "Website Monitor",
  "version": "1.0.0",
  "description": "Tracks the time spent on different websites.",
  "icons": {
    "48": "icons/icon-48.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "activeTab",
    "webRequest",
    "sessions",
    "storage"
  ]
}

const storage = chrome.storage.session;
let activeTab = {};

chrome.tabs.onActivated.addListener((tab) => {
  activeTab = tab;
});

chrome.webRequest.onBeforeRequest.addListener((details) => {
  if (details.url.includes("://")) { // Exclude internal browser requests
    storage.get("history", (data) => {
      if (!data.history) {
        data.history = {};
      }

      const hostname = new URL(details.url).hostname;
      const timestamp = new Date().getTime();

      if (hostname in data.history) {
        data.history[hostname].time += timestamp - data.history[hostname].last;
        data.history[hostname].last = timestamp;
      } else {
        data.history[hostname] = {
          time: timestamp - activeTab.lastAccessed,
          last: timestamp
        };
      }

      storage.set({ history: data.history });
    });
  }
}, { urls: ["<all_urls>"] });

npx ff-utils package

mkdir website-time-tracker
cd website-time-tracker

npm init -y

npm install --save @webassemblyjs/wasm-edit @webassemblyjs/helper-buffer node-firefox-webext

{
  "manifest_version": 3,
  "name": "Website Time Tracker",
  "description": "Tracks the amount of time spent on different websites.",
  "version": "1.0",
  "permissions": ["tabs", "webNavigation"],
  "background": {
    "scripts": ["background.js"]
  }
}

// Track start and end times for each website
const siteTimes = {};

// Listen for navigation events
browser.webNavigation.onHistoryStateUpdated.addListener((details) => {
  // Store the start time for the current website
  if (details.frameId === 0) {
    siteTimes[details.url] = new Date();
  }
});

// Listen for tab closed events
browser.tabs.onRemoved.addListener((tabId, removeInfo) => {
  // Calculate the time spent on the closed website
  if (removeInfo.isWindowClosing) {
    return;
  }

  const url = removeInfo.url;
  const startTime = siteTimes[url];
  if (startTime) {
    const endTime = new Date();
    const timeSpent = endTime - startTime;
    console.log(`Time spent on ${url}: ${timeSpent} ms`);
    delete siteTimes[url];
  }
});

npx web-ext build

mkdir my-time-tracker-extension
cd my-time-tracker-extension

web-ext init

{
  "name": "My Time Tracker",
  "version": "1.0",
  "manifest_version": 3,

  "permissions": [
    "activeTab",
    "tabs",
    "storage"
  ],

  "background": {
    "scripts": ["background.js"]
  },

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

browser.tabs.onActivated.addListener((activeInfo) => {
  const tabId = activeInfo.tabId;

  // Start tracking time
  let startTime = Date.now();

  browser.tabs.onRemoved.addListener((tabId, removeInfo) => {
    // Stop tracking time
    let endTime = Date.now();

    // Update the storage with the time spent on the website
    browser.storage.local.get({ websites: {} }).then((data) => {
      let websites = data.websites;

      websites[removeInfo.url] = (websites[removeInfo.url] || 0) + (endTime - startTime);

      browser.storage.local.set({ websites: websites });
    });
  });
});

console.log("Time Tracker Content Script Injected!");

web-ext build

browser.storage.local.get({ websites: {} }).then((data) => {
  console.log(data.websites);
});

mkdir firefox-time-tracker
cd firefox-time-tracker

npm init -y

npm install firefox-addon-sdk --save-dev

{
  "manifest_version": 2,
  "name": "Website Time Tracker",
  "description": "Tracks the time spent on different websites",
  "version": "1.0",
  "browser_specific_settings": {
    "firefox": {
      "id": "{YOUR-EXTENSION-ID}"
    }
  },
  "permissions": ["webRequest"]
}

const { Cu } = require("chrome");

Cu.import("resource://gre/modules/Services.jsm");

Services.obs.addObserver({
  observe: (subject, topic, data) => {
    if (topic === "http-on-modify-request") {
      const request = subject.QueryInterface(Ci.nsIHttpChannel);
      const url = request.URI.spec;
      const startTime = new Date();

      request.addEventListener("load", () => {
        const endTime = new Date();
        const timeSpent = endTime - startTime;

        storage.local.set({ [url]: (storage.local.get(url) ?? 0) + timeSpent });
      });
    }
  }
}, "http-on-modify-request");

<!DOCTYPE html>
<html>
  <head>
    <title>Website Time Tracker Options</title>
  </head>
  <body>
    <h1>Website Time Tracker Options</h1>
    <form>
      <div>
        <label for="max-time">Maximum Time Spent (minutes):</label>
        <input type="number" id="max-time" value="60">
      </div>
      <button type="submit">Save</button>
    </form>
  </body>
</html>

const { getOptions, setOptions } = require("./storage");

document.addEventListener("DOMContentLoaded", () => {
  const options = getOptions();
  document.getElementById("max-time").value = options.maxTime;

  document.querySelector("form").addEventListener("submit", (event) => {
    event.preventDefault();

    const maxTime = document.getElementById("max-time").value;
    setOptions({ maxTime });

    alert("Settings saved successfully!");
  });
});

webpack