We Keep Coding

How to make a variable in content script which is accessible on all the pages

I have a content script in which there is a script called myscript.js, now I have made it in such a way that if a page on google.com loads then setA of modifications are done otherwise setB of modifications are done. Now I want a variable which is accessible from all the webpages that open on that browser. like we have static variables in java, the same variable is accessible to all the objects of the class, using that analogy here the static variable is the global variable and objects are webpages that load

If you need something available in every instance of content scrips (and other extension pages too), you can use chrome.storage API.
A slight downside is that the API is asynchronous:
var myValue;
chrome.storage.local.get({myKey: "myDefault"}, function(data) {
myValue = data["myKey"];
// You can use myValue here..
});
// ..but not here
This is fine if you're okay with chaining asynchronous code; otherwise, you can maintain a local copy and update it on onChanged instead of using get every time:
chrome.storage.onChanged.addListener(function(changes, area) {
if(area == "local" && changes["myKey"]) {
myValue = changes["myKey"].newValue;
}
});

Create Multiple Instances Of Same Script

I am currently building a website that uses windows to load in new content via ajax. These windows are allowed to contain the same page as in another window using the same javascript. Currently I assign a unique id to the new window which it then stores for later use.
Once the code is loaded in, all the ids in that window are converted by adding on to them a unique_id. ie "box" becomes "box_win1". I then send this id to the javascript by assigning it to a variable so it can be used in document.ready function.
The pseudo code for the window is like the following:
document.ready{
var temp_id=id+1;
$("#mybox" + temp_id).val("abc")
//run some startup stuff
}
I am just wondering is there a better way to do this. As I find if I open to many new windows all at once the temp_id conflicts and goes to the wrong window.
I would like to some how create an instance of the code but I am not sure how. I cannot use global functions however as that may cause naming conflicts.

put this into a function
function callMe (){
var temp_id=id+1;
$("#mybox" + temp_id).val("abc")
//run some startup stuff
}
you can use callMe() anywhere then

Javascript storing/state of global data/object

Is there a way to store global data in the window object such that the data can survive page reloads/refresh. So lets say I assign my global data/object -
window.myObject = myProductObject
And the user refreshes/reloads the page or may be jumps to another page of my website. Is window.myObject still available after the page reload?
NOTE -: I cannot store the object in a cookie, since its a object, I mean it could be a reference to another custom object or it could refer to another "window" object which has opened via "window.open"

Use the window.top.name hack
var data = window.top.name ? JSON.parse(window.top.name) : {}
...
window.top.name = JSON.stringify(data)
window.top.name persists across page loads
I recommend you use an abstraction like lawnchair instead though

You CAN save objects in cookies. But localStorage is better. Is similar to a cookie but you get 5Mb to use.
You have to JSON encode/decode if you save objects instead of strings, but that is easy with a wrapper on localStorage or cookie.
Here is a really simple wrapper for localStorage (you have 5Mb to use):
var Storage = {
set: function(key, value) {
localStorage[key] = JSON.stringify(value);
},
get: function(key) {
return localStorage[key] ? JSON.parse(localStorage[key]) : null;
}
};
And you can use it like this:
$(function() {
var defaultValue = {param1: 'value',counter: 0 },
myObj = Storage.get('myObj') || defaultValue; // get the obj from storage or create it with default values
$('body').html('counter: ' + myObj.counter);
myObj.counter+=1; // increment counter
Storage.set('myObj', myObj); // save it to localStorage
});
​
You can try it on this jsFiddle: http://jsfiddle.net/guumaster/LytzA/3/

You could try storing a string representation of your object in a cookie, provided the object is made up of values only (no methods), eg
var foo = { a: "a", b: "b" };
document.cookie = "foo=" + JSON.stringify(foo);
There's a good cookie reader / writer example here - https://developer.mozilla.org/en/DOM/document.cookie

