Bookmarklet editor

bookmarklet-editor.markdown

Bookmarklet editor

Write a bookmarklet script, and get a minified link you can add to your bookmarks bar.

Uses Google's Closure Compiler Service

A Pen by Andreas Borgen on CodePen.

License.

index.html

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/codemirror.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/mode/javascript/javascript.min.js"></script>

<h1>Bookmarklet Editor</h1>
<label>
    <span>Title</span>
    <input id="title" value="My bookmarklet" />
</label>
<textarea id="script">(function() {
    var d = document,
    b = d.body;
    b.appendChild(d.createElement('div')).textContent = 'Added by a bookmarklet';
})();
</textarea>
<button id="create">Create bookmarklet</button>

<div id="output">
</div>

script.js

(function() {
    const _title  = document.querySelector('#title'),
          _script = document.querySelector('#script'),
          _create = document.querySelector('#create'),
          _output = document.querySelector('#output');

    const cm = CodeMirror.fromTextArea(_script);
    cm.on('change', e => _output.innerHTML = '');
    
    
    function minifyJS(script, callback) {
        //http://stackoverflow.com/questions/7119874/online-js-css-html-minifier
        //https://developers.google.com/closure/compiler/docs/api-ref?csw=1
        const url = 'https://closure-compiler.appspot.com/compile',
              payload = [
                  ['js_code', script],
                  //http://stackoverflow.com/questions/25382082/closure-compiler-restful-api-output-info-parameter
                  ['output_info', 'errors'],
                  ['output_info', 'compiled_code'],
                  ['output_format', 'json'],
              ];

        //Uses "content-type:multipart/form-data", which isn't supported by cc..
        //http://stackoverflow.com/questions/8975758/google-closure-compiler-and-multipart-form-data-not-working
        //http://stackoverflow.com/questions/4649850/google-closure-compiler-problem-with-programmatic-access
        //
        //	var data = new FormData();
        //	data.append('js_code', script);
        //	data.append('output_info', 'compiled_code');

        //http://stackoverflow.com/questions/35325370/how-to-post-a-x-www-form-urlencoded-request-from-react-native
        //http://stackoverflow.com/a/37562814/1869660
        const data = payload.map(([key, val]) => encodeURIComponent(key) +'='+ encodeURIComponent(val))
                            .join('&');

        const config = {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: data,
            method: "POST",
        };
        fetch(url, config)
            .then(resp => resp.json())
            .then(callback);
    }
    
    
    _create.onclick = e => {
        const title = _title.value || 'My bookmark',
              script = cm.getValue();
        if(!script) { return; }
        
        function appendElement(parent, tag) {
            return parent.appendChild(document.createElement(tag));
        }

        _output.innerHTML = '';
        _create.disabled = true;
        minifyJS(script, data => {
            console.log(data);
            _create.disabled = false;
            
            if(data.errors && data.errors.length) {
                appendElement(_output, 'pre').textContent = JSON.stringify(data.errors, null, 4);
                return;
            }
            
            appendElement(_output, 'p').textContent = 'Drag this link to your bookmarks bar:';
            const link = appendElement(_output, 'a');
            link.href = 'javascript:' + data.compiledCode;
            link.textContent = title;
        });
    }
    
})();

style.css

body {
    font-family: Georgia, sans-serif;
}
.CodeMirror {
    border: 1px solid gainsboro;
    margin: 1em 0;
}