Chrome扩展content-script中JS自动播放视频遇DOMException如何解决？

问题描述 #

我在Chrome扩展的content-script文件中用JS播放video元素时，触发了如下错误：

DOMException: play() failed because the user didn't interact with the document first.

我注意到Youtube Party这类扩展可以直接播放视频，不需要用户和网页交互，它们的代码只是调用videoHtmlElement.play()就能生效，但我自己的代码执行时还是报错，代码如下：

case "syncVideoState":
  const {time, paused} = msg.currentVideoState;
  item.currentTime = time;
  if(!paused){
    item.play();
  } else {
    item.pause();
  }
  sendResponse(true);
  break; 

请问怎么避免这个异常？

解决方法 #

• 绑定播放操作到用户对扩展的交互
  浏览器的自动播放政策要求媒体播放必须由用户交互触发，但这里的交互可以是对扩展本身的操作（比如点击扩展图标），不一定是对网页的操作。你可以把触发syncVideoState消息的逻辑绑定到用户点击扩展浏览器动作的事件上，比如在后台脚本里监听点击事件，再向content-script发送播放指令——此时content-script执行play()就不会触发权限错误。

• 用后台脚本传递用户交互上下文
  如果需要自动同步视频状态，先让用户通过点击扩展图标完成一次初始交互，之后后台脚本再持续向content-script发送同步指令。只要初始触发是用户交互，后续的播放操作就会被浏览器允许。

• 调整脚本注入时机
  不要在页面加载完成后自动执行播放逻辑，必须等用户有过与扩展的交互动作后，再执行item.play()。比如在content-script里先监听来自后台的消息，而后台消息只有在用户点击扩展后才发送。

举个后台脚本示例：

// background.js
chrome.action.onClicked.addListener((tab) => {
  chrome.tabs.sendMessage(tab.id, {
    type: "syncVideoState",
    currentVideoState: { time: 0, paused: false }
  });
});

内容的提问来源于stack exchange，提问作者ANDRES DAVID CAMARGO ARCOS