Framework for in-browser debugging and development tools.
This repo serves as a template for creating your own custom browser tools. It includes a base framework that can be extended to provide custom functionality specific to your webapp. It does so by creating an interface for interacting with features using a Chrome extension, as well as a fallback for all browsers using iframes.
Here is a visual of the core framework with no functionality added using both the Chrome extension and the iframe fallback:
The two main visual components—the popup and the DevTools panel—provide a blank canvas in which you can create whatever features are helpful to you for developing, designing, testing, and supporting your own webapp or webapps. The visual components and the webapp itself are connecting via a message passing API that allows all the pieces to interact without concern of the context in which they were loaded.
Ready to start making your own tools? Here's how to adapt this template to work with your own webapp.
- Fork the repo.
- Update the messages.json file with your own configuration.
- Update the manifest.json file's
externally_connectable.matchesfield. This should match the content in
- Update the icons for the chrome extension and iframe fallback (keep naming the same or you'll need to update references as well).
- Run the examples using
npm start. This will compile the shared scripts, start a webserver, and launch the examples directory.
Ctrl+Alt+Hto open the custom browser tools on an example page, or install the extension.
- See the getting started and API docs pages for more info on customizing the examples and using in your own app.
Installing the Chrome extension
The extension can be installed directly from the file system as a developer extension.
- Navigate to chrome://extensions/ in Chrome.
- Ensure "Developer mode" checkbox at the top is checked.
- Click "Load unpacked extension...".
- Find the location of the
src/wrappers/chrome-extensionfolder and open it.
- The extension should show up in your extensions list as "My Custom Browser Tools".
See the changelog.