如何在 chrome 扩展中播放声音

Question

我想在 chrome 扩展中播放声音。我该怎么做？我应该在 myscript.js 文件中写什么？

我尝试在 myscript.js 中编写：

var audio = new Audio("alarm.wav");
audio.play();

和：

document.write('<audio id="player" src="alarm.wav" >');
document.getElementById('player').play();

但它不起作用。我没有再添加任何东西，所以没有未满足的条件。

我的 manifest.json 文件：

{
  "name": "Alarm",
  "version": "1.0.0",
  "icons": {"64": "icon64.png"},
  "permissions": [
    "http://site1/",
    "http://site2/"
  ],
  "content_scripts": [
    {
      "matches": ["http://site1/", "http://site2/"],
      "js": ["myscript.js"],
      "run_at": "document_end"
    }
  ],
  "manifest_version": 2
}

如果我在 myscript.js 文件中向站点添加按钮，此按钮效果很好，但我无法播放声音。我的音频文件是mp3，和manifest.json和myscript.js在同一个文件夹，我的myscript.js是：

var myAudio = new Audio();
myAudio.src = "alarm.mp3";
myAudio.play();

Answer 1

更新：从Chrome Extension Manifest v3 开始，Chrome 扩展程序已切换到service workers 用于后台页面，因此如果您使用Manifest v3，则不再可以直接从后台播放音频您的扩展程序的页面。另请参阅：Play a sound from a Service Worker。如果您仍在使用 Manifest v2，请继续阅读下面的答案。

---

使用 JavaScript 播放一些声音/音乐的最简单方法是使用 Audio 对象：您只需将要播放的文件放在扩展文件夹中，您可以像这样播放它：

var myAudio = new Audio(chrome.runtime.getURL("path/to/file.mp3"));
myAudio.play();

您可以使用play() 播放并使用pause() 暂停。

请记住，如果您想在内容脚本（或不在chrome://extension URL 下的任何其他地方）播放声音，您必须在web_accessible_resources 清单字段中声明音频文件：

"web_accessible_resources": [
    "path/to/file.mp3"
]

---

工作示例

您可以下载我从 HERE 制作的测试扩展。当您单击 stackoverflow.com 页面内的任何内容时，它会通过内容脚本播放声音。