javascript - 如何在谷歌浏览器中自定义全局媒体控件（问答）

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 视频，输入您在开发者控制台中编写的内容，更新的信息将显示在 Global Media Controls 中。在 StackOverflow 上执行相同操作不会导致全局媒体控件中出现新窗格。

现在这已被清除，在 Google Chrome 扩展程序中执行此操作很简单：您注入一个设置元数据会话对象的内容脚本。