{"componentChunkName":"component---src-templates-docs-js","path":"/integrations/chrome-extension","result":{"data":{"site":{"siteMetadata":{"title":"Documentation | DesignerBox","docsLocation":""}},"mdx":{"fields":{"id":"e46d9e12-05e2-513b-b981-8f0840135e59","title":"Chrome Extension","slug":"/integrations/chrome-extension","locale":"en-GB"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"Chrome Extension\",\n  \"metaTitle\": \"Chrome Extension | DesignerBox\",\n  \"metaDescription\": \"Generate DesignerBox images and video from a Chrome side panel on any page: right-click references, keyboard shortcut, and your full library.\",\n  \"order\": 4\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Chrome Extension\"), mdx(\"p\", null, \"The \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"DesignerBox Chrome extension\"), \" puts image and video generation in a browser side panel, so you can create while you browse without opening the app. It uses your existing DesignerBox account and credits.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"800px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/docs/static/f8a4413a482934f8ade8e6c3d5e53813/eea4a/chrome-extension.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"62.5%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHGEtUhQ//EABkQAAIDAQAAAAAAAAAAAAAAAAIDAAESIP/aAAgBAQABBQLN8C4hXP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABkQAAEFAAAAAAAAAAAAAAAAAAECECAxQf/aAAgBAQAGPwLIFAot/8QAGBABAQEBAQAAAAAAAAAAAAAAAQARIZH/2gAIAQEAAT8hS7vqBSXsyVdtbd7f/9oADAMBAAIAAwAAABCA3//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAwEBPxCNr//EABYRAQEBAAAAAAAAAAAAAAAAAAARMf/aAAgBAgEBPxDFf//EABsQAQACAgMAAAAAAAAAAAAAAAEAESExUXHR/9oACAEBAAE/EBbV9YYDOUs9iCHYwVAXA+aKSlV2s//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"The DesignerBox side panel in Chrome, with the Image, Video, Character, Templates, and Library tabs\",\n    \"title\": \"The DesignerBox side panel in Chrome, with the Image, Video, Character, Templates, and Library tabs\",\n    \"src\": \"/docs/static/f8a4413a482934f8ade8e6c3d5e53813/4b190/chrome-extension.jpg\",\n    \"srcSet\": [\"/docs/static/f8a4413a482934f8ade8e6c3d5e53813/e07e9/chrome-extension.jpg 200w\", \"/docs/static/f8a4413a482934f8ade8e6c3d5e53813/066f9/chrome-extension.jpg 400w\", \"/docs/static/f8a4413a482934f8ade8e6c3d5e53813/4b190/chrome-extension.jpg 800w\", \"/docs/static/f8a4413a482934f8ade8e6c3d5e53813/e5166/chrome-extension.jpg 1200w\", \"/docs/static/f8a4413a482934f8ade8e6c3d5e53813/eea4a/chrome-extension.jpg 1280w\"],\n    \"sizes\": \"(max-width: 800px) 100vw, 800px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"h2\", null, \"Install and sign in\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Install \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://chromewebstore.google.com/detail/lnfnpeldmeakchicdbemejmlgdpjefjp\"\n  }, \"DesignerBox: AI Image and Video Generator\"), \" from the Chrome Web Store (Chrome 116 or newer).\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Sign in at \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://designerbox.ai\"\n  }, \"https://designerbox.ai\"), \" in the same browser; the panel picks up your session automatically.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Open the panel from the toolbar icon, with \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Alt+Shift+D\"), \", or by typing \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"db\"), \" in the address bar.\")), mdx(\"h2\", null, \"What you can do\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Generate from anywhere\"), \" - write a prompt in the side panel and generate images or video on top of whatever page you are on.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Use the page as input\"), \" - right-click any image and choose \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Use image in DesignerBox\"), \" to add it as a reference, or right-click selected text to turn it into a prompt.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Reference your assets\"), \" - type @ in the prompt to mention images from your library as references.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Apply templates\"), \" - run the same curated templates as the app.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Take results with you\"), \" - copy a result to the clipboard or drag it straight onto a page or your desktop; everything is also saved to \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/docs/features/brand-profile\"\n  }, \"My Library\"), \".\")), mdx(\"p\", null, \"Video and character generations keep running in the background, and the extension notifies you when they finish.\"), mdx(\"h2\", null, \"Credits\"), mdx(\"p\", null, \"The extension spends the same monthly credits as the app; there is no separate allowance. See \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/docs/knowledge-base/plans-credits-and-limits\"\n  }, \"Plans, Credits, and Limits\"), \".\"), mdx(\"h2\", null, \"Related\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/docs/integrations/mcp\"\n  }, \"MCP\"), \" - connect an AI assistant to your account instead of a panel.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/docs/features/image-generation\"\n  }, \"AI Image\"), \" - the full in-app composer.\")));\n}\n;\nMDXContent.isMDXComponent = true;","rawBody":"---\ntitle: \"Chrome Extension\"\nmetaTitle: \"Chrome Extension | DesignerBox\"\nmetaDescription: \"Generate DesignerBox images and video from a Chrome side panel on any page: right-click references, keyboard shortcut, and your full library.\"\norder: 4\n---\n\n# Chrome Extension\n\nThe **DesignerBox Chrome extension** puts image and video generation in a browser side panel, so you can create while you browse without opening the app. It uses your existing DesignerBox account and credits.\n\n![The DesignerBox side panel in Chrome, with the Image, Video, Character, Templates, and Library tabs](../images/docs/chrome-extension.jpg)\n\n## Install and sign in\n\n1. Install [DesignerBox: AI Image and Video Generator](https://chromewebstore.google.com/detail/lnfnpeldmeakchicdbemejmlgdpjefjp) from the Chrome Web Store (Chrome 116 or newer).\n2. Sign in at [https://designerbox.ai](https://designerbox.ai) in the same browser; the panel picks up your session automatically.\n3. Open the panel from the toolbar icon, with **Alt+Shift+D**, or by typing `db` in the address bar.\n\n## What you can do\n\n- **Generate from anywhere** - write a prompt in the side panel and generate images or video on top of whatever page you are on.\n- **Use the page as input** - right-click any image and choose **Use image in DesignerBox** to add it as a reference, or right-click selected text to turn it into a prompt.\n- **Reference your assets** - type @ in the prompt to mention images from your library as references.\n- **Apply templates** - run the same curated templates as the app.\n- **Take results with you** - copy a result to the clipboard or drag it straight onto a page or your desktop; everything is also saved to [My Library](/features/brand-profile).\n\nVideo and character generations keep running in the background, and the extension notifies you when they finish.\n\n## Credits\n\nThe extension spends the same monthly credits as the app; there is no separate allowance. See [Plans, Credits, and Limits](/knowledge-base/plans-credits-and-limits).\n\n## Related\n\n- [MCP](/integrations/mcp) - connect an AI assistant to your account instead of a panel.\n- [AI Image](/features/image-generation) - the full in-app composer.\n","tableOfContents":{"items":[{"url":"#chrome-extension","title":"Chrome Extension","items":[{"url":"#install-and-sign-in","title":"Install and sign in"},{"url":"#what-you-can-do","title":"What you can do"},{"url":"#credits","title":"Credits"},{"url":"#related","title":"Related"}]}]},"parent":{"__typename":"File","relativePath":"en/integrations/chrome-extension.md"},"frontmatter":{"metaTitle":"Chrome Extension | DesignerBox","metaDescription":"Generate DesignerBox images and video from a Chrome side panel on any page: right-click references, keyboard shortcut, and your full library.","order":4}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/features","title":"Features"}}},{"node":{"fields":{"slug":"/knowledge-base","title":"Knowledge Base"}}},{"node":{"fields":{"slug":"/pricing-faqs","title":"Pricing FAQs"}}},{"node":{"fields":{"slug":"/integrations","title":"Integrations"}}},{"node":{"fields":{"slug":"/guides","title":"Guides"}}},{"node":{"fields":{"slug":"/","title":"DesignerBox Documentation"}}},{"node":{"fields":{"slug":"/features/avatars-and-models","title":"AI Character"}}},{"node":{"fields":{"slug":"/features/ai-assistant","title":"DesignerBox AI"}}},{"node":{"fields":{"slug":"/features/brand-profile","title":"Brand Profile and Library"}}},{"node":{"fields":{"slug":"/features/apps","title":"Apps"}}},{"node":{"fields":{"slug":"/features/cinema-studio","title":"Cinema Studio"}}},{"node":{"fields":{"slug":"/features/gallery","title":"Gallery"}}},{"node":{"fields":{"slug":"/features/community","title":"Community"}}},{"node":{"fields":{"slug":"/features/image-generation","title":"AI Image"}}},{"node":{"fields":{"slug":"/features/relighting-and-angles","title":"Relighting and Angles"}}},{"node":{"fields":{"slug":"/features/skills","title":"Skills"}}},{"node":{"fields":{"slug":"/features/photo-packs","title":"Photo Packs"}}},{"node":{"fields":{"slug":"/features/stock-and-audio","title":"Stock Library and Audio"}}},{"node":{"fields":{"slug":"/features/video","title":"AI Video"}}},{"node":{"fields":{"slug":"/features/techniques-and-templates","title":"Techniques and Templates"}}},{"node":{"fields":{"slug":"/features/workflows-and-canvas","title":"Workflows and the Canvas"}}},{"node":{"fields":{"slug":"/features/video-studio","title":"Video Studio"}}},{"node":{"fields":{"slug":"/features/virtual-try-on","title":"Virtual Try-On"}}},{"node":{"fields":{"slug":"/guides/building-workflows-on-the-canvas","title":"Building Workflows on the Canvas"}}},{"node":{"fields":{"slug":"/guides/creating-videos","title":"Creating Videos"}}},{"node":{"fields":{"slug":"/guides/teams-and-brand-profiles","title":"Teams and Brand Profiles"}}},{"node":{"fields":{"slug":"/guides/using-techniques-and-templates","title":"Using Techniques and Templates"}}},{"node":{"fields":{"slug":"/features/upscaling","title":"Upscaling"}}},{"node":{"fields":{"slug":"/guides/create-your-first-image","title":"Create Your First Image"}}},{"node":{"fields":{"slug":"/integrations/chrome-extension","title":"Chrome Extension"}}},{"node":{"fields":{"slug":"/integrations/api","title":"API"}}},{"node":{"fields":{"slug":"/integrations/mcp","title":"MCP"}}},{"node":{"fields":{"slug":"/integrations/white-label","title":"White-Label"}}},{"node":{"fields":{"slug":"/knowledge-base/how-to-update-card-details","title":"How to Update Card Details"}}},{"node":{"fields":{"slug":"/knowledge-base/plans-credits-and-limits","title":"Plans, Credits, and Limits"}}},{"node":{"fields":{"slug":"/knowledge-base/referrals","title":"Referrals and Free Credits"}}},{"node":{"fields":{"slug":"/knowledge-base/understanding-declined-card-payments","title":"Understanding Declined Card Payments"}}},{"node":{"fields":{"slug":"/features/image-generation/editing-modes","title":"Editing Modes"}}},{"node":{"fields":{"slug":"/features/workflows-and-canvas/node-types","title":"Node Types"}}}]}},"pageContext":{"id":"e46d9e12-05e2-513b-b981-8f0840135e59","locale":"en-GB"}},"staticQueryHashes":["361965504","361965504","417421954","417421954","445494767","445494767"]}