将Click事件添加到Chrome扩展程序中的按钮

Question

我想将click事件添加到按钮元素，然后通过运行executeScript函数将其动态添加到chrome.tabs.onUpdated事件函数中。

chrome.tabs.onUpdated.addListener(() => {
  chrome.tabs.executeScript(null, {file: "execute.js" });
})

我将click事件函数添加到动态添加的按钮元素中，并且该代码位于已执行的execute.js文件中，但没有用；

var btnComment=document.createElement('button');
btnComment.addEventListener('click',function(){
  console.log('btnComment worked')
});

我使用里面的background.html页面请求background.js文件。如何实现此功能？

Answer 1

您的backround.html有这个吗？

<script src="background.js"></script>

请注意，您是在execute.js中创建按钮的，但是您的html使用background.js，因此在您的 background.js 文件中，您将需要以下内容：

function onButtonClicked (){
  console.log('btnComment worked');
}

document.getElementById('button').addEventListener('click', onButtonClicked());

顺便说一句，我还在学习谷歌浏览器扩展程序。

Answer 2

很遗憾，由于您的程序看起来缺少上下文，因此我无法给出100％肯定的答案。但是，我认为问题在于您需要首先使用DOM专门选择元素。

尝试

document.getElementById('button').addEventListener('click',function(){
   console.log('btnComment worked')
});

有关文档对象模型的更多信息，请参见：https://www.w3schools.com/js/js_htmldom.asp

编辑：拼写