From 01445fb1da21a0486c4c8a7e49bc41c4ccec6a97 Mon Sep 17 00:00:00 2001 From: Aaron Date: Fri, 29 Dec 2023 12:08:33 -0600 Subject: [PATCH] docs: Add example for setting up custom panels/panes in devtools (#308) --- docs/entrypoints/devtools.md | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/docs/entrypoints/devtools.md b/docs/entrypoints/devtools.md index f7b88f21..da3cda04 100644 --- a/docs/entrypoints/devtools.md +++ b/docs/entrypoints/devtools.md @@ -13,15 +13,12 @@ ## Definition -Plain old HTML file. - ```html - Title @@ -31,3 +28,13 @@ Plain old HTML file. ``` + +## Adding UI Elements + +Chrome extensions allow you to add panels and side panes to the devtools window. + +![DevTools window showing Elements panel and Styles sidebar pane.](https://developer.chrome.com/static/docs/extensions/how-to/devtools/extend-devtools/image/devtools-window-showing-e-9051f7f0347cd_1920.png) + +See the WXT's examples for a full walkthrough of extending the devtools window: + +- [Devtools Setup](https://github.com/wxt-dev/wxt-examples/tree/main/examples/vanilla-devtools#readme)