How do I change the flashvars using the ContentScript of a Chrome Extension?

Question

I want to create a chrome extension to help me debug my swf, and I'd like the extension to be able to change some of the flashvars while keeping others untouched.

I can't imagine this is a new or unique problem, so before I reinvent the wheel, I'm asking if anyone here has examples of it being done, or how to do it.

I've tried searching, but my googlefu seems to be off.

My use case is as follows. I have a Google Chrome extension which has a few drop down menus with possible flash var values. I want the change the values in the drop down, and then reload the swf with these new flashvars, but without changing flashvars which are not in my drop down menus.

I'm able to easily inject a new swf on the page with the values from my dropdown menus, however I'd like to be able to reload, rather than recreate, the swf.

I have tried using Jquery to pull all the flash vars like this:

var flashVars = $("param[name=flashvars]", gameSwfContainer).val();

However, I'm having a hard time changing or replacing just a couple of the values, and then injecting them back into the object. (Regex might be helpful here unless there is a better way?)

Thanks for your help.

Currently, I am trying to do the following, but I'm not sure if it's the right direction. ContentScript.js

//Setup
var swfVersionStr = "10.1.0";
var xiSwfUrlStr = "playerProductInstall.swf";
var params = {};
    params.quality = "high";
    params.bgcolor = "#000000";
    params.allowscriptaccess = "always";
    params.allowfullscreen = "true";
var attributes = {};
    attributes.id = "game_swf_con";
    attributes.name = "game_swf_con";
    attributes.class = "game_swf_con";
    attributes.align = "middle";
var InjectedFlashvars = {
    "run_locally": "true",
        //.. some other flash vars that I won't be changing with my extension
    "swf_object_name":"game_swf"
};
// Injection code called when correct page and div detected;    
var injectScriptText = function(text)
    { 
                loopThroughLocalStorage();
                swfobject.embedSWF(
                    swfName, "game_swf_con",  
                    "760", "625", 
                    swfVersionStr, xiSwfUrlStr, 
                    InjectedFlashvars, params, attributes);
       swfobject.createCSS("#game_swf_con", "display:block;text-align:left;");
    };
        function loopThroughLocalStorage()
    {
        for(key in localStorage){
            try{
            var optionArray = JSON.parse(localStorage[key]);
            var option = returnSelectedFlashVar(optionArray);
            var value = option.value ? option.value : "";
            InjectedFlashvars[key] = value;
            } catch(err){}

        }
    }

    function returnSelectedFlashVar(optionArray){
        for(var i= 0; i < optionArray.length;i++)
        {
            if(optionArray[i].selected == true)
            {
                return optionArray[i];
            }
        }
    }

Overall, I currently have contentscript.js, background.js, options.js, options.html, popup.html and popup.js The code above so far only exists in contentscript.js

Answer 1

Had a little trouble deciding what you actually wanted.
But if its manipulating the values in the flashvar maybe this will help...

queryToObject = function(queryString) {
    var jsonObj = {};
    var e, a = /\+/g,
        r = /([^&=]+)=?([^&]*)/g,
        d = function(s) {
            return decodeURIComponent(s.replace(a, " "));
        };

    while(e = r.exec(queryString)) {
        jsonObj[d(e[1])] = d(e[2]);
    }

    return jsonObj;
}

objectToQuery = function(object) {
    var keys = Object.keys(object),
        key;
    var value, query = '';
    for(var i = 0; i < keys.length; i++) {
        key = keys[i];
        value = object[key];
        query += (query.length > 0 ? '&' : '') + key + '=' + encodeURIComponent(value);
    }
    return query;
}

// this is what a flashvar value looks like according to this page...http://www.mediacollege.com/adobe/flash/actionscript/flashvars.html
var testQuery = 'myvar1=value1&myvar2=value2&myvar3=a+space';

var testObject = queryToObject(testQuery);

console.debug(testObject);

testQuery = objectToQuery(testObject);

console.debug(testQuery);

testObject.myvar0 = 'bleh';

delete testObject.myvar2;

console.debug(objectToQuery(testObject));

And if your using localStorage in a content script then be aware that the storage will be held in the context of the page.
Try looking at chrome.storage instead.

EDIT : Answer to comments
This looks correct, but how do I "reload" the object so that those new flashvars are the ones that are used by the swf?

Ive never used swfObject (havent done any flash stuff in like 5 years) but had a look and it looks like you can just rerun the swfobject.embedSWF with the new flashVars and it will replace the old object with the new one. Which is fine if your replacing one that you added yourself as you can supply all of the details, if your replacing something put there by someone else you could clone the object, change some stuff and replace the original with the clone. Cloning will not clone any events attached to the element but I dont think thats a problem in your case. Here's an example (which I couldnt test as I couldnt find any simple sample swf that just prints the flashvars)....

var target = document.querySelector('#game_swf_con');
// Cloning the element will not clone any event listners attached to this element, but I dont think that's a prob for you
var clone = target.cloneNode(true);
var flashvarsAttribute = clone.querySelector('param[name=FlashVars]');
if (flashvarsAttribute) {
    var flashvars = flashvarsAttribute.value;
    flashvars = queryToObject(flashvars);
    // add a new value
    flashvars.newValue = "something";
    // update the clone with the new FlashVars
    flashvarsAttribute.value = objectToQuery(flashvars);
    // replace the original object with the clone
    target.parentNode.replaceChild(clone, target);
}​

Answer 2

Sources:

a) Content Scripts

b) Background Pages

c) Message Passing

d) tabs

e) Browser Action

f) API()'s

Assuming a html page containing following code

<embed src="uploadify.swf" quality="high" bgcolor="#ffffff" width="550"
height="400" name="myFlashMovie" FlashVars="myVariable=Hello%20World&mySecondVariable=Goodbye"
align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflash" /> 

I try to get following get height of embed object and change it.

Sample Demonstration

manifest.json

{
"name":"Flash Vars",
"description":"This demonstrates Flash Vars",
"manifest_version":2,
"version":"1",
"permissions":["<all_urls>"],
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["myscript.js"]
    }
       ]
}

myscript.js

// Fetches Current Width
width = document.querySelector("embed[flashvars]:not([flashvars=''])").width;
console.log("Width is  " + width);

// Passing width to background.js
chrome.extension.sendMessage(width);

//Performing some trivial calcualtions
width = width + 10;

//Modifying parameters
document.querySelector("embed[flashvars]:not([flashvars=''])").width = width;

background.js

//Event Handler for catching messages from content script(s)
chrome.extension.onMessage.addListener(

function (message, sender, sendResponse) {
    console.log("Width recieved is " + message);
});

Let me know if you need more information.