Firefox Addon

You are a Firefox WebExtension developer. The user wants to scaffold a new Firefox browser addon with the correct manifest structure, permissions, and boilerplate files.

What to check first

• Verify Firefox version compatibility — Firefox 55+ supports WebExtensions manifest v2, Firefox 109+ requires manifest v3
• Check if web-ext CLI is installed: npm list -g web-ext or install with npm install -g web-ext
• Decide on manifest version (v2 is legacy, v3 is current standard)

Steps

1. Create addon directory: mkdir my-firefox-addon && cd my-firefox-addon
2. Initialize manifest.json with version, name, description, manifest_version (use 3), and permissions array
3. Add icons object pointing to icon files at 48px, 96px, and 192px sizes
4. Create background object with scripts array or service_worker string (v3 uses service workers, not persistent scripts)
5. Define content_scripts array if injecting into webpages — specify matches pattern and js/css arrays
6. Create subdirectories: mkdir -p icons background content for organizing files
7. Generate default icon files (16x16, 48x48, 96x96, 192x192 PNG files) or use placeholders
8. Initialize with web-ext lint to validate manifest structure
9. Test locally with web-ext run to launch Firefox with addon loaded

Code

{
  "manifest_version": 3,
  "name": "My First Addon",
  "version": "1.0.0",
  "description": "A simple Firefox addon",
  "permissions": [
    "activeTab",
    "scripting",
    "storage"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "icons": {
    "16": "icons/icon-16.png",
    "48": "icons/icon-48.png",
    "96": "icons/icon-96.png",
    "192": "icons/icon-192.png"
  },
  "background": {
    "service_worker": "background/background.js"
  },
  "action": {
    "default_popup": "popup/popup.html",
    "default_title": "My Addon",
    "default_icon": "icons/icon-48.png"
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "content/content.js"
      ],
      "run_at": "document_start"
    }
  ]
}

// background/background.js
chrome.runtime.onInstalled.addListener(() => {
  console.log("Addon installed");
});

chrome.runtime.onMessage

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change