Adds a new panel to the developer tools. The panel contains buttons that demonstrate various basic features of the devtools API.
What it does
This extension adds a new panel to the developer tools. The panel contains four buttons:
Inspect H1: this injects a script into the active page. The script uses the
inspect()helper function to select the first <h1> element in the page in the devtools inspector.
Reddinate inspected element: this injects a script into the active page. The script uses the
$0helper to get the element that's currently selected in the devtools Inspector, and gives it a red background.
Check for jQuery: this injects a script into the active page. The script checks whether
jQueryis defined in the page, and logs a string to the add-on debugging console (note: not the web console) recording the result.
Inject content script: this sends a message to the extension's background script, asking it to inject a given content script in the active page.
To learn more about the devtools APIs, see Extending the developer tools.
What it shows
How to add a new panel to the devtools.
How to inject a script into the active page using
How to use helpers to interact with the devtools.
That unlike content scripts, scripts injected with
eval()can see objects, like
jQuery, that were added by page scripts.
How to send messages to the background script.