1

Since I prefer CoffeeScript, this is the best method I have found for using it with Tampermonkey.

See answer below.

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
Erik Nomitch
  • 1,575
  • 13
  • 22
  • Ironically, the OP's answer, below, only works because Tampermonkey strove to emulate a `<><![CDATA[` functionality that Greasemonkey (Firefox) has since deprecated and removed. – Brock Adams Dec 25 '14 at 23:20
  • Interesting! I couldn't think of a better multi-line sting method. – Erik Nomitch Dec 26 '14 at 05:48
  • ECMAScript 6 has backtick support. Works in current FF; not yet in Chrome. Meanwhile, [this answer's](http://stackoverflow.com/a/6480881/331508) code shows a method that works on most (¿all *current*?) browsers. – Brock Adams Dec 26 '14 at 06:09
  • Chrome now has support for template strings too. However, when embedding CoffeeScript using backticks, destructuring assignments are somehow pre-compiled by Tampermonkey and therefore cause the compilation to fail. – raphinesse Apr 04 '15 at 12:33

3 Answers3

2

Step 1: Require CoffeeScript

In your ==UserScript== definition, add:

// @require http://coffeescript.org/extras/coffee-script.js

Step 2: Define the evaluator function and write your CS

The source uses JS "inline string" then compiles it.

Full Example:

// ==UserScript==
// @name     _Coffeescript test
// @include  http://stackoverflow.com/questions/*
// @require  http://coffeescript.org/extras/coffee-script.js
// ==/UserScript==

function evalCS(source) {
  // Compile source to Coffeescript (Array)
  var coffeescript = CoffeeScript.compile(source.toString()).split("\n");

  // Prepend 'debugger'
  coffeescript[1] = "debugger;" + coffeescript[1];

  // Join and eval
  eval(coffeescript.join("\n"));
}

// Script Source
// -------------
evalCS(<><![CDATA[

# CoffeeScript here...
# --------------------
foo = "Foo"
alert foo

]]></>);

Based off of this forum post

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
Erik Nomitch
  • 1,575
  • 13
  • 22
2

I prefer to have my CoffeeScript in a separate file. Proper syntax highlighting, less noise and the possibility to have separate module files for bigger projects are a few advantages of that approach.

So you have your actual user script, say main.user.js:

// ==UserScript==
// …
// @grant         GM_getResourceText
// @require       http://coffeescript.org/extras/coffee-script.js
// @resource      coffee main.coffee
// ==/UserScript==

eval(CoffeeScript.compile(GM_getResourceText('coffee')));

And beside it you have your coffee file (or files), in this case main.coffee.

Now you just have to install the user script by URI. I usually just create a multi-file gist for that. If you don't like to have your script sitting on some server, you can use file URIs too.

raphinesse
  • 19,068
  • 6
  • 39
  • 48
1

Important: go to Chrome's extensions page and check if the "Allow access to file URLs" setting is enabled for Tampermonkey.

Then write your CoffeScript code in a separate file and reference it as a resource in your Tampermonkey script:

// ==UserScript==
// @name         Tampermonkey CoffeeScript Test
// @namespace    http://your.namespace
// @version      0.1
// @author       your@email.com
// @match        http://*/*
// @grant        GM_getResourceText
// @require      http://coffeescript.org/extras/coffee-script.js
// @resource     coffee file:///home/path/to/script.coffee
// ==/UserScript==

eval(CoffeeScript.compile(GM_getResourceText('coffee')));
danielrg
  • 156
  • 1
  • 3