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

Adds an example for devtools inspector sidebar

Browse Source
This commit is contained in:
Nicolas Chevobbe
2019-09-21 00:06:42 +02:00
parent 72dfcf1bad
commit 8eebc583f8
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"
}