How to customize Global Media Controls in Google Chrome (question and answer)

Question

How to Enable or Disable Global Media Controls in Google Chrome

see "Global Media Controls"

1. Go to chrome://flags/#global-media-controls
2. Set "Enabled"
3. Click button "Relaunch"

How to customize (bacground image, action on click) Global Media Controls in Google Chrome

Example:

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

As far as I can tell, Chrome uses the mediaSession metadata only if it already detects a media stream from that page. For example, you can navigate to a YouTube video, enter what you wrote in the developer console, and the updated info will show up in the Global Media Controls. Doing the same thing on StackOverflow will not result in a new pane showing up in the Global Media Controls.

Now that this is cleared up, doing this in a Google Chrome extension is straightforward: you inject a content script that sets the metadata session object.