The Experiments of Gareth Andrew

GreasemonkeyImports adds the ability to import files into your greasemonkey scripts, this allows splitting your javascript into a more modular file organisation, including third party libraries, and importing extra resaources such as images, html and css. It is available as patch to greasemonkey, and as a php script.

This patch was originally developed in November 05, the historically minded might be interested in the original version

See also: Greasemonkey Imports Service

Download

• Download and Tests
• Browse Source

Motivation

Greasemonkey scripts currently consist of a single javascript file. This file must contain all the data the extension requires. This means html and css must be embedded (as a string), images can only be used if they are remotely fetched or embedded as data uri's, other media can only be fetched remotely (since not all plugins support the data uri scheme). This also means all javascript has to be stored in the same file, limiting reuse to cut-and-paste techniques. This extension to greasemonkey seeks to solve these problems with the addition of import functionality.

Use Cases

1. Separation of html and stylesheets from code.
2. Embedding images
3. Embedding other media (Might not work -see #Limitations)
4. Writing modular code
5. Reusing existing javascript libraries
6. Building greasemonkey specific libraries

Usage

This extension adds two new metadata annotations @import and @require.

@require

This annotation takes a single parameter, a url of a javascript file.  This file will be saved along with the userscript and prepended to the userscript during execution.

Example:

test.js

// A JS library function test(){ // Do some stuff... }

requiretest.user.js

// ==UserScript== // @name Require Test // ... // @require test.js test(); //Function is defined in test.js and will be available at this point

 @import

This annotation has two parameters, a symbolic name for the import, and a url (relative or absolute) from which the import can be downloaded.  The file will be saved along with the userscript and its contents can be accessed by calling GM_getImport().  This function returns a GM_Import object with two acessor functions

• getContents() - this method returns the file contents.
• getURI(mimetype) - this method return the file contents as a data uri with the specified mimetype.  The mimetype is optional and
  

Example

importtest.user.js 

// ==UserScript== // @name ImportTest // ... // @import test test1.txt var test = GM_getImport("test"); var contents = test.getContents();

Limitations

Data urls are not supported by plugins (afaict), so gm_imports cannot be used to import flash, audio or video.

Security

As a security precaution scripts can only import files from http, https, or ftp url's. Scripts installed from file url's can also import files from file url's. Chrome and all other url's are forbidden.

Operation

When a new user script is installed, greasemonkey parses the user scripts metadata, and retrieves (via XMLHttpRequest) all the named imports. Each user script now has its own directory under gm_scripts, where the script is stored along with any imports. The symbolic name and local location are stored in config.xml.

Examples

There are a large collection tests/examples on the Download page

Inserting and replacing HTML/CSS/Text

Any kind of text content can be inserted in the page, or used to replace an element in the page. See also: Dive Into Greasemonkey (http://www.diveintogreasemonkey.org).

var imp = GM_getImport("test"); var contents = imp.getContents(); document.body.innerHTML += "Test contents: <pre>"+contents+"</pre><br/>";;

Inserting Images

Images can be inserted using the getURI() method of GM_Import.

var imp = GM_getImport("image"); var url = imp.getURI(); var image = document.createElement("img"); image.src = url; document.body.appendChild(image);