How to make a variable to be visible across tabs when using google chrome developer console

Question

I have a script that I usually execute across my opened tabs on chrome developer console.

Some of my variables are common to all the tabs.

So how can I make a variable to be visible across the tabs, so I can share the common ones?

Answer 1

You can use any HTML5 storage, I recommended use sessionStorage/localStorage. Then any key changed in sessionStorage/localStorage it fire Storage event for all tabs in same domain.

Add handler to storage:

if (window.addEventListener) {
  window.addEventListener("storage", handle_storage, false);
} else {
  window.attachEvent("onstorage", handle_storage);
};

In this handle_storage we will listen for example global_storage_vars key to know what vars are shared. Storage event fire for all browser tabs:

function handle_storage(e){
    e = e || window.event;

    //key that changed  e.key;
    //old value         e.oldValue;
    //new value         e.newValue;
    
    if (e && e.key === 'global_storage_vars') {
        console.log('The global vars changed to:', e.newValue);
        //here you can get a needed shared variable and do what you want
    }   
}

Example:

First tab - http://fiddle.jshell.net/r8dy8rf7/show/light/

Second tab - http://fiddle.jshell.net/nL7cq9xu/show/light/

Run in first tab console localStorage.setItem('global_storage_vars', {a : 1}) and check second tab.

Access across all tabs with different domains:

You can make a Chrome Extension and it can has access to all tabs.