This code allow to add custom button to top right panel on youtube (useful for coding webextensions)

youtube-top-bar-button.js

/* Just change 'id' field of first <div> */
const svgIcon = 'some svg icon string (24x24 pt)';
const extensionButtonTemplate = `
<div id="extension-button-container" class="style-scope ytd-masthead style-default" new-subscribe-color="" is-icon-button="" has-no-text="" style="width: 40px;">
<div id="button" class="style-scope ytd-topbar-menu-button-renderer" style="margin-top: 4px;">
<a class="yt-simple-endpoint style-scope ytd-topbar-menu-button-renderer" tabindex="-1">
<div="button" class="style-scope ytd-topbar-menu-button-renderer style-default">
<button id="button" class="style-scope yt-icon-button">
<div class="style-scope ytd-topbar-menu-button-renderer">
${svgIcon}
</div></button></div></a></div>
</div>`;

const buttonsElement = document.getElementById('buttons');
buttonsElement.insertAdjacentHTML('afterbegin',extensionButtonTemplate);
const extensionButton = document.getElementById('extension-button-container');
extensionButton.addEventListener('click', onClickEventHandler, false); 

function onClickEventHandler(event){
  alert("Clicked");
}