felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-17 06:48:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Adds an example for devtools inspector sidebar
This commit is contained in:
Caitlin Neiman
2020-11-12 10:01:11 -08:00
committed by GitHub
parent 60ce50b10e 8eebc583f8
commit 2184fee75a
4 changed files with 44 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
devtools-inspector-sidebar/README.md Executable file
View File

@@ -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).

9
devtools-inspector-sidebar/devtools/devtools-page.html Executable file
View File

@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="devtools.js"></script>
</body>
</html>

11
devtools-inspector-sidebar/devtools/devtools.js Executable file
View File

@@ -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`);
});
});

12
devtools-inspector-sidebar/manifest.json Executable file
View File

@@ -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"
}