Syncing dotjs settings with Dropbox

This article explains a dotjs setup (allowing custom JavaScript on webpages) on both OS X and Windows, and the use of Dropbox to keep them synced.

The Problem – Poor Usability

Many webpages have well thought-out designs following typographic best practices, and usable layouts. There are still quite a few, however, which don’t fare as well. Some use microscopic font sizes for body copy, some fail to set the line height, and some have too little or too much contrast between text and background among other issues.

The Solution – dotjs

The @defunkt/dotjs Chrome extension provides a framework with which to solve these problems. It allows one to write a JavaScript file for each domain (named {domain}.js) which will be loaded along with jQuery whenever a page is viewed on that domain. The main use cases are to modify the CSS of elements on the page, and to hide others entirely.

Want to make all the paragraphs on a page have a large font size, appropriate line height, proper bottom margin, and be dark grey? Put the following into the corresponding JavaScript file:

$('p').css('font-size', '22px')
      .css('line-height', '32px')
      .css('margin-bottom', '16px')
      .css('color', '#333');

Are there unreasonably many ads, HTML popups, or other obnoxious <div>s? This should do the trick:

$('#advert_42, .popup, div.flashing').remove();

Aside: I use remove() instead of hide() above as it is roughly 38× faster on my current version of Chrome.

These are relatively quick and easy fixes, but much more complicated things can be accomplished as well. For example, @tie-rack/dotjs-files implemented a system that leverages HTML5 localStorage to store comments on reddit users. Here is another example using dotjs to fix obfuscated emails in Gmail. The sky is the limit when you have arbitrary JavaScript at your disposal.

Dropbox

The benefits of dotjs are clear — I have files for almost every website I visit frequently, and it’s nice knowing I can alter how I experience websites as I see fit.

I initially had a simple ~/.js folder in the home directory of my Macbook. As I began using my desktop more, I wanted to have the same control there as well. Copying the files over would work temporarily but this clearly doesn’t scale and would be a chore to maintain, not to mention angering the DRY gods. Enter stage left: Dropbox.

Dropbox solves the pain point of syncing files across computers. If the dotjs files are stored in Dropbox, then all changes will be immediately pushed out to all devices linked with my account.

Setting up dotjs on OS X

Installation on OS X is straightforward. I will repeat it here for pedantic reasons:

# Requires: OS X, Ruby 1.8, rake, Chrome, /usr/local/bin in $PATH
git clone http://github.com/defunkt/dotjs
cd dotjs
rake install

This will install the Chrome extension, install the djsd daemon in /user/local/bin, and install a .plist file to control the daemon. One additional step is to create a symbolic link in your home directory pointing to the folder in Dropbox:

mkdir ~/Dropbox/dotjs         # Create the directory in Dropbox
ln -s ~/Dropbox/dotjs ~/.js   # Create symbolic link

Setting up dotjs on Windows 7

There is actually a separate dotjs project for Windows, at @p3lim/dotjs-win. You must download the dotjs.crx file by navigating to it, and clicking “View Raw”. When I tried double-clicking this file, Chrome informed me that only extensions from it’s app store were allowed. To get around this, I navigated to chrome://chrome/extensions/ and was able to drag the .crx file into this tab and it installed.

The next step is creating a symbolic link. Luckily Windows 7 and Vista both ship with the mklink command. Earlier versions of windows must download both the Visual Studio 2005 redistributable and the Link Shell Extension. Following this guide on symbolic links in Windows, I issued the following command at an Admin-escalated Command Prompt:

mklink /J "C:\Users\Jeff\AppData\Local\Google\Chrome\User Data\Default\Extensions\longstringofletters\1.5_0\scripts" "C:\Users\Jeff\Dropbox\dotjs"

This reported back: Junction created for {destination} <===> {source}. Note that the double quotes are required for paths containing spaces.

Conclusion and Next Steps

It feels powerful to save a file on my laptop, immediately see a notification on my desktop that Dropbox synced, and to then refresh Chrome to see my changes are already active. I may be a little late to the Dropbox party, but I will surely be making good use of it going forward.

One thing lacking with this setup is that mobile devices aren’t able to utilize the dotjs files to change the appearance of website. This is a big deal because the ability to manipulate websites on a mobile device is possibly more important than on a laptop or a desktop. Some sites have mobile versions that have responsive designs, but many leave much to be desired.

Another interesting direction to take would be to have all the JavaScript files stored on a server, and be able to access websites with them already loaded up. This would solve the mobile problem, as well as remove the need for any Dropbox trickery. Sounds like a good project to me (if it doesn’t already exist)!

comments powered by Disqus
(Comments omitted for printing)