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

Question

I am making a google chrome extension, where you press certain buttons, it starts, pauses, or restarts a song.我正在制作一个 google chrome 扩展程序，您可以在其中按下某些按钮，开始、暂停或重新启动歌曲。 I got it working but there is one problem.我让它工作了，但有一个问题。 When I close the extension, the song stops!当我关闭扩展程序时，歌曲停止！ I need to know if there is a way around this.我需要知道是否有办法解决这个问题。 I have looked into background scripts and stuff, but I can't get them to work.我已经研究了后台脚本和东西，但我无法让它们工作。 Please help as this is one of my first google chrome extensions, and I would like to learn more.请帮忙，因为这是我的第一个 google chrome 扩展程序之一，我想了解更多。 Thanks for any help you give me!谢谢你给我的任何帮助！

Html: (popup.html) 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) 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) 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: (manifest.json)清单： （manifest.json）

{
"manifest_version":2,

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

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

"permissions":[
    "activeTab"
]
}

Answer 1

The document that popup.html creates exists only as long as it's open. popup.html创建的文档只有在打开时才存在。

The moment the popup closes the <audio> element no longer exists.弹出窗口关闭的那一刻<audio>元素不再存在。

A background page provides a solution to that - it exists independently of the popup.背景页面为此提供了解决方案 - 它独立于弹出窗口而存在。

You don't normally create a background page's HTML yourself, only provide a bunch of scripts.你通常不会创建一个后台网页的HTML自己，只提供了一堆的脚本。 But nothing stops you from creating a DOM node on the fly:但是没有什么可以阻止您即时创建 DOM 节点：

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

audio_element.play();

Now, the popup's code won't be able to directly access the audio_element of the background page;现在，popup 的代码将无法直接访问后台页面的audio_element ； you could do a quick hack job with getBackgroundPage methods, but it's preferable to learn how Messaging works and use chrome.runtime.sendMessage from the popup to control the background.您可以使用getBackgroundPage方法快速完成工作，但最好了解Messaging 的工作原理并使用弹出窗口中的chrome.runtime.sendMessage来控制背景。

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2018-11-02 11:28:54

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2018-11-02 11:28:54

解决方案1
3 已采纳 2018-11-02 11:28:54