SWFobject in a Chrome Extension - API Unavaiable

Question

Hi!
I'm building a Chrome extension, in which I need to embed a SWFobject in the background page.
Everything works, except the JavaScript controls for the SWFobject and the eventListeners.
My guess is that it has something to do with the cross-domain policies, because while testing the page on a webserver everything worked fine.

Anyway, here's a snippet:

In the main page:

var playerView =  chrome.extension.getBackgroundPage(); 
$('#playerPause').click(function(){
    playerView.playerPause();
});

In the background:

function playerPause() {
    if (postData[nowPlaying].provider == 'youtube' ) {
        player.pauseVideo();
    } 
    else if (postData[nowPlaying].provider == 'soundcloud' ) {
        player.api_pause();
    };
}

And the eventListeners:

soundcloud.addEventListener('onMediaEnd', playerNext);

function onYouTubePlayerReady(player) {
    player.addEventListener("onStateChange", "function(state){ if(state == 0) { playerNext(); } }");
}

In the console it throws

"Uncaught TypeError: Object # has no method 'pauseVideo'"

for both the Youtube embed the Soundcloud one.

Also, the SWFobject is embedded like this (and works):

function loadTrack (id) {
    if(postData[id].provider == 'youtube') {
        swfobject.embedSWF(
            "http://www.youtube.com/e/" + postData[id].url + "?enablejsapi=1&playerapiid=player",
            "player",
            "1",
            "1",
            "8",
            null,
            {
                autoplay: 1
            },
            {
                allowScriptAccess: "always"
            },
            {
                id: "player"
            }
        );
    }
    else if(postData[id].provider == 'soundcloud') {
        swfobject.embedSWF(
            'http://player.soundcloud.com/player.swf',
            'player',
            '1',
            '1',
            '9.0.0',
            'expressInstall.swf',
            {
                enable_api: true, 
                object_id: 'player',
                url: postData[id].url,
                auto_play: true
            },
            {
                allowscriptaccess: 'always'
            },
            {
                id: 'player',
                name: 'player'
            }
        );
    }
}

Sorry for the lengthy post, I wanted to provide as much information as possible.
Also, I know the code isn't pretty, this was only my second application ;)

Thanks a lot in advance to anyone who can help,
Giacomo

Answer 1

You can have a look at this extension, you can not access local connection in chrome extension, but you can run a content script as a proxy script instead.(You can serve a proxy page on gae or any other free servers)

Answer 2

The problem here is that you can't use inline scripts or inline event handlers in chrome extensions ever since the manifest evolved to v2.

You should have added the manifest file for me to understand what's going on better. But briefly all you CAN ever do is

In the main page,

• Remove all inline scripts and move them to an external JS file.
• Remove inline event listeners, move them to the same or another external JS and use

  addEventListener().

But the issue is, You can't execute calls to the swf in the background page or expect it to return anything. All these will continue to give you "Uncaught TypeError" Exception.

Take the case of a webcam image capturing swf, the webcam will be streamed to the page, but the function call to it can never be made and hence the image will never be captured. My project to scan QR codes from the addons popup met the ruins due to this.