add overlay button on youtube with chrome extension

Question

I want to make an extension in chrome which stops youtube video at particular time and add a custom button below the video. I can pause the video but stuck at adding a button at the bottom of the video. Can anyone help me with that. It's been now 5 hours I am trying :( but cannot append a button at the bottom of the video.

this is my content.js file

chrome.runtime.onMessage.addListener (
  function(request, sender, sendResponse) {
    if (request.message === "toggle_video_state") {
        var video = document.getElementsByTagName("video")[0];
      if (video) {
        if (video.paused) {
            video.play();
              sendResponse({paused: false, tabId: request.tabId});
              
        } else {
            video.pause();
            sendResponse({paused: true, tabId: request.tabId});
        }
      } else {
        sendResponse({error: 'No video object found'});
      }
    }
    if (request.message === "toggle_video_state") {
      var video = document.getElementsByTagName("video")[0];
      video.pause();
      sendResponse({paused: true, tabId: request.tabId});
    }
  }
);
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.requested == "createDiv"){
            //Code to create the div
            sendResponse({confirmation: "Successfully created div"});
        }   

});

and this is my popup.js file

var matchUrl = '*://www.youtube.com/watch?v*';
var queryInfo = {url: matchUrl};
chrome.tabs.query(queryInfo, function(tabs) {
    var cl = $('#content-list');
    tabs.forEach(function(tab) {
        var imageClass = tab.audible ? 'pauseImage' : 'playImage';
        var x = `
            <div class="item" id=${tab.id}>
                <div class="tabimage" id="playpause${tab.id}">
                    <img class="${imageClass}" id="playImage${tab.id}" border="0">
                </div>
                <div class="tabInfo" id="jump${tab.id}">
                    <div class="close" id="close${tab.id}" title="close tab"></div>
                    <div class="title" id="title${tab.id}">${tab.title}</div>
                    <div class="url" id="url${tab.id}">${tab.url}</div>
                </div>
            </div>
        `
        cl.append($(x));
        setTimeout(function() {
        chrome.tabs.sendMessage(tab.id, {message: 'toggle_video_state', tabId: tab.id}, function(response) {
                console.log('response: ' + response);
                if (response.error) {
                    console.log('No video found in tab');
                } else {
                    if (response.paused) {
                        $('#playpause' + response.tabId + ' img').attr('class', 'playImage');
                    } else {
                        $('#playpause' + response.tabId + ' img').attr('class', 'pauseImage');
                    }
                }
            });
    }, 10000);
        $('#playpause'+tab.id).on('click', {tabId: tab.id}, function(event) {
            console.log('Clicked tab with event state ', event.data.tabId);
            chrome.tabs.sendMessage(event.data.tabId, {message: 'toggle_video_state', tabId: event.data.tabId}, function(response) {
                console.log('response: ' + response);
                if (response.error) {
                    console.log('No video found in tab');
                } else {
                    if (response.paused) {
                        $('#playpause' + response.tabId + ' img').attr('class', 'playImage');
                    } else {
                        $('#playpause' + response.tabId + ' img').attr('class', 'pauseImage');
                    }
                }
            });
        });

        $('#jump'+tab.id).on('click', {tabId: tab.id, windowId: tab.windowId}, function(event) {
            console.log('Clicked tab with event state ', event.data.tabId);
            chrome.windows.update(event.data.windowId, {focused: true});
            chrome.tabs.update(event.data.tabId, {active: true});
        });

        $('#close'+tab.id).on('click', {tabId: tab.id}, function(event) {
            console.log('Clicked tab with event state ', event.data.tabId);
            chrome.tabs.remove(event.data.tabId);
        });
    });
    if (tabs.length == 0) {
        var x = `
            <div style="text-align: center">No active youtube tabs</div>
        `
        $('body').attr('style', 'margin: 0; padding: 0');
        $('html').attr('style', 'margin: 0; padding: 0');
        cl.append($(x));
    }
});

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  var re = /www\.youtube\.com/;
  if (re.test(tab.url) && changeInfo.title) {
    document.getElementById("title" + tabId).textContent = changeInfo.title;
    document.getElementById("url" + tabId).textContent = tab.url;
  }
});