Simplicty of Chrome Extensions

Summary

I often find myself testing purchase flows at Verizon Wireless which involves a lot of repetitive clicking to get to a given page, for example adding an item to the cart, configuring your plan and entering credit card details to checkout. Chrome extensions to the rescue!

Details

I had been looking at so many different ways to automate browser interaction. Selenium and the like was my first choice, but the real problem for me was how it launched the browser and some other rough edges regarding profiles. I investigated autohotkey which is a generalized automation solution but the language was too obtuse for my taste.

I finally settled on a content script, Chrome's equivalent of a Firefox greasmonkey script. It was easy to install and use. I immediately hit a snag, I wanted to configure the start and end pages of an interaction flow but didn't want to have to keep editing the content script and reloading.

It turns out, after some trial and error that building a Chrome extension was incredibly easy and satisfying. Not only that but the built in tools do a good job of helping you debug your code. I took a look at doing the same thing in firefox, but the documentation is less helpful (circa 2015).

How to build a Chrome extension:

manifest.json

{
    "manifest_version": 2,

    "name": "Skip Flow",
    "description": "Skip through the entire flow from PDP to order confirmation, adding just one phone, plan and protection",
    "version": "1.0",

    "permissions": [
        "storage",
        "background"
    ],

    "content_scripts": [{
        "exclude_globs": [  ],
        "include_globs": [ "*" ],
        "js" : ["jquery.js","skip-flow.user.js"],
        "matches" : [
            "http://*/*",
            "https://*/*"
        ],
        "run_at" : "document_end"
    }],

    "browser_action": {
        "default_icon": {                    // optional
            "19": "skip-flow-alt.png",
            "32": "skipflow32.png",
            "39": "skipflow38.png",
            "64": "skipflow64.png",
            "128": "skipflow128.png"

        },
        "default_title": "Skip Flow",      // optional; shown in tooltip
        "default_popup": "popup.html"      // optional
    },

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

    "converted_from_user_script": true
}
  • popup.js and popup.html are the UI that contain a set of checkboxes for configuration.
  • background.js handles messaging between your user script and the popup.
  • skip-flow.user.js is the content script which manipulates the content of the page. Mostly clicking buttons and setting form field values. MutationObserver could be useful for handling ajax responses.

background.js looks like this:

chrome.runtime.onMessage.addListener(handleMessage);

function handleMessage(msg, sender, sendResponse) {
    switch (msg.subject) {
    case 'setInputValue':
        setInputValue(msg.key, msg.value);
        break;
    case 'getInputValues':
        sendResponse(popupState.flowSteps);
        break;
    default: 
        log('no handler for message: ' + msg.subject);
        break;
    }
    return true;
}

var popupState = {
    flowSteps: {}
};

function setInputValue(key, value) {
    log('setInputValue');
    popupState.flowSteps[key] = value;
}

function log(msg) {
    console.log('background.js: ', msg);
}

Downsides: Chrome will warn you about a developer addon each time you start. I don't mind - the power available through the extension easily dwarfs the slight inconvenience of the warning.