Chrome Extension doesn't work on player.spotify.com, only on play.spotify.com

[RossBlakeD]

I am not sure where the issue is. My spotify web player is player.spotify.com even if I type play.spotify.com. It resolves back to player...

I sent the spotify html file to Paul and I hope that will provide some insight.

When I click the chrome soundbounce extension from the spotify webplayer tab, nothing happens.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/23274864-chrome-extension-doesn-t-work-on-player-spotify-com-only-on-play-spotify-com?utm_campaign=plugin&utm_content=tracker%2F9578624&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F9578624&utm_medium=issues&utm_source=github).

[pdaddyo]

OK Yes this is definitely to do with player.spotify.com. I've updated wiki to mention this as caveat.

[pdaddyo]

I've updated the chrome extension description to warn of this limitation too.

[pdaddyo]

@RossBlakeD Hi Ross, or anyone else with this issue, please can you do me a favour, and follow the instructions here https://basecamp.com/help/guides/troubleshooting/creating-a-HAR-file to create a HAR file.

Please do it on the player.spotify.com tab - hit record in dev tools (F12) network tab, refresh page, click Soundbounce extension, then "save with content" and post either here or to paul.barrass@gmail.com, cheers.

[Papipo]

There you go: https://copy.com/FVDpJT7JzCkrayay

[pdaddyo]

Thanks @Papipo - what is your spotify username?

[pdaddyo]

@Papipo or anyone with player.spotify.com access - please can you do me a favour and open dev tools once the player has loaded, and paste in here your localStorage object once logged in, or just Object.keys(localStorage) if you're concerned about privacy. I'll pick this up tomorrow.

[beveradb]

I don't have access to the beta, but when I browse to that domain I seem to get redirected by javascript, not by a 302 header from the server. See HAR: https://www.dropbox.com/s/6y4cced5bsi80t1/andrew-player.spotify.com-load-including-redirect-to-play.spotify.com.har?dl=0

[pdaddyo]

OK I have a potential fix here. @Papipo please can you run this snippet in your spotify player dev tools, and it should display your spotify username. If this works, I'll update the extension and we'll see if it logs in...

for(var key in localStorage){ if(key.indexOf('notifications-')==0) console.log(key.substr('notifications-'.length));}

[RossBlakeD]

On Windows 7, I currently can launch the extension from https://player.spotify.com and see the rooms. When I click on a room, it recognizes and says, "Joining.." but nothing happens after that.

[pdaddyo]

@RossBlakeD - glad we seem to have solved the authentication issue then. To work out the joining issue, please can you confirm A) that you are not logged into soundbounce elsewhere and B) http://websocketstest.com/ works for you for port 443.

[RossBlakeD]

On MacOS X v 10.10.4, I can use extension to login to soundbounce and join and a room. I join the room and can chat and see tracks playing - no sound. On win 7 - same as before. I can login. I can see rooms, click to join rooms but I am not able to join room or hear tracks.

A) Not logged in SB elsewhere B) I think this means port 443 is supported. (see screenshot)

[pdaddyo]

Unfortunately we don't support websockets using SSL, for now. Support is planned in future but I don't have a timescale for that at all, sorry...

[pdaddyo]

If / when we do move to wss:// (web sockets with ssl), we'll be able to embed soundbounce inside the spotify tab. Lack of support for SSL is the reason it's a separate tab at the moment.

[RossBlakeD]

OK, that explains windows, I suspect that is a antivirus measure and port 443 can be openned up on windows. I'll see if I can figure that piece out. On Mac, that socket port is open. Still does not play.

[RossBlakeD]

btw: is it the player that is closing down port 443 because of https? https://player.spotify.com/ This is where I land when I type play.spotify.com

[pdaddyo]

Yes, that's why we have to have Soundbounce in a diff tab. If we supported wss:// for the websocket, then it could be embedded in an https site (i.e. the spotify player) as an iframe.

So the issue (and same thing has been reported to me on facebook) is player.spotify.com is not accepting the commands (play, pause, etc) properly from the extension.

