扩展音频/HTMLMediaElement javascript 对象答案

【问题标题】：Extending Audio / HTMLMediaElement javascript object扩展音频/HTMLMediaElement javascript 对象
【发布时间】：2012-07-15 14:45:00
【问题描述】：

我需要扩展 Audio 对象以提供停止功能。通常这段代码可以工作：

Audio.prototype.stop = function() {
    this.pause();
    this.currentTime = 0;
}

但是，我需要在 Chrome 扩展程序的内容脚本中执行此操作，并且由于上下文是分开的，因此更改不会传播到其他上下文。

我曾尝试使用 this unsafeWindow hack 尝试突破隔离环境，但没有成功，并尝试使用 Object.create 并设置 constructor 属性。

【问题讨论】：

内容脚本永远无法访问页面的全局window 对象。问题与Building a Chrome Extension - Inject code in a page using a Content script 重复。旁注，我会使用if (!Audio.prototype.stop) ...;，以避免在实现stop 时发生冲突。

标签： javascript google-chrome-extension html5-video html5-audio

【解决方案1】：

内容脚本有一个独立的执行环境，但它与页面共享 DOM。你可以通过在DOM中添加<script>标签，在页面的实际执行环境中运行脚本：

var s = document.createElement("script");
s.innerText = "Audio.prototype.stop = function() { this.pause(); this.currentTime = 0; }";
document.documentElement.appendChild(s);

我相信这段代码会在两个执行环境中运行脚本（或者至少应该在页面环境中运行）。

请注意，此解决方案只能在资源加载期间或之后运行脚本，而不是在 DOM 完成后立即运行，因为它需要浏览器处理添加到页面的新脚本资源。对于您当前的需求，这应该不是问题。

【讨论】：