@devtoolsoverlay/frontend

The frontend of the devtools extension & overlay as a npm package, so it can be embedded in different projects.

Try it online!

🚧 TODO 🚧 A couple of deployed demo websites where you can see the Overlay in action: 🚧 TODO 🚧

Getting started

Installation

npm i @devtoolsoverlay/frontend
# or
yarn add @devtoolsoverlay/frontend
# or
pnpm add @devtoolsoverlay/frontend

The controller

🚧 TODO 🚧 The devtools frontend is controlled with a Controller API. It provides a set of methods to trigger actions, and a way to get events from the devtools frontend. 🚧 TODO 🚧

const controller = new Controller({
  onDevtoolsLocatorStateChange(enabled) {
    console.log(enabled)
  },
  onHighlightElementChange(data) {
    console.log(data)
  },
  onInspectNode(data) {
    console.log(data)
  },
  onInspectValue(data) {
    console.log(data)
  },
})

This package is continuously under development, so the API is still not well defined. So instead of focusing on the API, the usage examples should show how you can embed this package in different context.

• Chrome Extension - ~~The extension is communicating with the debugger using the main npm package.~~

• Overlay component 🚧🚧

Changelog

See CHANGELOG.md.