Question

我正在制作一个google chrome扩展程序，您可以在其中按某些按钮来启动，暂停或重新启动一首歌曲。我知道了，但是有一个问题。当我关闭扩展名时，歌曲停止！我需要知道是否有解决办法。我已经研究了背景脚本和内容，但无法使其正常工作。请帮忙，因为这是我的第一个Google chrome扩展程序，我想了解更多。感谢您给我的任何帮助！

HTML ：（popup.html）

<html>
<head>

<link rel="stylesheet" href="styles.css">
<script src="popup.js"></script>


</head>
<body>

<center>
<h1>Music Player</h1>
<h3>Songs:</h3>

<div id="ludicrous_speed">Ludicrous Speed 
<audio id="ludicrous" src="songs/ludicrous_speed.mp3" preload="auto"></audio>
<button class="Start" id="StartLudicrous">Start</button>
<button class="Pause" id="PauseLudicrous">Pause</button> 
<button class="Restart" id="RestartLudicrous">Restart</button>
</div>

</center>

</body>
</html>

Javascript：（popup.js）

function Start(song) {
song.play();
}

function Pause(song) {
song.pause();
}

function Restart(song) {
song.currentTime = 0;
}

document.addEventListener('DOMContentLoaded', function(){
var Start_Ludicrous = document.getElementById('StartLudicrous');
var Pause_Ludicrous = document.getElementById('PauseLudicrous');
var Restart_Ludicrous = document.getElementById('RestartLudicrous');

Start_Ludicrous.addEventListener('click', function() {
    Start(ludicrous);
});
Pause_Ludicrous.addEventListener('click', function() {
    Pause(ludicrous);
});
Restart_Ludicrous.addEventListener('click', function() {
    Restart(ludicrous);
});
});

CSS：（styles.css）

body {

width:300px;

}

.Start {
background-color: #42f46e;
border-color: #42f46e;
border-radius: 30%;
}

.Pause {
background-color: #f4e349;
border-color: #f4e349;
border-radius: 30%;
}

.Restart {
background-color: #e03838;
border-color: #e03838;
border-radius: 30%;
}

清单：（manifest.json）

{
"manifest_version":2,

"name":"Music Player",
"description":"Play Music",
"version":"1.0",

"browser_action":{
    "default_popup":"popup.html"
},

"permissions":[
    "activeTab"
]
}

Answer 1

popup.html创建的文档仅在打开时存在。

弹出窗口关闭<audio>元素的时刻不再存在。

背景页面提供了解决方案-它独立于弹出窗口而存在。

您通常不会通常自己创建后台页面的HTML，而仅提供一堆脚本。但是没有什么可以阻止您即时创建DOM节点：

// background.js
var audio_element = document.createElement("audio");
audio_element.src = "songs/ludicrous_speed.mp3";

audio_element.play();

现在，弹出窗口的代码将无法直接访问后台页面的audio_element；您可以使用getBackgroundPage方法来快速完成黑客工作，但是最好学习Messaging的工作原理，并从弹出窗口中使用chrome.runtime.sendMessage来控制背景。

从谷歌浏览器扩展程序在后台运行音乐

1 个答案: