Adds an example for devtools inspector sidebar

2026-04-21 00:32:48 +02:00 · 2019-09-21 00:06:42 +02:00
parent 72dfcf1bad
commit 8eebc583f8
4 changed files with 44 additions and 0 deletions
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <script src="devtools.js"></script>
+  </body>
+</html>
@@ -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`);
+  });
+});