Chrome 扩展：注入按钮的 onclick 不起作用答案

【问题标题】：Chrome Extension: Injected button's onclick not workingChrome 扩展：注入按钮的 onclick 不起作用
【发布时间】：2023-03-08 08:15:01
【问题描述】：

第一次使用 chrome 扩展。现在我有一个按钮和一个从内容脚本注入到页面的模式。

添加按钮

var button1 = document.createElement("button");
button1.innerHTML = "Button";
button1.onclick = openModal;
document.querySelector('.myClass').appendChild(button1);

添加模态

var modal = document.createElement("div");
modal.classList.add('modal');
var button = document.createElement("button");
button.innerHTML = "Close";
button.onclick = closeModal;
modal.appendChild(button);
document.body.appendChild(modal);

我在将显示设置为“无”的类模式中定义样式

在 openModal 中

function openModal(){
    var modal = document.querySelector('.modal');
    modal.style.display = "block";
}

显示模态。

在closeModal里面

function closeModal(){
    var modal = document.querySelector('.modal');
    modal.style.display = "none";
}

关闭模式。

这是我正在创建的通用格式。第一个按钮的 onclick 工作正常并打开模式，但关闭模式的第二个按钮不起作用。关于这里出了什么问题的任何线索？

【问题讨论】：

你可以尝试将none改为“none”
@TusharShahi 它是“无”，抱歉忘记在代码中添加它。 closeModal 在第二次单击按钮时根本没有触发。我为测试添加了一条警报语句，但没有结果
另外，我希望称为按钮的 2 个变量在不同的范围内？因为他们有相同的名字。您如何在删除和添加功能中访问模式。您可以在问题描述中添加这些内容吗？
@TusharShahi 更新
您的添加模式是单独的功能吗？什么时候调用？

标签： javascript google-chrome-extension

【解决方案1】：

好的，不确定这里发生了什么，但我添加了一些额外的代码，这些代码注入了新的 js 代码，这些代码接受了窗口点击事件，并将该事件与模态的类进行比较以关闭它。在以某种方式进行这些更改后，closeModal 函数也开始触发。不完全确定它是缓存错误还是什么，但它现在可以工作了。因此，如果有人遇到类似问题，可能会尝试清除缓存并重试。

【讨论】：