↓Skip to main content
  1. Posts/

How the fuck do i create a firefox extension?

·548 words·3 mins·
Linux Firefox Web_development
Table of Contents

TODO:
#

#10/05/2025

  • how to create a firefox extension the basics
  • how to get the content of the page and store it locally
  • how to debug in th emost efficient way possible
  • how to send data and receive it
  • how to store data in the most secure way possible

Basics
#

The files you should have

  • manifest.js : the configuration that is needed => most important part

  • background.js (optional):

    • more details on why use it above

  • popup.html : Ui shown in popup

    • basically the thing that displays

  • popup.js:

    • script for the popup UI,
    • here we handle the UI of the extension, and
    • we send messages to the other elements

  • content.js: runs in the context of webpages

    • Listen for messages from the background script
    • runs the thing on the page so here we extract the job details, and we send them back to the background script
    • but why do we separa te the content script from the background script?
      • because the content script is injected into the page and has access to the DOM, while the background script runs in a separate context and can manage events, alarms, etc.
    • TODO: confim these infos

  • style.css : styles for popup or/and sidebar

  • icons/: Icon assets

background.js
#

The background script plays the role of a central controller or long-running manager in the extension

  • Why not just message content_script directly from popup.js?

    • You can message content.js directly but only if the tab is active and already has the script injected.
    • You cannot access tabs, perform cross-tab communication, or manage lifecycle events directly from popup.js.
    • Also, popup.js dies when the popup closes — it’s temporary.

  • Main Roles of background.js

    1. Persistent Event Listener

      • Background stays alive (or is re-activated in MV3) even when the popup is closed.
        • wtf is MV3?
      • Ideal for listening to tab updates, browser actions, web requests, etc.

    2. Access to Privileged APIs

      • content.js cannot use powerful APIs like tabs, windows, webRequest, etc.
        • TODO: learn more about tabs, windows , webReqest
      • background.js can.

    3. State Management

      • You can use it to maintain state across tabs, long-term storage, or for setting alarms, listeners, etc.

    4. Communication Hub

      • Acts as a middleman between popup.js and content.js, especially if the tab isn’t active or known.
// popup.js
	browser.runtime.sendMessage({ action: "fill_form" });
	
// background.js
browser.runtime.onMessage.addListener((message, sender) => {
  if (message.action === "fill_form") {
	browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
	  browser.tabs.sendMessage(tabs[0].id, { action: "fill_form" });
	});
  }
});

// content.js
browser.runtime.onMessage.addListener((msg) => {
  if (msg.action === "fill_form") {
	// Do autofill
  }
});
  • When Do You Need background.js?
    • You want to act on multiple tabs or windows
    • You need persistent scripts
    • You handle events like browser startup, tab updates, web requests
    • You want clean architecture separating UI and logic

  • We can use an extension in order to debug the thing

  • How does the files interact with each-other?

    • popup.js reads the things if a button is clicked in the extension
    • then it sends a message to background.js
    • and then background sends a message to content.js

  • What’s the syntax by which they talk:

// popup.js
browser.runtime.sendMessage({ action: "autofill" });

// background.js
browser.runtime.onMessage.addListener((message) => {
  if (message.action === "autofill") {
    console.log("Trigger autofill");
  }
});
  • TODO: learn more about browser.runtime API and see if it’s necessary to add the sender or not when in sendMessage