在 google chrome 扩展程序中单击链接时打开一个弹出窗口并在扩展程序中插入 Flash 播放器答案

【问题标题】：Opening a popup when a link is clicked inside a google chrome extension and insert a flash player in an extension在 google chrome 扩展程序中单击链接时打开一个弹出窗口并在扩展程序中插入 Flash 播放器
【发布时间】：2012-12-13 16:15:44
【问题描述】：

你好（是的，很长的标题）

我正在制作我的第一个 google chrome 扩展程序，但遇到了一些问题。

关于扩展的信息（只是为了让你明白我想要做什么）：

该扩展程序是一个“收音机”，一个从广播网址播放音乐的 Flash 播放器。在 Flash 播放器的底部，有 4 个图标，其中 3 个在单击时下载 .pls 文件以使用 VLC - WinAmp & iTunes 打开，一个应该打开一个弹出窗口，并显示来自收音机的以下信息。

我想做的是：

1 - 当用户点击图标时（在下图中的红色方块中），应该会打开一个弹出窗口，其中包含一个播放器（windows 媒体播放器）和一些关于收音机的信息（这些信息是通过一个iframe)

2 - 在扩展中显示 flash 播放器（以及 windows 媒体播放器），这似乎不起作用...

--图片：http://i.imgur.com/1qZDn.png

代码：

1 - manifest.json：

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

   "permissions": [
   "tabs"
    ]

}

2 - ksradio.html：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js"></script>
</head>

<body>
<h1><img style="margin-top:-15px;-webkit-box-reflect: below 0px -webkit-   gradient(linear, left top, left bottom, from(transparent), color-stop(87%, transparent),  to(white));
" src="icons/ks_radio_icon.png" /><br />Kombat Syndicate Radio</h1>

<div align="center" text-align="center" id="content">
<div id="smallffmp3">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="140" height="80"   __idm_id__="1284874242">
    <param name="movie" value="http://tracks.kombatsyndicate.com/wp- content/plugins/shout-stream/smallffmp3.swf?url=http://85.25.118.16:7502/;&amp;title=Trac[kS]">
    <param name="wmode" value="transparent">
    <param name="allowscriptaccess" value="sameDomain"><!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="http://tracks.kombatsyndicate.com/wp-content/plugins/shout-stream/smallffmp3.swf?url=http://85.25.118.16:7502/;&amp;title=Trac[kS]" width="140" height="80" __idm_id__="1284874243">
    <param name="wmode" value="transparent">
    <param name="allowscriptaccess" value="sameDomain"><!--<![endif]-->
    </object><!--<![endif]-->
     </object>

     </div>

    <a href="http://85.25.118.16:7502/listen.pls" target="_blank"><img  src="icons/VLC_48.png" title="VLC Media Player"/></a>
    <a href="#" onClick="ksradiowmp()"><img src="icons/WMP_48.png" /></a>
    <a href="http://85.25.118.16:7502/listen.pls" target="_blank"><img  src="icons/WinAmp_48.png" title="WinAmp Media Player" /></a>
    <a href="http://85.25.118.16:7502/listen.pls" target="_blank"><img  src="icons/iTunes_48.png" title="iTunes" /></a>

    <iframe align="middle" style="display:block;" name="infos"  src="http://phpks.comoj.com/radioinfos.php" width="65%" height="70%" frameborder="0"   scrolling="no" seamless></iframe>

    </div>

    </body>
    </html>

3 - ksradio_wmp.html（弹出窗口）：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<h1><img style="margin-top:-15px;-webkit-box-reflect: below 0px -webkit- gradient(linear, left top, left bottom, from(transparent), color-stop(87%, transparent),  to(white));
" src="icons/ks_radio_icon.png" /><br />Kombat Syndicate Radio</h1>
<div style="overflow:hidden;" align="center" id="content">
<object id="MediaPlayer1" width="350" height="65" classid="clsid:6bf52a52-394a-11d3- b153-00c04f79faa6"  codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1 ,52,701">
<param name="FileName" value="http://85.25.118.16:7502/" />
<param name="animationatStart" value="true" />
<param name="transparentatStart" value="true" />
<param name="autoStart" value="true" />
<param name="showControls" value="true" />
<param name="fullScreen" value="false" />
<param name="url" value="http://85.25.118.16:7502/" />
<param name="pluginspage" value="http://www.microsoft.com/Windows/MediaPlayer/" />
<param name="autostart" value="1" />
<param name="showcontrols" value="1" />
<embed id="MediaPlayer1" width="350" height="65" type="application/x-mplayer2"   src="http://85.25.118.16:7502/" FileName="http://85.25.118.16:7502/"  animationatStart="true" transparentatStart="true" autoStart="true" showControls="true"  fullScreen="false" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"  autostart="1" showcontrols="1" />
   </object>
   <a href="http://85.25.118.16:7502/listen.pls"><img src="icons/VLC_48.png" title="VLC   Media Player"/></a>
   <a href="http://85.25.118.16:7502/listen.pls"><img src="icons/WinAmp_48.png" title="WinAmp Media Player" /></a>
   <a href="http://85.25.118.16:7502/listen.pls"><img src="icons/iTunes_48.png"   title="iTunes" /></a>
   <iframe style="display:block;" name="infos"   src="http://phpks.comoj.com/radioinfos.php" width="65%" height="70%" frameborder="0"   scrolling="no" seamless></iframe>

   </div>
   </body>
   </html>

4 - script.js：

function ksradiowmp() {
window.open("ksradio_wmp.html", "myWindow", "status=1, height=450, width=400, resizable=0, toolbar=no, directories=no, menubar=no, scrollbars=no")

}

P.S：弹出窗口应该是这样的：http://i.imgur.com/SwzNW.png

所以要恢复，我需要帮助来从扩展中打开一个弹出窗口，并在扩展中显示 Flash 播放器和 windows 媒体播放器。我真的希望你们能帮助:D 提前致谢。

【问题讨论】：

标签： google-chrome google-chrome-extension

【解决方案1】：

消除

的所有实例

a)value="http://tracks.kombatsyndicate.com/wp- content/plugins/shout-stream/smallffmp3.swf?url=http://85.25.118.16:7502/;&amp;title=Trac[kS]"

b)href="http://85.25.118.16:7502/listen.pls"

c) onClick="ksradiowmp()" 等等等等

如果您需要更多信息，请告诉我。

【讨论】：

我忘了提到我不太擅长 javascript.. 但不知何故我让弹出窗口工作了，有点.. 它不仅在我点击图标时弹出（就像我希望它是），但是当我单击页面上的任何位置时它会弹出.. 我添加到 script.js 中的内容：document.addEventListener('click', function () { document.querySelector('a#wmppop').addEventListener('click'); ksradiowmp(); }); 在 ksradio.html 中：<a href="#" id="wmppop"><img src="icons/WMP_48.png" /></a> 你能帮帮我吗？我还需要在扩展程序中嵌入 Flash 播放器的帮助..
你已经为整个文档添加了一个事件监听器而不是 icon\button，你可以使用 document.getelementbyid().onclick = your function code;
喜欢这个？：document.addEventListener('click', function () { document.getElementById('wmppop').onclick = ksradiowmp(); }); 我是这样做的，它仍然会在我点击页面的任何地方打开弹出窗口，而不仅仅是在图标上:(
这样做LINK，如果仍然失败，请告诉我。
太棒了！谢谢！关于 Flash 播放器和 Windows 媒体播放器的任何想法？如何将它们嵌入到扩展中