Preact Developer Tools

Only works with Preact 10.1.0 upwards Debugging tools for Preact. This extension allows you to inspect the component hierarchy and change properties on the fly.

Upgrade to view and diff full source code

Additional files are visible only to premium users

manifest.json

{
  "manifest_version": 2,
  "name": "Preact Developer Tools",
  "description": "Adds debugging tools for Preact to Firefox",
  "version": "4.7.2",
  "devtools_page": "panel/empty-panel.html",
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "permissions": [
    "file:///*",
    "http://*/*",
    "https://*/*",
    "storage"
  ],
  "applications": {
    "gecko": {
      "id": "[email protected]"
    }
  },
  "icons": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png",
    "192": "icons/icon-192.png"
  },
  "browser_action": {
    "default_icon": {
      "16": "icons/icon-16-disabled.png",
      "32": "icons/icon-32-disabled.png",
      "48": "icons/icon-48-disabled.png",
      "128": "icons/icon-128-disabled.png",
      "192": "icons/icon-192-disabled.png"
    },
    "default_popup": "popup/disabled.html"
  },
  "background": {
    "scripts": [
      "background/background.js"
    ]
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "content-script.js"
      ],
      "all_frames": true,
      "run_at": "document_start"
    }
  ],
  "web_accessible_resources": [
    "preact-devtools-page.css"
  ]
}