{
  "id": "stack-profile:browser-extension",
  "_kind": "StackProfile",
  "_file": "domain/stack-profiles/deep-stacks-7.yaml",
  "_cluster": "domain",
  "attributes": {
    "displayName": "Browser Extension (TypeScript, React, Webpack, Vitest)",
    "description": "A cross-browser extension built with TypeScript and React, packaging\npopup UIs, content scripts, background service workers, and options\npages into a single distributable extension. Webpack bundles multiple\nentry points (background, content, popup) with shared code splitting\nand hot-reload support during development. React renders the popup\nand options interfaces, while content scripts inject UI overlays into\ntarget web pages using Shadow DOM for style isolation. TypeScript\nprovides type-safe messaging between extension contexts (background,\ncontent, popup) through Chrome's runtime messaging API. Vitest tests\nbusiness logic in isolation. The tradeoff is managing the complex\nlifecycle across multiple execution contexts and the divergent APIs\nbetween Chrome and Firefox, but extensions provide unique capabilities\nlike page manipulation and cross-site data that web apps cannot access.\n",
    "composes": [
      "language:typescript",
      "framework:react",
      "tool:webpack",
      "library:zustand",
      "library:tailwindcss",
      "library:shadcn",
      "tool:vitest",
      "tool:eslint"
    ]
  },
  "outgoingEdges": [
    {
      "from": "stack-profile:browser-extension",
      "to": "language:typescript",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "framework:react",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "tool:webpack",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "library:zustand",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "library:tailwindcss",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "library:shadcn",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "tool:vitest",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "tool:eslint",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "role:frontend-engineer",
      "kind": "used_by_role"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "role:fullstack-engineer",
      "kind": "used_by_role"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "workflow:feature-development",
      "kind": "follows_workflow"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "workflow:release-management",
      "kind": "follows_workflow"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "domain:web-development",
      "kind": "applies_to"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "domain:frontend",
      "kind": "applies_to"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "skill-area:frontend-development",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "skill-area:react-components",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "skill-area:browser-compatibility",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "skill-area:web-security",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "skill-area:application-state-management",
      "kind": "requires_skill_area"
    }
  ],
  "incomingEdges": []
}