ace_codingbat.js

(function (d, cb) {

    //
    // A script loader over here!
    //

    if (typeof $LAB === 'undefined') {
        var s;

        s         = d.createElement('script');
        s.src     = '//cdnjs.cloudflare.com/ajax/libs/labjs/2.0.3/LAB.min.js';
        s.onload  = function () {
            var s;

            s             = d.createElement('script');
            s.textContent = '(' + cb.toString() + ')();';

            d.body.appendChild(s);
        };
        d.body.appendChild(s);
    } else {
        cb();
    }
}(document, function () {

    //
    // Syntax highlighting modes
    //

    var modes = {
        'java': {
            url: '//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/mode-java.js',
            module: 'ace/mode/java'
        },
        'go': {
            url: '//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/mode-golang.js',
            module: 'ace/mode/golang'
        },
        'php': {
            url: '//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/mode-php.js',
            module: 'ace/mode/php'
        },
        'python': {
            url: '//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/mode-python.js',
            module: 'ace/mode/python'
        }
    };

    $LAB
        .script('https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js')
        .script('//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js')
        .script('//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/theme-textmate.js')
        .wait(function () {
            $('textarea[name="code"]').each(function (i, el) {
                var $el,
                    $container,
                    editor,
                    ext;

                $el = $(el);

                //
                // Principle: inject an DOM element (sized and positioned) and hide the textarea
                //

                $container = $('<div/>').css({
                    position: 'relative',
                    width: $el.width(),
                    height: $el.height(),
                    border: '1px solid silver'
                }).insertAfter(el);

                $el.hide();

                //
                // ACE magic
                //

                editor = ace.edit($container[0]);

                editor.setTheme('ace/theme/textmate');

                // Keep hidden textarea in sync

                // editor.getSession().setValue($el.val());
                var old_code = $el.val();
                // var old_code = localStorage.getItem('old_code') || 'from app.models import *\n';
                editor.getSession().setValue(old_code);
                editor.getSession().on('change', function () {
                    var current_val = editor.getSession().getValue();
                    $el.val(current_val);
                    // localStorage.setItem('old_code', current_val);
                });
                // load immediately
                $el.val(old_code);

                // Syntax highlighting depending on filename.<ext>

                ext = 'java';
                modes[ext] && $LAB.script(modes[ext].url).wait(function () {
                    editor.getSession().setMode(modes[ext].module);
                });

                // // Run Program on ctrl+enter
                // $(document).keyup(function(event){
                //     if ((event.which == 13 && (event.ctrlKey||event.metaKey)|| (event.which == 19))) {
                //         event.preventDefault();
                //         $('input[type="submit"]').click();
                //         return false;
                //     }
                //     return true;
                // });
            });
        })
    ;
}));

manifest.json

{
  "manifest_version": 2,

  "name": "Ace CodingBat",
  "description": "Replaces the CodingBat TextEditor with Ace Editor. Persists code w/ LocalStorage. ",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": [
        "http://codingbat.com/*",
        "https://codingbat.com/*"
      ],
      "js": [
        "ace_codingbat.js"
        ]
    }
  ]
}