Live Demo

Install Chrome Extension

Open devTools on the demo page and go to the "Page Tools" tab

Overview

Structure:

Quick Start

Install extension Google Chrome Extension Add tools page in your project, which will be displayed in DevTools frame tools.html <html> <head> </head> <body> My Page Tools </body> </html> 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> 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

tools.js

var connection = new PageToolsConnector();

.eval()

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()

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()

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); });

To view the demo pages you need:The Page Tools extension adds functionality to the Chrome DevTools. You can add UI elements on developers panel and interact with the inspected page.Create connection in tools.html tab to communicate with main pageThe eval() method runs the js code on main pageThe on() method attaches handlers to events from the main page.Any event handlers attached with window.addEventListener on main page are triggered when the corresponding event occurs.