Chris Parks

I'm a technical problem-solver who specializes in planning, organizing, and facilitating technical projects between systems. I have led successful integrations projects between platforms such as Shopify, Amazon, NetSuite, and more, on top of providing technical consultation and guidance for clients looking to build custom integrations via API.

Creating a Google Chrome Extension with Node.js and React

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:

  1. 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.
  2. The Chrome Extension app located in the /chrome-pages folder.
  3. 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/.