Skip to content
Branch: master
Find file History
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
background_scripts Hellosct1 webext (#237) Jul 27, 2017
devtools fix: Update devtools.panels.create icon and panel urls to work correc… Jan 26, 2018
icons Hellosct1 webext (#237) Jul 27, 2017
README.md Hellosct1 webext (#237) Jul 27, 2017
manifest.json Hellosct1 webext (#237) Jul 27, 2017

README.md

devtools-panels

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 $0 helper 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 jQuery is 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 inspectedWindow.eval().

  • 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.

You can’t perform that action at this time.