Collecting Form Data with a Google Chrome Extension

Recently, I was interested in creating a Google Chrome extension that would work similarly to a password manager, such as LastPass, to monitor the data in form submissions. Working on this task is actually what led to my last blog post, a lighthearted take on my mental stages of programming.

As that post demonstrates, I was confused enough when working on this problem that it seemed worthwhile to share my solution.

To build the extension I wanted, I began with the Getting Started guide from the Chrome Developer site, then put together a few other pieces from the API documentation. Eventually, I met my not-as-easy-as-I-first-thought goal: checking the data sent in a form submission.

The Basics

To get started, we’ll need to create a manifest file. In a new directory for this extension, create a file called manifest.json and copy the following code. I’m going to skip the browser_action parameter from Google’s example, since we won’t be concerned about an icon or popup at this point.

{
  "manifest_version": 2,

  "name": “Form Data“,
  "description": “Looks at some form data.”,
  "version": "0.9",

  "background": {
    "scripts": ["background.js"]
  },

  "permissions": [
    "webRequest",
    "<all_urls>"
  ]
}

In the same directory, make a background.js file. In that, put the following code:

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    if(details.method == "POST") {
      console.log(details.requestBody.formData);
    }
  },
  {urls: ["<all_urls>"]},
  ["requestBody"]
);

Before a web request is sent to any URL, this code will check for a POST method and collect the form data from the request body. For now, it just prints the formData object. But let’s make things a little more exciting.

Kick it Up a Notch

First, let’s add a permission for webRequestBlocking in manifest.json, like so:

"permissions": [
  "webRequest",
  "webRequestBlocking",
  "<all_urls>"
]

Then, we’ll update background.js to look like this:

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    if(details.method == "POST") {
      let formData = details.requestBody.formData;
      let cancel = false;

      if(formData) {
        Object.keys(formData).forEach(key => {
          formData[key].forEach(value => {
            if(value.includes("foo")) {
              cancel = true;
            }
          });
        });
      }

      return {cancel: cancel};
    }
  },
  {urls: [""]},
  ["blocking", "requestBody"]
);

Now, we’ll be looking through all of the values in formData and checking for whatever we’d like. In this case, we’re checking for the presence of the string foo. If it is found, we’ll cancel the request. This could be useful for blocking certain sensitive information from being sent.



Trying it Out

If you’d like try this out in Chrome, first follow the instructions from Google to load the extension. Then, go to any page with a form and type in something containing the target string–in our case, it’s “foo.” If you see the browser direct to a page explaining that the request to the server has been blocked, everything is working as intended!

To see any information logged to the console, go to the Extensions page in Chrome and find our extension, “Form Data.” Select to inspect the “background page” view, and a new Developer Tools window will launch for the extension. Here, you will see any output to the console as the extension runs.

If you have any additional advice, resources, or questions regarding Chrome extensions, please leave them in a comment below. Thanks for following along, and happy developing!