chardin.js chrome devtools snippet.

chardify.js

(function () {

  if ( !window.jQuery ) {
    var s = document.createElement('script');
    s.setAttribute('src', '//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js');
    document.body.appendChild(s);
    console.log('jquery loaded!');
  }
  
  if ( !window.jQuery.fn.chardinJs ) {
    var head = document.getElementsByTagName('head')[0];
    var l = document.createElement('link');
    l.setAttribute('rel', 'stylesheet');
    l.setAttribute('type', 'text/css');
    l.setAttribute('href', 'https://rawgithub.com/heelhook/chardin.js/master/chardinjs.css')
    head.appendChild(l);
    
    var s = document.createElement('script');
    s.setAttribute('src', 'https://rawgithub.com/heelhook/chardin.js/master/chardinjs.js');
    head.appendChild(s);
    
    console.log("OK, Don't forget to add 'data-intro', 'data-position' target element.")
  }
  
  // TODO : convert to jQuery plugin
  window.chardify = function($el, intro, position) {
    $el.attr('data-intro', intro);
    $el.attr('data-position', position);
  }
  
  window.dechardify = function($el) {
    $el.attr('data-intro', '');
    $el.attr('data-position', '');
  }

})();