I'm not sure how this fairs cross-browser. I at least got it to work in chrome, firefox and IE9 and IE8/7 in compatibility mode, but you will get warned about popups. You can detect if popups are being blocked and refuse to load anything until they are enabled for your site. See Detect blocked popup in Chrome
I'm using jQuery to bind to the beforeunload event, you can use your preferred solution.
jQuery(function ($) {
$(window).bind('beforeunload', function () {
window.open("", "_savedata", "titlebar=0,width=100,height=100").saveData = window.saveData;
});
var store = window.open("", "_savedata");
window.saveData = store.saveData;
store.close();
});
Example: (refresh the page a few times)
http://jsfiddle.net/hZVss/1/
And as requested by #Raynos - persisting closure state - something you can't serialise (works in firefox and chrome at least, IE calls it a security issue, but might be something to do with how jsfiddle is using frames)
http://jsfiddle.net/ght9f/2/
Disclaimer: I wouldn't vouch for the elegance of this solution. I was merely curious about persisting object state using popups. Serialising your object to JSON and storing it in a client side store is much better (#Raynos would recommend lawnchair https://github.com/brianleroux/lawnchair/). You should avoid cookies if you can as this data gets posted back to the server, which might not be ideal.
If your main objective was to persist references to popup windows you can actually do this by giving the popup a name. This is exactly how I am persisting my reference to the popup that I create on refresh.

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');
};
*/
}
);
|>
}
}
}

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);
}

Another thing that you can do to make your stuff accessible outside of the sandbox is the declare your stuff at the window level (defeats the purpose of the sandbox, and not recommended). For example: if you want to perform a console.log, whilst inside the sandbox, the console.log won't log to the window console. But, if you say window.console.log, it will. So, you could (but shouldn't) declare a var the following way:
window.myvar = "MyValue";
That would make the var a window level var. Even though I am preaching against this, I have done it a time or two, for testing.

So... I just did something that worked for both FF and Chrome. It isn't pretty, but none of this really is. It was nice to have one workaround for both instead of having to work differently for FF than Chrome. I needed to get the value from a global object... but the sandbox was blocking that. With this hack I was able to do that one way for both browsers.
First, from within the sandbox... add an invisible div to the bottom of the document.body
$K('body').append('<div id="randomdiv" style="display:none;"></div>');
Then create a script in the document.head that will set the text of the randomdiv to the value that I needed.
var temp = '$("#randomdiv").text(twttr.currentUserScreenName);';
var somescript = document.createElement("script");
somescript.innerHTML = temp;
document.getElementsByTagName("head")[0].appendChild(somescript);
Then... at this point, from within the sandbox, you can select the value from the DOM, rather than from some global js object. This is how you would do it.
var myvar = $K('#randomdiv').text();
Let me know your thoughts. This is what was the easiest for me.

How to code firefox extension which run javascript code in the page's context like firebug does

I know that for safety reasons that this is not easy to achieve, however there would be a way to do so as firebug does...
Please help, would like to invoke some script in the page's context to achieve some effect...
Basically, I would like to achieve two functionality:
1. add jQuery to any web page automatically if not already exist.
2. when open certain address, call a method of that page to auto notify the server. (an ajax functionality of the page)
I have tried to inject on the body, no luck.
tried to get the window object, which however do not have access to call the function.
Will try to change the location to something like: javascript:alert('test inject');
Many thx.

OK, after reading some official documentation and the GreaseMonkey's source, I get the following method which basically works for me.
Hope it will save sb's hour:
var appcontent = document.getElementById("appcontent"); // browser
if (appcontent) {
appcontent.addEventListener("DOMContentLoaded", function (evnt) {
var doc = evnt.originalTarget;
var win = doc.defaultView;
var unsafeWin = win.wrappedJSObject;
// vote.up is the function on the page's context
// which is take from this site as example
unsafeWin.vote.up(...);
}, true);
}
}

Greasemonkey does that. If you are developing your own extension with similar functionality, you can use Components.utils.evalInSandbox.