Javascript 通过chrome扩展将按钮插入当前页面，但某些方法不起作用

我正在写一个非常简单的chrome扩展，它在当前页面上添加了一个按钮

manifest.json popup.html add-button.js 问题 如果我们单击当前页面的扩展图标，并在浏览器控制台中键入以下代码，它几乎可以正常工作：

let button = document.getElementById('inserted');
button.click();

有警报意味着它正在工作

但是当在上面调用

fun（）

时：

button.fun();

它报告了这样的错误：

Uncaught TypeError: button.fun is not a function

无法理解为什么缺少

fun

如果需要，还可以提供一个简单但完整的演示：

---

我在其他答案中看到它说的是内容脚本，页面和内容脚本只看到相同的DOM，而不是彼此定义的变量。我困惑的问题是，

onclick

和

fun

都是DOM上定义的函数，为什么它们中只有一个可以很好地工作

我猜，代码是在内容脚本中运行的

button.onclick = function() {
    alert('clicked!')
}
button.fun = function() {
    alert('fun!')
}

定义了两个函数，但它们被认为是不同的

onclick

是共享DOM的标准属性，因此它直接添加到DOM中，可以在页面上下文中看到

但是

fun

方法不是，因此不会添加到共享DOM，而是添加到其他地方（可能是共享DOM的子实例），只是停留在chrome内容脚本的范围内

我的猜测正确吗？

你说得对。 网页和内容脚本共享相同的事件模型，但具有独立的变量和属性

当您将函数分配给

按钮.onclick

时，实际上为现有的事件模型设置了一个处理程序。（顺便说一句，使用

onlick=

不是好的做法）。 但通过将函数分配给

.fun

——您正在创建一个新属性，该属性将与网页隔离

let button = document.getElementById('inserted');
button.click();

button.fun();

Uncaught TypeError: button.fun is not a function

button.onclick = function() {
    alert('clicked!')
}
button.fun = function() {
    alert('fun!')
}