Increase your productivity with Tampermonkey

In earlier posts, I've discussed enhancing productivity with PowerShell and Git, and Tampermonkey is yet another valuable instrument to include in your arsenal of productivity techniques.

Tampermonkey is a browser extension that enables the execution of userscripts. Userscripts are compact JavaScript code snippets designed to run in your browser and assist with automating tasks.

As userscripts run within the browser's current window, they offer numerous practical applications. For instance, suppose you're waiting for a CI pipeline to complete. You could either wait for the build to finish or attempt to be productive by working on something else, but you'd still need to periodically check in to see if the build is done. Tampermonkey is perfect for this situation. You can write a userscript and receive notifications via the SpeechSynthesis voice API when the build is complete. Let's explore how to develop a userscript that can assist us in achieving this:

// ==UserScript==
// @name         DOM Element Notifier
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Waits for a specific element to appear in the DOM and announces its readiness using the SpeechSynthesis API
// @author       You
// @match        https://news.ycombinator.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
     // Replace the CSS selector below with the one you want to monitor
    const targetElementSelector = '#hnmain > tbody > tr:nth-child(1) > td > table > tbody > tr > td:nth-child(2) > span > b > a';
    const checkInterval = 5000; // Check interval in milliseconds (e.g., 5000 ms = 5 seconds)

    let timeoutId;

    function speak(text) {
        const message = new SpeechSynthesisUtterance(text);
        window.speechSynthesis.speak(message);
    }

    function checkForElement(selector) {
        console.log('Checking for target element...');
        if (document.querySelector(selector)) {
            console.log('Target element found.');
            speak(`DOM element is ready. Do you thing!`);
            clearTimeout(timeoutId);
        } else {
            console.log('Target element not found. Will check again after the interval.');
            timeoutId = setTimeout(() => {
                checkForElement(selector);
            }, checkInterval);
        }
    }

    function startChecking() {
        checkForElement(targetElementSelector);
    }

    function addButton() {
        const button = document.createElement('button');
        button.textContent = 'Start Monitoring';
        button.style.position = 'fixed';
        button.style.top = '10px';
        button.style.left = '10px';
        button.style.zIndex = '9999';
        button.style.padding = '10px';
        button.style.fontSize = '16px';
        button.style.cursor = 'pointer';
        button.onclick = startChecking;

        document.body.appendChild(button);
    }

    addButton();
})();

In the script, you'll notice that I'm incorporating a button. This addition was not required earlier, but since the release of Chrome 71, user interaction has become necessary for enabling the SpeechSynthesis voice API.

By clicking this button, it will initiate monitoring for the specific element and notify me when it is ready.

Thats pretty much it.

Happy Coding!

Rasmus Olsson

Increase your productivity with Tampermonkey