Merge pull request mdn#425 from nchevobbe/devtools-inspector-toolbar

Adds an example for devtools inspector sidebar
AlbertoRutigliano · Nov 12, 2020 · 2184fee · 2184fee
2 parents 60ce50b + 8eebc58
commit 2184fee
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 0 deletions.
diff --git a/devtools-inspector-sidebar/README.md b/devtools-inspector-sidebar/README.md
@@ -0,0 +1,12 @@
+# devtools-panels
+
+**Adds a new sidebar to the developer tools inspector.**
+
+## What it does
+
+This extension adds a new sidebar to the inspector panel.
+It displays the properties of the current selected node in the markup view, using
+`sidebar.setExpression($0)` each time a new node is selected (listener added via
+`browser.devtools.panels.elements.onSelectionChanged`).
+
+To learn more about the devtools APIs, see [Extending the developer tools](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Extending_the_developer_tools).
diff --git a/devtools-inspector-sidebar/devtools/devtools-page.html b/devtools-inspector-sidebar/devtools/devtools-page.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <script src="devtools.js"></script>
+  </body>
+</html>
diff --git a/devtools-inspector-sidebar/devtools/devtools.js b/devtools-inspector-sidebar/devtools/devtools.js
@@ -0,0 +1,11 @@
+/**
+This script is run whenever the devtools are open.
+In here, we can create our sidebar, and when the selected node in the inspector
+change, we evaluate it and display its properties in the sidebar.
+*/
+
+browser.devtools.panels.elements.createSidebarPane("DOM").then(sidebar => {
+  browser.devtools.panels.elements.onSelectionChanged.addListener(() => {
+    sidebar.setExpression(`$0`);
+  });
+});
diff --git a/devtools-inspector-sidebar/manifest.json b/devtools-inspector-sidebar/manifest.json
@@ -0,0 +1,12 @@
+{
+  "description": "Adds a new sidebar to the developer tools inspector panel. The sidebar displays the page document as an inspectable object.",
+  "manifest_version": 2,
+  "name": "devtools-inspector-sidebar",
+  "version": "1.0",
+  "author": "Nicolas Chevobbe",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/devtools-inspector-sidebar",
+
+  "permissions": ["<all_urls>"],
+
+  "devtools_page": "devtools/devtools-page.html"
+}