Google Chrome Extension and Loading/Embeding the Flash Files

If you are Google Chrome Extension developer, then you may have used the “chrome-extension://” protocol to refer to the locally stored files under the extension (could be images, JS, html, etc).

However, I have been trying to use the “.swf” files in the page, and it had kept failing. For some reason, you can’t use the embed tag source with file protocol like “chrome-extension://”. Now this might be some security check at Adobe Flash plug-in or it could be a bug in the Chrome. As a workaround, I have shared the resources on a website, and using them from the extension.

FYI, I have been using this in the Basecamp Extension product to show the animated and active graphs which are developed in the Falsh. I know there are other, may be even better, workarounds available in the JavaScript only, but I started with the flash, and its code is complex enough to stop me from porting this to another language until I have lot of free time.

So, back to the problem, with increased security policies from the Google with Chrome Extensions, I have to look back into this because now youc an’t load the remote resoruces from the “http” only remote (though you can access remote resources over the https).

Fortunatley, the new version of the Chrome on Windows allow accessing the flash files in the extension folder (or may be it was a Adobe Flash fix). But this works on the Windows only, and other Google Chrome version for platforms like Mac OS-X or Linux still have this issue.

After, doing some research, I was able to make all this work and thought to share with you too.

The trick is that though you can’t seem to load the local (placed in extension bundle) swf files using the embed tags, this work well if you add the flash file using the iFrame tag. This solves one problem, but what if you also have to pass the data (as used the FlashVars). The asnwer is simple, and that’s you can pass all these variables using query string parameter.

So, here is my fix for all this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Get the full path of the locally stored graph file
graphUrl = chrome.extension.getURL ("FusionCharts/" + graphFile);
 
// Setup the width and height
graphWidth = 500;
graphHeight = 300;
 
// So far only the Windows Chrome seems to load the local flash/swf files correctly
// For all others, we need to use the iFrame to load the local swf file
if (!(window.navigator.userAgent && window.navigator.userAgent.indexOf("(Windows") > 0) )
{
	// Add the flash varaibles/defaults
	graphUrl += "?chartWidth="+graphWidth+"&chartHeight="+graphHeight;
	graphUrl += "&debugMode=0&DOMId=bceTimeChart&registerWithJS=0&scaleMode=noScale&lang=EN";
 
	// Make an IFRAME and set this flash object as its source
	iFrameHtml = "<iframe src='"+graphUrl+"' style='border:none; width:100%; height:"+graphHeight+"px'>"
	$('#bceGraphDiv').html(iFrameHtml);
}
else
{
	// Render the flash file using the EMBED tag
	// Better use swfobject for rendering:
	// http://code.google.com/p/swfobject/
}

The solution is not very elegant, but at least it works

Tags: Chrome, Chrome Extension, Embed, Flash, SWF

This entry was posted on Monday, September 24th, 2012 at 10:39 am and is filed under Google Products, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.