Monitor elements on a webpage with NodeJS

For one of my projects I needed a tool to automatically monitor specific values (number of comments/downloads etc) on web pages. After seeing this article on Hacker News I thought that it would be interesting to write the tool with NodeJS myself.

Features

Monitor the value of a specific element based on a CSS Selector

Alert for changes on said element

Default URL/selector or dynamic as command line arguments

Prerequisites

Setup

jsdom

In order to fetch the page’s HTML and select the element by a CSS Selector we are going to use jsdom. jsdom can parse HTML from a string, file or in our case a URL and then expose a window variable similar to the one we have on the browser.

So lets install jsdom by running:

1

$ npm install jsdom

CSS Selector

Finding a unique CSS Selector for a page’s element is quite easy by using our browser’s developer tools.

Code

Now that we have everything we need, create index.js and lets jump into code.

let previousValue; //we need to store the value in order to compare it with the next one

checkValue function

Now lets create a function that gets the html and finds the value we want.We will pass two arguments to jsdom, the HTML’s source(our url) and a callback function. In the callback we have access to the window object so it’s easy to extract the value with native DOM methods.index.js

Repeating the check

The checkValue function is ready, lets make it run repeatedly with setInterval().setInterval() will wait the specified delay before the first call so we will invoke the function manually for the first time.index.js

1

2

3

4

...

checkValue();

setInterval(checkValue, delay*1000); //start invoking the function, *1000 because the delay should be in milliseconds

Closing

You can find the final code with comments on the GitHub repo. Future improvements will probably be a frontend that gets updated on changes via sockets(already under development) and simultaneous checking of many webpages.