Page Tools

Extend Chrome inspector with your project tools. ⚒😺

View on GitHub Install Chrome Extension

Made by @quiksilverost

Live Demo

To view the demo pages you need: Demo Pages

Overview

The Page Tools extension adds functionality to the Chrome DevTools. You can add UI elements on developers panel and interact with the inspected page.
Structure:

Quick Start

  1. Install extension
  2. Add tools page in your project, which will be displayed in DevTools frame
    tools.html
    <html>
    <head>
    </head>
    <body>
        My Page Tools
    </body>
</html>
  3. Add link to tools page in main template file of your project.
    index.html
    <html>
    <head>
        ...
        <meta name="chrome-extension:page-tools" content="http://localhost/tools.html">
    </head>
    ...
</html>
  4. Include pageToolsConnector to communicate between tools frame and main page 
    npm install page-tools --save
    Include in html:
    tools.html
    ...
<head>
    <script src="/node_modules/page-tools/dist/pageToolsConnector.js"></script>
</head>
...
    Or using import in js file:
    tools.js
    import PageToolsConnector from "page-tools";
    tools.html
    <script src="tools.js"></script>

Usage

Initialize connection

Create connection in tools.html tab to communicate with main page
tools.js
var connection = new PageToolsConnector();

.eval()

The eval() method runs the js code on main page
Syntax
.eval(expression [, response])
Example:
tools.js
// eval alert on page
connection.eval(`alert('hello world')`);

// eval with response
connection.eval(`document.title`, function(title) {
    document.body.innerHTML = title;
});

.on()

The on() method attaches handlers to events from the main page.
Syntax
.on(name, handler)
Example:
tools.js
//catch event from main page
connection.on("click_some_element", function(params) {
    document.body.innerHTML = params.className;
});
index.js
//Add event handler on main page
document.body.addEventListener('click', function(e) {
    // throw event to tools page
    window.postMessage({name: 'click_some_element', params: { className: e.path[0].className }, source: 'page-tools-extension'}, '*');
});

.emit()

Any event handlers attached with window.addEventListener on main page are triggered when the corresponding event occurs.
Syntax
.emit(name [, params])
Example:
tools.js
//Add event handler
document.body.addEventListener('click', function(e) {
    // emit event to index page
    connection.emit("alert_text", "Connection works!");
});
index.js
//catch event from tools page
window.addEventListener("alert_text", function(e) {
    alert(e.detail);
});