running a shoutcast radio in a chrome extension

2019-07-04 15:56发布

i want to create a chrome extension for my internet shoutcast internet radio station.

i managed to make it all work, except that whenever i click away from the popup, it closes, and the stream stops with it.

after reading a little i saw that i need to create a background page, that will make the player run in the background.

thats where i got lost and confused.

how do i make the stream keep working even if i dont have the popup open?

again - heres how it goes: when you click on the extension it opens, and my player shows up (a flash player in an iframe). i click Play and it works perfectly. when i wanna keep surfing the web, i click on the page im in and it closes the extension and stops the music.

here are my files manifest.json:

{
  "name": "JointRadio",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Online Radio Station",
  "background_page": "background.js",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

  "permissions": ["tabs"],
}

popup.html:

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        min-width:357px;
        overflow-x:hidden;
      }

      img {
        margin:5px;
        border:2px solid black;
        vertical-align:middle;
        width:75px;
        height:75px;
      }

      #mainplayer {

      }
    </style>

    <!-- JavaScript and HTML must be in separate files for security. -->
    <script src="popup.js">
  </head>
  <body>
  <iframe width="460" border=0 height="130" src="http://jointil.com/broadcast/flexAmp.swf" frameborder=0 marginheight=0 marginwidth=0 id="mainplayer"></iframe>
  </body>
</html>

Thanks in advance!! :) adam

标签: background
1条回答
孤傲高冷的网名
2楼-- · 2019-07-04 16:30

I found a way to make the stream play even if the popup is closed, but the problem is that the player doesn't display in the popup... I added this code in "background.js"

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'http://85.25.118.16:7502/;');
audioElement.setAttribute('controls', true);
audioElement.setAttribute('hidden', false);
audioElement.play(); 

2 - manifest.json:

{
"name": "Kombat Syndicate Radio Extension",
"version": "1.0",
"manifest_version": 2,
"description": "Kombat Syndicate Radio",
"background": {
"persistent": true,
"scripts": ["background.js"]
},
"browser_action":   {
    "default_icon": "icon.png",
     "19": "icons/icon.png",  
     "128": "icons/icon_128.png",
    "default_popup": "ksradio.html"
},

    "permissions": ["tabs", "http://*/*", "background"]

    }

If I find out how to display the player in the popup I'll tell you.. And if you find how to display it before me, then please tell me :P

Edit:

I noticed that in your "popup.html" the "<script src="popup.js">" isn't correct, add "</script>" after "<script src="popup.js">" so you'll have "<script src="popup.js"></script>"

查看更多
登录 后发表回答