Firefox – How to get Firefox Greasemonkey script to use a local cascading stylesheet

cssfirefoxgreasemonkeyjavascript

What's the correct syntax to link to a CSS file in the same directory as a Greasemonkey JavaScript? I've tried the following but it doesn't work:

var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'example.css';
cssNode.media = 'screen';
cssNode.title = 'dynamicLoadedSheet';
document.getElementsByTagName("head")[0].appendChild(cssNode);

If I can get this to work, it would be a lot easier than encasing CSS changes in JavaScript.

Best Answer

This is easy with the @resource directive. Like so:

// ==UserScript==
// @name            _Use external CSS file
// @resource        YOUR_CSS  YOUR_CSS_File.css
// @grant           GM_addStyle
// @grant           GM_getResourceText
// ==/UserScript==

var cssTxt  = GM_getResourceText ("YOUR_CSS");

GM_addStyle (cssTxt);

With no path/url information, @resource looks for "YOUR_CSS_File.css" in the same directory.

Related Solutions

Firefox – Greasemonkey script (or Firefox extension) to stop sites from disabling copy-paste

The ~~(dead link) Anti-Disabler script on diveintogreasemonkey.org~~ works if you replace document. with document.wrappedJSObject.

Link appears to be dead now, here's a wayback link: http://web.archive.org/web/20110830050224/http://diveintogreasemonkey.org/download/antidisabler.user.js

and here's the script:

// Anti-Disabler
// version 0.5 BETA!
// 2005-06-28
// Copyright (c) 2005, Mark Pilgrim
// Released under the GPL license
// http://www.gnu.org/copyleft/gpl.html
//
// --------------------------------------------------------------------
//
// This is a Greasemonkey user script.
//
// To install, you need Greasemonkey: http://greasemonkey.mozdev.org/
// Then restart Firefox and revisit this script.
// Under Tools, there will be a new menu item to "Install User Script".
// Accept the default configuration and install.
//
// To uninstall, go to Tools/Manage User Scripts,
// select "Anti-Disabler", and click Uninstall.
//
// --------------------------------------------------------------------
//
// ==UserScript==
// @name          Anti-Disabler
// @namespace     http://diveintomark.org/projects/greasemonkey/
// @description   restore context menus on sites that try to disable them
// @include       *
// @exclude       http://mail.google.com/*
// @exclude       https://mail.google.com/*
// ==/UserScript==

(function() {
    var e, i, all;

    document.onmouseup = null;
    document.onmousedown = null;
    document.oncontextmenu = null;

    all = document.getElementsByTagName("*");
    for (i = 0; i < all.length; i += 1) {
        e = all[i];
        e.onmouseup = null;
        e.onmousedown = null;
        e.oncontextmenu = null;
    }
})();

//
// ChangeLog
// 2005-06-28 - 0.5 - MAP - updated GMail URL
// 2005-04-21 - 0.4 - MAP - linted
// 2005-04-21 - 0.3 - MAP - exclude GMail
// 2005-04-18 - 0.2 - MAP - tidy code
// 2005-04-01 - 0.1 - MAP - initial release
//

Firefox – Applying a Greasemonkey script to a chrome:// Firefox extension

This is not possible, by design.

Sadly, Greasemonkey deliberately restricts itself to http:, https:, ftp:, and data: schemes by default.

You can also run on file: or unmht: schemes, or about:blank, if you explicitly set some magic options.

The developers have stubbornly refused to yield on this point, but you can easily fork the Greasemonkey code and remove the chrome: restriction if you wish.

In the source code, you would edit the file isGreasemonkeyable.js to add a line:

case "chrome":

just after the case "data": line. (Then rebuild and install your modified extension).

Best Answer

Related Solutions

Firefox – Greasemonkey script (or Firefox extension) to stop sites from disabling copy-paste

Firefox – Applying a Greasemonkey script to a chrome:// Firefox extension

Related Question