Search code examples
javascriptcssbookmarklettinybox2

Using Tinybox in a JS bookmarklet

im trying to create a JavaScript bookmarklet that essentially contacts a server I own, gets a 6 digit code replied, and use Tinybox and Google Chart's API to generate a QR code of the code replied from my server. I have used Tinybox and Google Chats QR API Prior in a static HTML page and it worked like a charm. Im using a JS library to pull-in the tinybox.js and its style sheet that I renamed to tinystyle.css. I get no errors when I run it but nothing shows up when its activated! Any help with my issue would be greatly appreciated! Below is my bookmarklet code:(Iv replaced any instances where it points to my server with 'www.myserver.com')

javascript:(function(){function callback(){ScriptLoader.load([{file:"http://www.myserver.com/tinybox/tinystyle.css",type:"css"},{file:"http://www.myserver.com/tinybox/tinybox.js",type:"js"}], success, null);function success() {console.log('BMUS Scripts...OK!');(function(){function callback(){var xmlHttp = null;xmlHttp = new XMLHttpRequest();xmlHttp.open( "GET", "http://bmus.esy.es/create.php?url="+encodeURIComponent(document.location.href), false );xmlHttp.send( null );TINY.box.show({image:'https://chart.googleapis.com/chart?cht=qr&chs=700x400&chl='+xmlHttp.responseText,width:700,height:400});}});}}var s=document.createElement("script");s.src="http://asimishaq.com/uploads/script-loader.js";if(s.addEventListener){s.addEventListener("load",callback,false)}else if(s.readyState){s.onreadystatechange=callback}document.body.appendChild(s);})()
Solution

  • I figured it our after about and hour of work. I used a script called yepnope.js to pull in the scripts and CSS. Works like a charm and is simple to use.

    How to pull in JS scripts with yepnope.js:

    // Example
yepnope.injectJs("www.site.com/incluedme.js", function () {
  console.log("Script loaded!");
}, {
  charset: "utf-8"
}, 5000);

    How to pull in a CCS sheet with yepnope.js:

    // Example
yepnope.injectCss("www.site.com/required.css", function () {
  console.log("css injected!");
}, {
  media: "print"
}, 5000);

    Above Examples are from yepnopejs.com

    And this is how I used the 2 examples above for my bookmarklet:

        yepnope.injectCss("www.site.com/required.css", function () {
      console.log("css injected!");
yepnope.injectJs("www.site.com/incluedme.js", function () {
  console.log("Script loaded! ALL DONE!");
}, {
  charset: "utf-8"
}, 5000);
    }, {
      media: "print"
    }, 5000);