Google Chrome Extension – for TimeClockWizard

  • report
    Disclaimer
    Click for Disclaimer
    This Project is over a year old (first published about 7 years ago). As such, please keep in mind that some of the information may no longer be accurate, best practice, or a reflection of how I would approach the same thing today.
  • infoFull Project Details
    info_outlineClick for Full Project Details
    Date Posted:
    May. 05, 2017
    Last Updated:
    Jan. 04, 2019
  • classTags
    classClick for Tags

1/4/2019 – UPDATE: Extension Brought Back from the Dead!

I stopped using TimeClockWizard personally a while ago, so when they changed their website sometime in 2017 or 2018 and broke this extension, I don’t think I even noticed (or at least not for a while). However, I had some spare time recently, so I decided to rebuild this extension to get it working again. It actually only took about a day, and now is functional again. If TCW changes their system again, and the extension once again breaks, feel free to let me know by commenting on this page. However,  I can’t guarantee that I will continue supporting this extension indefinitely.

You can get the extension here!
 

For work, I’ve been using a site called “Time Clock Wizard”. From a managerial side of things, it is pretty good, since the cost is low and it fulfils all the basic bookkeeping requirements. However, from the user perspective, the site leaves a lot to be desired; it constantly logs everyone out, it displays accumulated hours per pay period instead of the normal Monday-Friday (which means we constantly have to pull custom reports to see how close we are to hitting overtime), and it is slow to navigate.

Since I’ve been toying around with Chrome Extensions lately, I figured it would be fun to try and make one so that I could more easily use the TimeClockWizard service – so that is exactly what I did – I coded up an entire chrome extension over a single weekend.

Features:

  • Only have to sign in once!
  • Clock In and Out all from the extension popup page
  • See your last punch time at a glance – answer “What time did I clock out for lunch?”
  • Check your weekly hours – avoid accidentally going over

See it in action!

Clock In:

TimeClockWizard Chrome Extension - Clocking In

Clock Out:

TimeClockWizard Chrome Extension - Clocking Out

Resyncing Full Time Report:

TimeClockWizard Chrome Extension - Syncing Time

Sometimes, if you are clocking in both through the website and through this extension, the estimated total weekly hours can start to go adrift. You can use the button provided to force a full resync of total weekly hours.

Technical Stuff!

After a weekend project I like to sum up cool things I used / learned / experienced – either for the first time, or in some way that felt transformative. Here are those things:

  • Chrome Extensions (duh!)
  • Local Storage (aka localStorage)
  • Date formatting
    • Unlike other aspects of code that I start to like the more I use them, the more I work with date formatting (converting, offsetting, etc.) the more I HATE it.
  • XMLHttpRequest(s) – simple GET and POSTS can be so powerful 🙂
  • Async stuff (callbacks, promises)
  • Regex (is there ever a project that doesn’t use rexeg? Don’t answer, that was rhetorical).

If you are interested enough to be reading this section, you might already know, this but TimeClockWizard does not have a published API. Thus, the most challenging part of this project was not the UI or related code; it was trying to figure out how TCW handles network requests – spoiler: it is not as straightforward as one might think.

Source code might be published at some point…

Leave a Reply

Your email address will not be published.