snippettocodepen.user.js

// ==UserScript==
// @name         CodePen from Snippet
// @namespace    http://roub.net/cpfs
// @version      0.3
// @description  adds a button to SO snippets to forward the snippet data to CodePen
// @author       Paul Roub <paul@roub.net>
// @match        http://stackoverflow.com/questions/*
// @grant        none
// ==/UserScript==

function setUpButtons() {
    $('.copySnippet').each(
        function() {
            var btn = $(this);
            var ctr = btn.closest('.snippet-code');
            var html = ctr.children('.snippet-code-html').text();
            var js = ctr.children('.snippet-code-js').text();
            var css = ctr.children('.snippet-code-css').text();
            
            var datastr = JSON.stringify(
                {
                    'html': html,
                    'js': js,
                    'css': css,
                    'description': "Source: " + document.location.href,
                    'title': "Snippet from " + document.title
                }
            );

            var form = $('<form action="http://codepen.io/pen/define" method="POST" target="_blank" style="display: inline-block">');
            
            $('<input type="hidden" name="data">').
              val(datastr).
              appendTo(form);
            
            $('<input class="cpSnippet" type="submit" value="Copy snippet to CodePen">').
              attr('style', btn.attr('style')).
              appendTo(form);
            
            form.insertAfter(btn);
        }
    )
}

setTimeout( setUpButtons, 1000 );