Please can you launch the extension from player.spotify.com, join a room (so it's trying to play music), then go to the spotify player tab, show dev tools, and paste any error messages in the console log here - that'd really help me work out what is different in that player.

[RossBlakeD]

Failed to update icon badge Error: Request failed with status code 404 at WebResolver.onSuccess (https://player.spotify.com/app/zlink/fbb6617/main.js:32758:23) at executeDeferreds (https://player.spotify.com/app/zlink/fbb6617/main.js:35386:17) at handlePostMessage (https://player.spotify.com/app/zlink/fbb6617/main.js:49862:18) pubads_impl_65.js:153 Mixed Content: The page at 'https://player.spotify.com/app/browse/7.1.0/index.html?v=0.4.0&locale=en' was loaded over HTTPS, but requested an insecure resource 'http://www.rgeneratorbannerhosting.com/spotify/acdc/english_og/hpto/ACDC_HPTO_3.html'. This request has been blocked; the content must be served over HTTPS.rh @ pubads_impl_65.js:153mh @ pubads_impl_65.js:154jh @ pubads_impl_65.js:151kh @ pubads_impl_65.js:148(anonymous function) @ pubads_impl_65.js:166(anonymous function) @ ads?gdfp_req=1&correlator=12913509138432&output=json_html&callback=googletag.impl.pubads.setAdConte…:1 data:text/html;char…:1 Mixed Content: The page at 'data:text/html;charset=utf-8,%3Ciframe%20src%3D%22http%3A%2F%2Fwww.rgenerat…%22235%22%20frameborder%3D%220%22%20scrolling%3D%22no%22%3E%3C%2Fiframe%3E' was loaded over HTTPS, but requested an insecure resource 'http://www.rgeneratorbannerhosting.com/spotify/acdc/english_og/hpto/ACDC_HPTO_3.html'. This request has been blocked; the content must be served over HTTPS.

Uncaught TypeError: Cannot read property 'contentWindow' of null (program):1 1224545736 (program):1 Uncaught TypeError: Cannot read property 'contentWindow' of null (program):1 Uncaught TypeError: Cannot read property 'contentWindow' of null (program):1 Uncaught TypeError: Cannot read property 'contentWindow' of null (program):1 Uncaught TypeError: Cannot read property 'contentWindow' of null main.js:9822 Failed to update icon badge Error: Request failed with status code 404 at WebResolver.onSuccess (https://player.spotify.com/app/zlink/fbb6617/main.js:32758:23) at executeDeferreds (https://player.spotify.com/app/zlink/fbb6617/main.js:35386:17) at handlePostMessage (https://player.spotify.com/app/zlink/fbb6617/main.js:49862:18) VM18636:1 1224545736 (program):1 Uncaught TypeError: Cannot read property 'contentWindow' of null (program):1 Uncaught TypeError: Cannot read property 'contentWindow' of null

[pdaddyo]

Thanks, this is useful - I can see it's failing to find the "app-player" iframe that is there on play.spotify.com:

Does your player iframe have a different id maybe? Or perhaps it's nested inside another iframe?

A screenshot of the "Elements" tab of dev tools with the player iframe selected would be great.
Thanks again for your help!

[RossBlakeD]

[RossBlakeD]

I don't have the little docked player the way you have illustrated. I am not even sure where to find that option.

[RossBlakeD]

[pdaddyo]

Oh they've completely moved the player - it's now at the bottom! It's the bit with the play / skip + seek bar I'm after, similar screenshot with that selected would be great. THanks again

[RossBlakeD]

[RossBlakeD]

That captures the class plus I expended the relevant controls underneath. Let me know if that isn't it.

[RossBlakeD]

btw: on windows 7, after having the room joining fail on the chrome extension, I went to launch the soundbounce app and now have the same problem with the app. I tried switching to all 3 ports. No difference. Probably need to reboot.

[pdaddyo]

It looks like there might be an iframe called #main that contains that div perhaps? Please can you paste this line into the console and see if any music plays (Jackson 5!):

document.getElementById('main').contentWindow.window.eval('window.top.postMessage(JSON.stringify({"type":"cosmos-request","resolver":1,"id":"cosmos_99999999","name":"cosmos_request_create",      "payload":{"action":"POST","uri":"sp://player/v1/main","headers":{},                "body":JSON.stringify({"action":"play","context":"spotify:track:3b0EOvScbZUc0qJx0E1L2z","tracks":["spotify:track:3b0EOvScbZUc0qJx0E1L2z"],    "options":{"repeat":false,"shuffle":false,"can_repeat":true,"can_shuffle":true,"can_skip_prev":true,"can_skip_next":true,"can_seek":true,"use_dmca_rules":false},                    "play_origin":{"source":"unknown","reason":"playbtn","referrer":"spotify:app:now-playing-recs","referrer_version":"2.2.2","referrer_vendor":"com.spotify"}})}}), "*")');                  

[Papipo]

I want you back! :sparkles: :globe_with_meridians: :sparkles:

[RossBlakeD]

Yep. Jackson 5 plays ixed Content: The page at 'https://player.spotify.com/app/browse/7.1.0/index.html?v=0.4.0&locale=en' was loaded over HTTPS, but requested an insecure image 'http://d3rt1990lpmkn.cloudfront.net/unbranded/03fa7db6aae8ffb4a936d0fe5a4f419199c313a9'. This content should also be served over HTTPS. runner.js:2183 Load playlist: 13276.963ms document.getElementById('main').contentWindow.window.eval('window.top.postMessage(JSON.stringify({"type":"cosmos-request","resolver":1,"id":"cosmos_99999999","name":"cosmos_request_create", "payload":{"action":"POST","uri":"sp://player/v1/main","headers":{}, "body":JSON.stringify({"action":"play","context":"spotify:track:3b0EOvScbZUc0qJx0E1L2z","tracks":["spotify:track:3b0EOvScbZUc0qJx0E1L2z"], "options":{"repeat":false,"shuffle":false,"can_repeat":true,"can_shuffle":true,"can_skip_prev":true,"can_skip_next":true,"can_seek":true,"use_dmca_rules":false}, "play_origin":{"source":"unknown","reason":"playbtn","referrer":"spotify:app:now-playing-recs","referrer_version":"2.2.2","referrer_vendor":"com.spotify"}})}}), "*")'); undefined

[pdaddyo]

OK thanks for info. I've pushed an update that should be live in the Chrome Store within the hour - v0.4.2 - once you're on this version, let me know if the music plays and we can hopefully close this issue... (fingers crossed!)

[pdaddyo]

Fix commit was here btw https://github.com/pdaddyo/soundbounce/commit/ef5fdd0bce448a91960588959a8dfd052b04adf4

[RossBlakeD]

There are two results: Good & Bad Good first. MacOS is now playing. It has some of the same issues as the app. It plays through the spotify player tab for some period of time and then stalls. You have to pause and play to twerk it back into audio. During that time, the speaker on the spotify player tab is gone. So I do not know why that happens but it happens on both the app and the extension.

Windows. After reinstalling both the app and chrome extension on Windows 7, neither soundbounce platform will join a room. When I click on the room, it says "Joining" for a few sec and nothing happens. I am not sure how to resolve this.

[pdaddyo]

OK, did we realise Windows 7 was to do with lack of websockets on 443 support?

Re: spotify player audio cutting out - does it do it when you play a track manually in the spotify player tab?

[RossBlakeD]

Windows7 Attempt to join room as captured by dev tools | Network:

Request URL:ws://app.soundbounce.org:443/myy4VG4z Request Method:GET Status Code:101 Switching Protocols Response Headers view parsed HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: D7F0RdrD7Xv0NdmXxuzsJq+fguc= Request Headers view source Accept-Encoding:gzip, deflate, sdch Accept-Language:en-US,en;q=0.8 Cache-Control:no-cache Connection:Upgrade Cookie:__cfduid=d8fc3469cf0dfe023ea134172606800701435764333; _ga=GA1.2.1382316177.1435764320; _gat=1; connect.sid=s%3AxLzZ_LYf-R5yk6UxEeQkWJU-sUxvbyay.kHWqlJAULH1p6KvosVf9l%2BVoQYKKoGs5v6VDyIc5sto Host:app.soundbounce.org:443 Origin:http://app.soundbounce.org Pragma:no-cache Sec-WebSocket-Extensions:permessage-deflate; client_max_window_bits Sec-WebSocket-Key:36MyQ0vFhbPocsCwg5J0CQ== Sec-WebSocket-Version:13 Upgrade:websocket User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36

[RossBlakeD]

WebSocket connection to 'ws://app.soundbounce.org:443/myy4VG4z' failed: WebSocket is closed before the connection is established.

[RossBlakeD]

And yes, the spotify web player is reliable and does not seem to have the same audio interruptions.

[RossBlakeD]

Why is player.spotify.com able to establish a websocket while app.soundbounce.org cannot?

Request URL:wss://sjc1-linkap-a8.ap.spotify.com/ Request Method:GET Status Code:101 Switching Protocols Response Headers view source Connection:upgrade Date:Sun, 05 Jul 2015 17:42:21 GMT Sec-WebSocket-Accept:svz1s61UiPROBf2vv9VItkhwMUE= Server:nginx Upgrade:websocket

wss://sjc1-linkap-a8.ap.spotify.com/

[pdaddyo]

Really strange that a track triggered via Soundbounce chrome extension would have buffering issues vs one launched in the player, as far as the player is concerned they are the same thing. Would be great if you could do a bit more testing and see if this is definitely the case....much appreciated.

[RossBlakeD]

Please be specific. What is the test?

[pdaddyo]

Why is player.spotify.com able to establish a websocket while app.soundbounce.org cannot?

Because spotify is using wss:// (websocket over TLS - i.e. secure websockets) - we're using ws:// because I don't have an SSL certificate set up on the server, and the node library we're using doesn't seem to support wss:// out the box.

I'd like to move to wss:// because then we can embed soundbounce app inside the spotify tab, as mentioned earlier in this thread. I'll probably do this by using nginx as a reverse proxy and keep the node server as is.

[pdaddyo]

Test is: please check if the "stalls" reported on osx are consistent and reproducable, and if any console errors happen in spotify when it's stalling etc.

edit: I realise you asked me to be specific and ended my request with "etc." ;) - essentially any further information about the timing and frequency of the stalls is what I'm after.

[pdaddyo]

wss:// issue now open here #272

[RossBlakeD]

Test results: Console on the spotify player side is inactive. The console on the soundbounce extension side shows calls to play individual tracks: call - play - done. Nothing shows in the console on the spotify side. I may be looking in the wrong place.

Additionally, with MacOS, what seems to be happening is this: Left idle, the two seem to play reliably. So I began to simulate what I do when I am using the soundbounce app: Chat, add stupid link images and perhaps most challenging, add, vote and preview tracks. Once I started doing this, I got the spotify player to fail audio on a track. When the next track was called from the extension, it began to play again. Not sure how to isolate this. I suspect that track preview is the culprit but it does not reliably cause a fail. Some amount of time goes by before the audio fails. It i s not immediate.

[RossBlakeD]

I don't know if it is related but I did get this alert in the player.spotify.com console while audio was failing: Mixed Content: The page at 'https://player.spotify.com/app/browse/7.1.0/index.html?v=0.4.0&locale=en' was loaded over HTTPS, but requested an insecure image 'http://d3rt1990lpmkn.cloudfront.net/unbranded/03fa7db6aae8ffb4a936d0fe5a4f419199c313a9'. This content should also be served over HTTPS. runner.js:2183 Load playlist: 8432.791ms

[RossBlakeD]

another error (related?) occurred while audio was failing: Uncaught TypeError: Cannot read property 'reason' of null(anonymous function) @ main.js?v=0.2.0:3c.emitEventSync @ spotify.sdk.5.8.3-8be3a59.min.js:1197(anonymous function) @ spotify.sdk.5.8.3-8be3a59.min.js:1196a @ spotify.sdk.5.8.3-8be3a59.min.js:560h @ spotify.sdk.5.8.3-8be3a59.min.js:561

[RossBlakeD]

One last error:

Uncaught SyntaxError: Unexpected token ILLEGAL VM4874057:1

clicking on VM4874057:1 link: playerFrame){ playerFrame = document.getElementById('main'); } if(!playerFrame){ alert('Unable to find player?'); return; } playerFrame.contentWindow.window.eval('document.getElementById(\'app-player').contentWindow.window.eval('window.top.postMessage(JSON.stringify({"type":"bridge_request","id":1436027256787,"name":"player_pause","args":["main"],"appVendor":"com.spotify","appVersion":"4.2.0"}), "*");');'); }());

[pdaddyo]

I've seen a lot of those errors - it throws them even when soundbounce is disabled so I'm ignoring them, thanks for posting though