In the Loupe

Exploding Basecamp To-Dos

Exploding Basecamp To-Dos Featured Image

Several months ago, my co-worker Greg Ash pondered why checking off Basecamp to-dos was so unsatisfying. Checking a box and watching the to-do fade away doesn’t motivate anyone. Greg encouraged me to fix that.

Video game creators know that rewards are what what we crave — especially unexpected rewards. So how can we increase the addictive dopamine released in our brains? How about loud explosions? Yup… that‘ll do it!

Chrome extensions — hack the internet

Chrome extensions provide an easy way to inject JS and CSS onto a page. They are quite easy to set up with the main requirement being a simple JSON manifest file. Below is the manifest file for my extension.

{
  "name": "Exploding To-Do",
  "version": "1",
  "description": "Makes completed to-dos go kaboom!",
  "permissions": ["tabs", "activeTab", "http://*/*", "https://*/*"],
  "icons": { "128": "icon_128.png" },
  "web_accessible_resources": [
    "audio/bomb.wav","img/explosion2.gif"
  ],
  "content_scripts": [
    {
      "matches": ["https://basecamp.com/*"],
      "js": ["bg.js"],
      "css": [ "bg.css" ]
    }
  ],
  "manifest_version": 2
}

This file permits the browser to load certain files on select domains.

Anything you can do with JS & CSS you can do with Chrome extensions. I would love to see what all the creative interweb designers and developers can pull off. I uploaded various sound effects and explosions for you to play with. Have fun and post videos of what you come up with below.

If you want to create your own extentions, check out Extensionizr. It is an awesome resource to create a basis for your chrome extension.