我正在编写一个非常简单的chrome扩展，它为当前页面添加了一个按钮。
manifest.json
{
"manifest_version": 2,
"name": "chrome-extension-tabs-executescript-add-button-demo",
"description": "Chrome Extension Add Button Demo",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
popup.html
<!doctype html>
<html>
<head>
<title>Chrome Extension Add Button Demo</title>
<script src="popup.js"></script>
</head>
</html>
popup.js
chrome.tabs.executeScript({
file: "add-button.js"
}, function() {
console.log("add-button.js injected")
})
add-button.js
var button = document.createElement("button")
button.innerText = "This is the inserted button, click on me!"
button['id'] = 'inserted'
button['data-name'] = 'name1'
button.onclick = function() {
alert('clicked!')
}
button.fun = function() {
alert('fun!')
}
document.body.appendChild(button)
问题
如果我们点击当前页面的扩展图标，并在浏览器控制台中键入以下代码，它几乎可以正常工作：
let button = document.getElementById('inserted');
button.click();
有警报意味着它在工作。
但当在上面调用fun()时：
button.fun();
它报告这样的错误：
Uncaught TypeError: button.fun is not a function
无法理解fun缺失的原因。
如果您需要，还可以提供一个简单但完整的演示：https://github.com/chrome-demos/chrome-extension-tabs-executescript-add-button-demo
我在其他答案中看到，它说内容脚本在"孤立的世界"中运行，页面和内容脚本只能看到相同的DOM，但不能看到彼此定义的变量。我的问题是，onclick和fun都是在DOM上定义的函数，为什么只有一个函数能很好地工作。
我想，在内容脚本中运行的代码
button.onclick = function() {
alert('clicked!')
}
button.fun = function() {
alert('fun!')
}
定义了两个函数，但它们并不相同。
onclick是共享DOM的标准属性，因此它直接添加到DOM中，这可以在页面上下文中看到。
但fun方法不是，因此不会添加到共享DOM中，而是添加到其他地方(可能是共享DOM的子实例(，只是停留在chrome内容脚本的范围内。
我的猜测正确吗？
你说得对。网页和内容脚本共享相同的事件模型，但具有独立的变量和属性。
当您将函数分配给button.onclick时，您实际上为现有的事件模型设置了一个处理程序(顺便说一句，使用onlick=不是一个好的做法(。但是，通过为.fun分配一个函数，您正在创建一个新的属性，该属性将与网页隔离。