{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/browser-extensions/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Browser extensions\",\n  \"beta\": true\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `Polypane has support for Chromium developer tools extensions as well as limited support for regular Chromium browser extensions.`), mdx(\"img\", {\n    src: extensions1,\n    alt: \"The extensions icon in the header\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `In the Polypane address bar you will find a puzzle piece icon, similar to Chrome. Click this to toggle the visibility of the browser extension list, or right-click it to open the extension manager.`), mdx(\"img\", {\n    src: extensions2,\n    alt: \"The extensions icon in the header, expanded to show the extensions\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, `When you have no extensions installed, the icon will default to opening the extension manager when clicked.`)), mdx(\"h2\", {\n    \"id\": \"before-you-start\"\n  }, `Before you start`), mdx(\"p\", null, `There's a few things to keep in mind when using browser extensions in Polypane:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Beta:`), ` Polypane's support of regular browser extensions is currently experimental and has limitations outlined below.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Polypane is filled with features and tools to help you build better web pages.`), ` Extensions you reach for in other browsers aren't needed in Polypane.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `We recommend `, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `trying out Polypane's native features`), ` first, as they are designed to work well together and are optimized for web development.`)), mdx(\"h3\", {\n    \"id\": \"limitations\"\n  }, `Limitations`), mdx(\"p\", null, `Polypane is built on Electron, which has limited support for the Chrome Extension API. This means not all extensions will work. Known limitations include:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Extensions using the \"sync\" storage API will fail silently.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Extensions using the WebRequest API do not have access beyond the currently loaded page.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `We rewrite some extension access requirements to work with Polypane.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Polypane doesn't support extensions that overwrite your new tab page, use the sidebar API or use the Commands API (e.g. keyboard shortcuts).`)), mdx(\"p\", null, `If an extension doesn't work and you think it should, `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/support/\"\n  }), `let us know`), `.`), mdx(\"h2\", {\n    \"id\": \"supported-extensions\"\n  }, `Supported extensions`), mdx(\"p\", null, `The extensions below at the time of testing worked with Polypane:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `1Password`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Bitwarden`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Grammarly`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `KeePassXC-Browser`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `LastPass`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Linguix`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Lorem Ipsum Generator (also available in the `, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/command-bar/\"\n  }), `command bar`), `)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Mate Translate`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Simple Translate`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `VisBug`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Web Developer (similar features are `, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/debug-tools/\"\n  }), `built`), ` `, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `into`), ` `, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/docs/accessibility-overview/\"\n  }), `Polypane`), `)`)), mdx(\"p\", null, `We also support a large number of developer tool extensions:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Angular DevTools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Angular State Inspector`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Alpinejs devtools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Apollo Client Developer Tools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Atomic CSS Devtools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `ARC toolkit`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Backbone Debugger`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Clockwork`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `CSS Stacking Context`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Ember Inspector`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Gimli Tailwind CSS`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Gimli Bootstrap`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Meteor DevTools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `React Developer Tools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Redux DevTools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Svelte Developer Tools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Scroll-Driven Animations Debugger`)), mdx(\"p\", null, `If you use a particular extension not listed here, please `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/support/\"\n  }), `let us know`), ` and we'll add it.`), mdx(\"h3\", {\n    \"id\": \"1password-desktop-app-integration\"\n  }, `1Password desktop app integration`), mdx(\"p\", null, `You can integrate the 1Password browser extension with the 1Password desktop app on MacOS and Linux, allowing you to log in with a passkey through the desktop app and automatically unlock the browser extension. Follow the steps here: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/1-password-setup-instructions/\"\n  }), `1Password setup instructions`), `.`), mdx(\"h3\", {\n    \"id\": \"extensions-work-on-a-single-pane-at-a-time\"\n  }, `Extensions work on a single pane at a time`), mdx(\"p\", null, `Chromium extensions only work for a single pane at the same time, so a puzzle piece is shown in front of a pane title to indicate which pane is currently the extension target. Interacting with any pane will make that pane the target and the puzzle piece icon will become visible there.`), mdx(\"img\", {\n    src: extensions4,\n    alt: \"The extensions icon above a pane indicating it's active for extensions.\",\n    className: \"imgshadow\"\n  }), mdx(\"h2\", {\n    \"id\": \"install-extensions\"\n  }, `Install extensions`), mdx(\"p\", null, `You can install Chromium extensions (addons) in Polypane directly from the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://chromewebstore.google.com/\"\n  }), `Chrome web store`), `. Click \"Add to Polypane\" on an extension page to install it in Polypane.`), mdx(\"h3\", {\n    \"id\": \"extension-manager\"\n  }, `Extension manager`), mdx(\"p\", null, `The extension manager shows you which extensions you have installed, and allows you to manage them. You can open it by clicking the \"Extensions\" icon in the header, or by going to the \"Edit\" main menu, then \"configurators\", then \"Browser extensions\".`), mdx(\"img\", {\n    src: extensions3,\n    alt: \"The extensions manager\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `You can remove and update devtools extensions via this manager.`), mdx(\"h3\", {\n    \"id\": \"browse-panel\"\n  }, `Browse panel`), mdx(\"p\", null, `When you open a Chrome web store link in `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/browse/\"\n  }), `the browse panel`), `, Polypane will automatically show an \"add\" or \"remove\" button in the address bar, from which you can quickly add or remove the extension.`), mdx(\"img\", {\n    src: browseext1,\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `After adding the extension is available immediately. More information on installing extensions in the browse panel can be found in `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/browse/#installing-browser-extensions\"\n  }), `Installing browser extensions`), `.`), mdx(\"h3\", {\n    \"id\": \"troubleshooting-extensions\"\n  }, `Troubleshooting extensions`), mdx(\"p\", null, `Some extensions might prevent Polypane from launching correctly or cause it to crash. If you can't uninstall these extensions though the manager, the extension can be removed manually by following the next steps:`), mdx(\"p\", null, `First, close Polypane fully. Then open the following directory:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `On Windows: `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `%APPDATA%/Polypane/Extensions/`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `On macOS: `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `~/Library/Application Support/Polypane/Extensions/`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `On Linux: `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `~/.config/Polypane/Extensions/`))), mdx(\"p\", null, `This folder contains all the extensions you have installed in Polypane, each in its own subfolder named after the extension ID. You can find the ID of an extension by going to the extension's page in the Chrome Web Store and looking at the URL, which ends with a string of characters (the ID).`), mdx(\"p\", null, `Delete the folder with the ID of the extension you want to remove, and then restart Polypane.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":3,"excerpt":"Polypane has support for Chromium developer tools extensions as well as limited support for regular Chromium browser extensions. In the…","frontmatter":{"title":"Browser extensions","cover":null,"date":null,"beta":true},"fields":{"nextTitle":"Devtools Panel","nextSlug":"/docs/devtools-panel/","prevTitle":"Detecting Polypane","prevSlug":"/docs/detecting-polypane/","slug":"/docs/browser-extensions/","date":null,"ogFileName":"browser-extensions"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/docs/1-password-setup-instructions/"},"frontmatter":{"title":"1Password setup instructions"}}},{"node":{"fields":{"slug":"/docs/accessibility-audit-workflow/"},"frontmatter":{"title":"Accessibility audit workflow"}}},{"node":{"fields":{"slug":"/docs/accessibility-overview/"},"frontmatter":{"title":"Accessibility overview"}}},{"node":{"fields":{"slug":"/docs/accessibility-panel/"},"frontmatter":{"title":"Accessibility panel"}}},{"node":{"fields":{"slug":"/docs/application-folder/"},"frontmatter":{"title":"Application folder"}}},{"node":{"fields":{"slug":"/docs/brand-guidelines/"},"frontmatter":{"title":"Brand guidelines"}}},{"node":{"fields":{"slug":"/docs/breakpoints/"},"frontmatter":{"title":"Breakpoints"}}},{"node":{"fields":{"slug":"/docs/browse/"},"frontmatter":{"title":"Browse"}}},{"node":{"fields":{"slug":"/docs/browser-extensions/"},"frontmatter":{"title":"Browser extensions"}}},{"node":{"fields":{"slug":"/docs/browser-features/"},"frontmatter":{"title":"Browser features"}}},{"node":{"fields":{"slug":"/docs/browsersync-and-polypane/"},"frontmatter":{"title":"Browsersync and Polypane"}}},{"node":{"fields":{"slug":"/docs/color-picker/"},"frontmatter":{"title":"Color Picker"}}},{"node":{"fields":{"slug":"/docs/command-bar/"},"frontmatter":{"title":"Command Bar"}}},{"node":{"fields":{"slug":"/docs/command-line-options/"},"frontmatter":{"title":"Command line options"}}},{"node":{"fields":{"slug":"/docs/configuring-logitech-mouses/"},"frontmatter":{"title":"Configuring Logitech mouses"}}},{"node":{"fields":{"slug":"/docs/configuring-webstorm-to-work-with-polypane/"},"frontmatter":{"title":"Configuring WebStorm to work with Polypane"}}},{"node":{"fields":{"slug":"/docs/console/"},"frontmatter":{"title":"Console"}}},{"node":{"fields":{"slug":"/docs/customizing-polypane/"},"frontmatter":{"title":"Customizing Polypane"}}},{"node":{"fields":{"slug":"/docs/dark-and-light-mode/"},"frontmatter":{"title":"Dark and light mode"}}},{"node":{"fields":{"slug":"/docs/data-processing-agreement/"},"frontmatter":{"title":"Data Processing Agreement"}}},{"node":{"fields":{"slug":"/docs/debug-tools/"},"frontmatter":{"title":"Debug tools"}}},{"node":{"fields":{"slug":"/docs/detecting-polypane/"},"frontmatter":{"title":"Detecting Polypane"}}},{"node":{"fields":{"slug":"/docs/developer-tools/"},"frontmatter":{"title":"Developer tools"}}},{"node":{"fields":{"slug":"/docs/device-presets/"},"frontmatter":{"title":"Device presets"}}},{"node":{"fields":{"slug":"/docs/devtools-panel/"},"frontmatter":{"title":"Devtools Panel"}}},{"node":{"fields":{"slug":"/docs/elements-panel/"},"frontmatter":{"title":"Elements Panel"}}},{"node":{"fields":{"slug":"/docs/emulation/"},"frontmatter":{"title":"Emulation"}}},{"node":{"fields":{"slug":"/docs/experimental-chromium-features/"},"frontmatter":{"title":"Experimental Chromium features"}}},{"node":{"fields":{"slug":"/docs/find-elements/"},"frontmatter":{"title":"Find elements"}}},{"node":{"fields":{"slug":"/docs/form-autofill/"},"frontmatter":{"title":"Form autofill"}}},{"node":{"fields":{"slug":"/docs/global-zoom/"},"frontmatter":{"title":"Global zoom"}}},{"node":{"fields":{"slug":"/docs/helper-extension-for-other-browsers/"},"frontmatter":{"title":"Helper extension for other browsers"}}},{"node":{"fields":{"slug":"/docs/horizontal-overflow/"},"frontmatter":{"title":"Horizontal overflow detection"}}},{"node":{"fields":{"slug":"/docs/integrations/"},"frontmatter":{"title":"Integrations"}}},{"node":{"fields":{"slug":"/docs/intro-to-panel/"},"frontmatter":{"title":"Intro to panel"}}},{"node":{"fields":{"slug":"/docs/intro-to-panes/"},"frontmatter":{"title":"Intro to panes"}}},{"node":{"fields":{"slug":"/docs/json-and-xml-viewer/"},"frontmatter":{"title":"JSON and XML viewer"}}},{"node":{"fields":{"slug":"/docs/known-issues/"},"frontmatter":{"title":"Known issues"}}},{"node":{"fields":{"slug":"/docs/layout-debugging/"},"frontmatter":{"title":"Layout debugging"}}},{"node":{"fields":{"slug":"/docs/layouts/"},"frontmatter":{"title":"Layouts"}}},{"node":{"fields":{"slug":"/docs/link/"},"frontmatter":{"title":"Share panel"}}},{"node":{"fields":{"slug":"/docs/list-of-shortcuts/"},"frontmatter":{"title":"List of shortcuts"}}},{"node":{"fields":{"slug":"/docs/live-auto-reloading/"},"frontmatter":{"title":"Live/auto reloading"}}},{"node":{"fields":{"slug":"/docs/making-screenshots/"},"frontmatter":{"title":"Making screenshots"}}},{"node":{"fields":{"slug":"/docs/measure-text-length/"},"frontmatter":{"title":"Measure text length"}}},{"node":{"fields":{"slug":"/docs/mental-model/"},"frontmatter":{"title":"Mental model of Polypane's browser contexts"}}},{"node":{"fields":{"slug":"/docs/message-bus/"},"frontmatter":{"title":"Message Bus"}}},{"node":{"fields":{"slug":"/docs/meta-information/"},"frontmatter":{"title":"Meta information"}}},{"node":{"fields":{"slug":"/docs/network-panel/"},"frontmatter":{"title":"Network panel"}}},{"node":{"fields":{"slug":"/docs/other-tools/"},"frontmatter":{"title":"Polypane and local servers"}}},{"node":{"fields":{"slug":"/docs/outline-panel/"},"frontmatter":{"title":"Outline Panel"}}},{"node":{"fields":{"slug":"/docs/pane-management/"},"frontmatter":{"title":"Manage panes"}}},{"node":{"fields":{"slug":"/docs/pane-sizes/"},"frontmatter":{"title":"Pane sizes"}}},{"node":{"fields":{"slug":"/docs/performance/"},"frontmatter":{"title":"Performance"}}},{"node":{"fields":{"slug":"/docs/pitching-polypane/"},"frontmatter":{"title":"Pitching Polypane"}}},{"node":{"fields":{"slug":"/docs/polypane-peek/"},"frontmatter":{"title":"Polypane Peek"}}},{"node":{"fields":{"slug":"/docs/portal/"},"frontmatter":{"title":"Polypane Portal"}}},{"node":{"fields":{"slug":"/docs/projects/"},"frontmatter":{"title":"Projects"}}},{"node":{"fields":{"slug":"/docs/recording/"},"frontmatter":{"title":"Recording"}}},{"node":{"fields":{"slug":"/docs/reference-image/"},"frontmatter":{"title":"Reference image"}}},{"node":{"fields":{"slug":"/docs/reload-css/"},"frontmatter":{"title":"Reload CSS"}}},{"node":{"fields":{"slug":"/docs/responsive-debugging-workflow/"},"frontmatter":{"title":"Responsive debugging workflow"}}},{"node":{"fields":{"slug":"/docs/review-and-approval-by-it-and-security/"},"frontmatter":{"title":"Review and approval by IT and Security"}}},{"node":{"fields":{"slug":"/docs/rulers-grids-and-guides/"},"frontmatter":{"title":"Rulers, grids and guides"}}},{"node":{"fields":{"slug":"/docs/sales-and-procurement/"},"frontmatter":{"title":"Sales and Procurement"}}},{"node":{"fields":{"slug":"/docs/security-policy/"},"frontmatter":{"title":"Security Policy"}}},{"node":{"fields":{"slug":"/docs/security/"},"frontmatter":{"title":"Security"}}},{"node":{"fields":{"slug":"/docs/session-management/"},"frontmatter":{"title":"Session management"}}},{"node":{"fields":{"slug":"/docs/setup/"},"frontmatter":{"title":"Setup"}}},{"node":{"fields":{"slug":"/docs/showing-multiple-urls/"},"frontmatter":{"title":"Showing multiple URLs"}}},{"node":{"fields":{"slug":"/docs/simulators/"},"frontmatter":{"title":"Simulators"}}},{"node":{"fields":{"slug":"/docs/snippets/"},"frontmatter":{"title":"Snippets"}}},{"node":{"fields":{"slug":"/docs/social-card-and-open-graph-workflow/"},"frontmatter":{"title":"Social card and Open Graph workflow"}}},{"node":{"fields":{"slug":"/docs/source-panel/"},"frontmatter":{"title":"Source panel"}}},{"node":{"fields":{"slug":"/docs/storage-panel/"},"frontmatter":{"title":"Storage panel"}}},{"node":{"fields":{"slug":"/docs/switching-to-polypane/"},"frontmatter":{"title":"Switching to Polypane"}}},{"node":{"fields":{"slug":"/docs/synced-interactions/"},"frontmatter":{"title":"Synced interactions"}}},{"node":{"fields":{"slug":"/docs/tab-customization/"},"frontmatter":{"title":"Tab customization"}}},{"node":{"fields":{"slug":"/docs/team-workflows/"},"frontmatter":{"title":"Team workflows"}}},{"node":{"fields":{"slug":"/docs/ui-overview/"},"frontmatter":{"title":"Polypane UI overview"}}},{"node":{"fields":{"slug":"/docs/web-vitals/"},"frontmatter":{"title":"Web Vitals"}}},{"node":{"fields":{"slug":"/docs/website-issues-you-could-encounter/"},"frontmatter":{"title":"Website issues you could encounter"}}},{"node":{"fields":{"slug":"/docs/workspace-management/"},"frontmatter":{"title":"Workspace management"}}},{"node":{"fields":{"slug":"/docs/workspaces/"},"frontmatter":{"title":"Workspaces"}}}]}},"pageContext":{"slug":"/docs/browser-extensions/"}},"staticQueryHashes":["4164364741","425175329"]}