Javascript Chrome扩展-注入对象赢得'；页面更新时不显示

我不熟悉javascript，但为了学习，我创建了一个简单的youtube视频下载扩展。然而，我的代码并没有按照我想要的方式工作，我创建并成功地在Youtube播放器右下角工具栏旁边插入了一个按钮，但它只有在我离开选项卡并返回后才会显示。我希望在每次加载youtube视频或用户单击新视频时执行该按钮或代码。我知道我应该做一些关于

选项卡的事情。在激活的
上，或者在更新的
上添加
侦听器或其他什么。。。请帮帮我

Background.js
chrome.tabs.onActivated.addListener（tab=>{
chrome.tabs.get（tab.tabId，当前选项卡信息=>{
如果（/^https:\/\/www.youtube\.com\/watch\？/.test（当前选项卡信息.url））{
chrome.tabs.insertCSS（null，{file:'./css/download button.css'}）；
executeScript（null，{file:'./foreground.js'}）；
}
})
});
foreground.js
是一个简单的
文档。createElement
事实上，您应该使用onUpdate，而不是onActivated，它也很简单：请参见本文末尾的示例。或者，您可以删除背景脚本并仅使用内容脚本（）。
chrome.tabs.onActivated.addListener(tab => {
        chrome.tabs.get(tab.tabId, current_tab_info => {
            if (/^https:\/\/www\.youtube\.com\/watch\?/.test(current_tab_info.url)){
                chrome.tabs.insertCSS(null, {file: './css/download-button.css'});
                chrome.tabs.executeScript(null, {file:'./foreground.js'});
            }
        })
    });