Examine source code of CSS DNA — Inspect CSS & Extract Design Tokens

Par : CSS DNA

Inspect and view changes in CSS DNA — Inspect CSS & Extract Design Tokens source codes across current and past versions

Please login to examine the extension's source code.

manifest.json

{
  "manifest_version": 3,
  "name": "CSS DNA — Inspect CSS & Extract Design Tokens",
  "version": "4.6.2",
  "description": "Inspect any element's CSS and extract a site's colors, fonts & design tokens — export to Tailwind, CSS, JSON, Figma & more.",
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_title": "CSS DNA",
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "permissions": [
    "activeTab",
    "scripting",
    "storage",
    "alarms"
  ],
  "commands": {
    "toggle-inspect": {
      "suggested_key": {
        "default": "Alt+Shift+S"
      },
      "description": "Toggle CSS DNA inspector on the current page"
    }
  },
  "web_accessible_resources": [
    {
      "resources": [
        "overlay.css"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ],
  "browser_specific_settings": {
    "gecko": {
      "id": "cssdna@cssdna.com",
      "strict_min_version": "140.0",
      "data_collection_permissions": {
        "required": [
          "none"
        ],
        "optional": [
          "personallyIdentifyingInfo"
        ]
      }
    }
  }
}