javascriptjquerykrl

Kynetx app not working when installed via KBX extension on Chrome


My app is loading an external javascript file with jQuery.getScript(). When I use the bookmarklet or an extension to start the app everything works fine. When the app is installed through KBX though inside Chrome with the KBX extension the included functions inside the javascript file are not accessible in the callback anymore and I get : Uncaught ReferenceError: myfunc is not defined .

Is there any trick to get access to the included functions?

Bookmarklet : javascript:(function(){var d=document;var s=d.createElement('script');s.text="KOBJ_config={'rids':['a1135x30']};";d.body.appendChild(s);var l=d.createElement('script');l.src='http://init.kobj.net/js/shared/kobj-static.js';d.body.appendChild(l);})()

Chrome extension : crx

url for installation via KBX : app on KBX

Here is the ruleset:

ruleset a1135x30 {
  meta {
    name "test_external_js_loading"
    description <<
debugging external loading in kbx
    >>
    author "loic devaux"
    logging on
  }

  dispatch {
    domain ".*"

  }

  global {

  }

  rule first_rule {
    select when pageview ".*" setting ()
    // pre {   }
    // notify("Hello World", "This is a sample rule.");
    {
        emit <|

        $K.getScript('http\:\/\/lolo.asia/kynetx_debug/js/myfunc.js',function() {
                myfunc();
                /*
                * myfunc.js content:
                myfunc = function(){
                console.log('running myfunc');
                };
                */
            }
        );

        |>
    }  
  }
}

Solution

  • I'm not completely sure that your issue has to do with the sandboxed environment that the KBX runs your code in but I think it might. Here is a post I wrote about dealing with the sandboxed environment of the KBX http://geek.michaelgrace.org/2011/03/kynetxs-new-sandboxed-browser-extensions/

    From blog post

    I recently released my “Old School Retweet” Kynetx app in the Kynetx app store for the newly released browser extensions. I super love the new extensions and all that they do for users and developers alike. Something that I forgot when I released the app in the app store is that the new extension are sandboxed. Because the extensions are sandboxed, all of the scripts from the extensions run a bit differently than they used to in the previous Kynetx extensions. Without getting into the technical details too much, the previous extensions just injected JavaScript into the page and the new extensions run JavaScript in a sandbox which has access to the DOM but can’t access anything else on the page. Because of this change my retweet app broke since I was using the jQuery loaded by Twitter.com to bring up the new tweet box (I do this because Twitter.com used that library to bind a click event and to trigger that event it has to be from the same library that bound it). Thankfully, with the help of a friend, I was able to get a work around for both Firefox and Chrome’s sandbox environment. How I did it… If the app is run not inside a sandbox I can just access the jQuery that Twitter.com loads to open a new tweet box

    $("#new-tweet").trigger("click");
    

    From within the Firefox sandbox I can access the page outside of the sandbox

    window['$']("#new-tweet").trigger("click");
    

    If I am in the Chrome sandbox I can create a script element that has the JavaScript that I want to execute. Crude, but it works. : )

    var trigger_click_script = document.createElement("script");
    var fallback = "window['$']('#new-tweet').trigger('click');";
    trigger_click_script.innerHTML = fallback;
    document.getElementsByTagName("head")[0].appendChild(trigger_click_script);
    

    Here is the JavaScript code that I ended up with that gets executed when a user clicks on the retweet button.

    // get stuff to retweet
    var tweet = $K(this).parents(".tweet-content").find(".tweet-text").text();
    var name = $K(this).parents(".tweet-content").find(".tweet-screen-name").text();
    
    // build tweet
    var retweet = "RT @"+name+" "+tweet;
    
    // open new tweet box
    $("#new-tweet").trigger("click");
    
    // hack for FF sandbox
    if ($("#tweet-dialog:visible").length === 0) {
      window['$']("#new-tweet").trigger("click");
    }
    
    // put tweet in new tweet box
    $K(".draggable textarea.twitter-anywhere-tweet-box-editor").val(retweet).focus();
    $K("#tweet_dialog a.tweet-button.button.disabled").removeClass("disabled");
    
    // hack for chrome sandbox
    if ($("#tweet-dialog:visible").length === 0) {
      var fallback = "window['$']('#new-tweet').trigger('click'); ";
      fallback += "window['$']('.draggable textarea.twitter-anywhere-tweet-box-editor').val('"+retweet+"').focus(); ";
      fallback += "window['$']('#tweet_dialog a.tweet-button.button.disabled').removeClass('disabled'); ";
      var trigger_click_script = document.createElement("script");
      trigger_click_script.innerHTML = fallback;
      document.getElementsByTagName("head")[0].appendChild(trigger_click_script);
    }