dotjs

This is a Firefox Add-on port of the dotjs Chrome extension https://github.com/defunkt/dotjs.

The add-on executes JavaScript (and CoffeeScript) files from ~/.js based on their filename and the domain of the site you are visiting.

If you navigate to http://www.google.com/, dotjs will execute ~/.js/google.com.js (or ~/.js/google.com.coffee). If you have a ~/.js/*.js, it will execute on every page you visit. Also, you can put site specific .css files in ~/.css (C:\Users\<username>\css\. in Windows 7). *.css loads in all sites.

NOTE: This is different from the original add-on code which uses default.js instead of *.js, this fork also supports sub-domain name wild cards e.g. *.google.com.css.

This makes it super easy to spruce up your favorite pages using JavaScript and CSS.

GreaseMonkey user scripts are great, but you need to publish them somewhere and re-publish after making modifications.

Bonus: files in ~/.js have jQuery loaded, regardless of whether the site you're hacking actually uses jQuery.

NOTE: jQuery (2.x) is only loaded when a (jQuery) match is found, do not assume it is being auto-loaded!

Example

$ cat ~/.js/github.com.js
// swap github logo with trollface
$('#header .site-logo img')
.css('width', '100px').css('margin-top', '-15px')
.attr('src', 'https://img.skitch.com/20110207-x4s8eys3uy641yk72jigt38bby.png');

How to target a specific path

Sometimes, you don’t want to target a whole domain, but only a path.

CSS

You can use the @-moz-document Mozilla Extension:

/* Full path */
@-moz-document url-prefix(http://www.w3.org/Style/) {
    /* CSS here */
}

/* Regex */
@-moz-document regexp("^https?:\/\/www\.w3\.org\/Style\/.*") {
    /* CSS here */
}

Documentation: https://developer.mozilla.org/en/CSS/@-moz-document

JavaScript

You can test the window.location object:

// Search for a string
if ( window.location.pathname.indexOf('/home/') === 0 ) {
    // JS here
}

// Regex
if ( /^\/home\/.*/.test(window.location.pathname)) === 0 ) {
    // JS here
}

Documentation: https://developer.mozilla.org/en/DOM/window.location

Installation

• download the latest build extension from ...
• visit about:addons and select Install Add-on From File... the locate the dotjs.xpi

Building

• setup the addon-sdk: https://github.com/mozilla/addon-sdk/
• run cfx xpi to build the extension (or cfx run to bring up an isolated browser instance)

Credits

This is a fork of the original extension https://github.com/rlr/dotjs-addon (with changes from additional forks such as https://github.com/canuckistani/dotjs-addon and https://github.com/anshin/dotjs-addon) and is distributed under the same LICENSE.