Skip to content
This repository

~/.js for Firefox

branch: master

v1.10

latest commit d2b9219b4c
ricky rosario authored April 03, 2013
Octocat-spinner-32 data nit April 03, 2013
Octocat-spinner-32 docs Initial version of dotjs. February 19, 2011
Octocat-spinner-32 lib use Array.forEach because we can April 03, 2013
Octocat-spinner-32 tests Initial version of dotjs. February 19, 2011
Octocat-spinner-32 CONTRIBUTORS Add @bpierre to contributors. April 03, 2013
Octocat-spinner-32 LICENSE Fix Issue #22 - Add LICENSE file December 19, 2012
Octocat-spinner-32 README.md Add @bpierre to contributors. April 03, 2013
Octocat-spinner-32 package.json v1.10 April 03, 2013
README.md

dotjs

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

dotjs is a Firefox Add-on that executes JavaScript and CoffeeScript files in ~/.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 and/or ~/.js/google.com.coffee. If you have a ~/.js/default.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). default.css loads in all sites.

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

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

GreaseMonkey user scripts are great, but you need to publish them somewhere and re-publish after making modifications. With dotjs, just add or edit files in ~/.js.

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('/Style/') === 0) {
    // JS here
}

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

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

Installation

Dependencies

Contributors (Thank you!)

Changelog

v1.10 Fixed bug with default.js (Issue #28)

v1.9 Performance optimization. Load content scripts on DOM ready.

v1.8 Updated jquery to v1.9 and coffeescript to v1.4.

v1.7 Updated to version 1.7 of addon sdk along with some optimizations.

v1.6: Leaner, meaner dotjs. A bunch of optimizations by canuckistani (Thanks! \o/).

v1.3: Only load into into the main tab document (vs iframes, etc.).Improves memory usage and performance.

v1.2: Updated to jQuery 1.7.1 and some cleanup (Thanks djl!).

v0.9: CSS support!

v0.8: Windows support! Put your scripts in a js folder under your home directory (C:\Users\<username>\js\. in Windows 7).

v0.7: CoffeeScript support! ~/.js/example.com.coffee gets transpiled to JavaScript and executed.

Credits

"I almost wish you could just stick JavaScript in ~/.js. Do you know what I'm saying?"

Something went wrong with that request. Please try again.