7

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

Giakki
  • 71
  • 2
  • No answer for you, but a suggestion: your YouTube SWFObject code declares FlashVars in two different places; I suggest you simplify to a single method. ?enablejsapi=1&playerapiid=player can be inserted into the FlashVars object as { autoplay: 1, enablejsapi: 1, playerapiid: "player" }. Alternately, you can move 'autoplay' into the querystring: ?enablejsapi=1&playerapiid=player&autoplay=1 – pipwerks Sep 01 '11 at 19:09
  • @pipwerks Thanks for the suggestion, I don't know how I forgot that! – Giakki Sep 01 '11 at 19:59
  • I'm confused about how "player" is defined. Sometimes its a global (in "playerPause") and sometimes it's a local (in "onYouTubePlayerReady") maybe there's a hint there. – mjhm Sep 01 '11 at 20:22
  • @mjhm You are right, it was a little confusing, so I changed the values to the default ones in their tutorial (I am desperate), but it is still not working. The onYouTubePlayerReady function never gets fired, and even if I fire it from the console I get that the methods are undefined... – Giakki Sep 02 '11 at 09:18
  • 1
    My fear is: (From the documentation) _Note: To test any of these calls, you must have your file running on a webserver, as the Flash player restricts calls between local files and the internet._ Which would mean that the Youtube player can't be embedded in a Chrome extension. Can anyone confirm? – Giakki Sep 02 '11 at 09:35
  • You can test the local security by changing your Flash Player security settings to allow local communication. Specifically, you have to allow access to local folders. Here's a decent write up of how to do that: http://krpano.com/docu/localusage/ If it works after you change your security settings, you've found the problem. :) – pipwerks Sep 05 '11 at 07:59
  • Did you ever come to a conclusion about this? I am experiencing a similar issue. I am able to get it to work without using the swfobject, but deployment is a whole 'nother can of worms. – Sean Anderson Feb 20 '12 at 23:06
  • Have you tried version 2 of manifest file (Chrome 18 and above) with proper content permissions? – hamczu Mar 03 '12 at 22:44
  • Why do you want to embed YouTube video to background page? Background page is something not visible to user. From what I know, you can not embed youtube video to extensions pages. However, you can embed youtube video to sandboxed page. http://developer.chrome.com/extensions/manifest.html#sandbox – Jacob Dam Mar 11 '13 at 04:46

2 Answers2

0

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)

greatghoul
  • 1,448
  • 1
  • 17
  • 19
0

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.

Arjun Ajith
  • 141
  • 1
  • 1
  • 8