从 google chrome 扩展程序在后台运行音乐
Posted
技术标签:
【中文标题】从 google chrome 扩展程序在后台运行音乐【英文标题】：Running music in the background from google chrome extension 【发布时间】：2018-10-30 23:01:58 【问题描述】：我正在制作一个 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"
]
【问题讨论】：
将音频播放/暂停放在后台脚本/页面中，而不是在 popup.js 中 我试过了。后台脚本由于某种原因无法访问popup.html，所以无法播放音频。 安装“Noisly” chrome 扩展并对其进行研究。 @elegant-user 我找不到那个扩展名 这是我的错，我拼错了名字，看看这个：chrome.google.com/webstore/detail/noisli/… 【参考方案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 来控制背景。
【讨论】：
谢谢！我之前忘了将此标记为答案。以上是关于从 google chrome 扩展程序在后台运行音乐的主要内容，如果未能解决你的问题，请参考以下文章
我可以通过 Google Chrome 扩展程序以编程方式打开 devtools 吗？
JavaScript 回调/异步问题？ Chrome 扩展程序的后台脚本在完成之前停止功能