Intro
Using Node.js and React, I was able to create an extension for the Google Chrome Browser. This extension allows you to monitor a webpage for calls of a specified function, and records and lists those function calls in a tab in the inspector. The extension has been published to the Chrome Web Store and can be viewed here: https://chromewebstore.google.com/detail/function-monitor/hhicpplhdikhhcogaibidfhimkblipko?hl=en&authuser=2.
Please see the embedded video below for a demonstration of how the extension works.
Why I created the extension
I created this simple utility to help capture and investigate what’s happening on a website’s frontend. Once a valid function has been entered into the UI, the extension will automatically update with the details of subsequent calls to that function, and will show details of the invocation such as the timestamp and call arguments, which can be displayed as JSON text or in a tree view. You can also copy the JSON data to the clipboard. The extension was created entirely in Node.js and React- you can see the source code in my GitHub repository here: https://github.com/richparks92/react-function-monitor-chrome/tree/master
The Console Utilities API included in Google Chrome offers some similar functionality, but it’s not as fleshed out. Using the monitor
function, you are able to specify a function to be monitored, but there is little information shared regarding the arguments the function was called with or the time it was called at, and the monitor
function has to be retyped into the console on each page load. You can read more information on the monitor
function here: https://developer.chrome.com/docs/devtools/console/utilities#monitor-function
How it works
There a three main elements that power the extension:
- The React app located in the
/src
folder.- The files in this folder create and update the UI
- This part of the extension also handles most of the functional logic around wrapping and unwrapping the selected function.
- The Chrome Extension app located in the
/chrome-pages
folder. - The DOM of the user’s inspected page- particularly the
window
variable.
See below for an illustration of the architecture of the app that I created using LucidChart:
For a more detailed technical explanation on the specific scripts in this extension, please see the follow-up post here: https://richchrisparks.com/chrome-function-monitor-extension-architecture-deep-dive/.