如何在 Google Chrome 中自定义全局媒体控件（问答）

Question

如何在 Google Chrome 中启用或禁用全局媒体控件

请参阅“全局媒体控制”

1. 转到 chrome://flags/#global-media-controls
2. 设置“启用”
3. 单击“重新启动”按钮

如何在 Google Chrome 中自定义（背景图片、点击操作）全局媒体控件

例子：

if ('mediaSession' in navigator) {
    navigator.mediaSession.metadata = new MediaMetadata({
        title: "TITLE",
        artist: "ARTIST",
        album: "ALBUM",
        artwork: [{
            sizes: "320x180",// <- MUST BE EXACTLY!
            src: "https://i.ytimg.com/vi/yAruCvT7P7Y/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLAfHWw5BHrQugGsdPYy4eIXcqMTnQ",
            type: ""
        }]
    });

    navigator.mediaSession.setActionHandler('play', function () { });
    navigator.mediaSession.setActionHandler('pause', function () { });
    navigator.mediaSession.setActionHandler('seekbackward', function () { });
    navigator.mediaSession.setActionHandler('seekforward', function () { });
    navigator.mediaSession.setActionHandler('previoustrack', function () { });
    navigator.mediaSession.setActionHandler('nexttrack', function () { });
}

Answer 1

据我所知，ChromemediaSession仅在已检测到来自该页面的媒体流时才使用元数据。例如，您可以导航到 YouTube 视频，输入您在开发者控制台中编写的内容，更新的信息将显示在全局媒体控件中。在 StackOverflow 上执行相同的操作不会导致全局媒体控件中显示新窗格。

现在这个问题已经解决了，在 Google Chrome 扩展中执行此操作非常简单：注入一个设置元数据会话对象的内容脚本。